When initializing Weavy you can pass in various options that affect the behavior of the UIKit and the connected web components. In the example below we pass in the required url and tokenFactory properties and provide a custom array of emoji for reactions.

Configuring Weavy using Javascript/Typescript

You can configure Weavy using javascript. This provides full configuration possibilities if you want to configure additional functionality such as localization.

const weavy = new Weavy();
weavy.url = "";
weavy.tokenFactory = async (refresh) => "access_token";
weavy.reactions: ["👍", "❤️", "😂", "😒", "😁"],


Most properties are optional and/or has sensible default values. Required properties are indicated with an (*).

Property Type Default Description
url* string | URL The URL to the weavy environment.
tokenUrl string | URL An URL to your own access token endpoint. This enables a default fetching tokenFactory. The endpoint should return JSON encoded access_token and is called with a ?refresh=true query string when a fresh token is needed.
tokenFactory* WeavyTokenFactory Async function returning an access_token string for your authenticated user. A boolean refresh parameter is provided to let you now if a fresh token is needed from Weavy.
locale string "en" Selected locale. The locale must be pre configured in .config.locales.
locales string[] Array of enabled locales. The corresponding locales must be available for loading as a locale .js file.
localesUrl string "./locales" The base url where locale .js files can be found.
reactions string[] ["😍", "😎", "😉", "😜", "👍"] An array of unicode emoji for reactions.
modalParent string "body" Element query selector for where to attach modals. Defaults to body but can be optionally be set to html to provide compatibility with some frameworks. Note that any font styles must be provided using :root or html when using the html selector.
scrollBehavior "smooth" | "instant" | "auto" chrome ? "instant" : "smooth" Which scroll behavior to use (where applicable). Note that not all browsers (Chrome) have similar scroll transitions, they may be very slow. See
cloudFilePickerUrl string | URL "" The url to the cloud file picker.

Configuring Weavy using plain HTML

To enable and simplify configuration in contexts that has limited javascript functionality, Weavy also provides configuration using a <wy-context></wy-context> Web Component. The standard configuration properties are available, but additional functionality may be limited.

<wy-context url="" tokenUrl="https://myserver.test/api/token"></wy-context>
<h1>Messenger with standard weavy configuration</h1>

The Weavy Context can be used both by itself and as a standard context provider where you place all the Weavy blocks as children of the Weavy context provider.

<wy-context url="" tokenUrl="https://myserver.test/api/token">
    <h1>Messenger inside a weavy context provider</h1>