44px/widget-kit

A set of utilities for embeddable widgets

widget-kit

A set of utilities for embeddable widgets — apps which are installed on a wide range of different sites. They have to work in unpredictable environment and interact with external code. widget-kit aims to make these tasks easier.

What's included

@widget-kit/rpc

Establishes connection between two windows allowing both to send and handle requests.

@widget-kit/container

Loads widget into iframe to isolate it from site’s CSS and provide own JS context. This package bundles @widget-kit/rpc so widget and site can communicate.

If you are building widget from scratch you can start with container and use plugins for common tasks:

@widget-kit/container-plugin-size

Change iframe size from widget (example).

@widget-kit/container-plugin-position-fixed

Control iframe position relative to viewport. Useful for widgets which "floats" on a page, like chats and popups.

Development

npm install — install common dev dependencies and each package dependencies

npm run bootstrap — install dependencies for packages and create symlinks

npm test — run tests for all packages

widget-kit's Issues

Blocked a frame with origin from accessing a cross-origin frame.

This project does not perform as expected when embedding this on external websites - which is the purpose of widgets.

Has this been tested when the widget such as the loader.js and widget.js is hosted on another domain?

Changes to packages are not picked up

Hi there,

I am trying to add a simple box shadow to my iframe. So in packages/container/src/container.ts I set iframe.style.boxShadow = "rgb(0 0 0 / 15%) 0px 2px 10px;"

However, these changes are not picked up. I've tried to run npm install and npm run bootstrap but they don't help either.

Ive also tried to change the examples/package.json to point to local file versions such as "@widget-kit/container": "file:../packages/container", - but this does not work either.

Any suggestions on how to develop and make changes to the packages during development and have it all linked locally rather than from npm?