Interacting with the Widget

This page explains how to interact with the widget from your web application.

Interaction is primarily done through the widget’s helper script. If you haven’t installed it yet, follow the installation instructions.

Widget API

The helper script exposes a set of functions for interacting with the widget.

setTheme

Use the setTheme function to set the widget’s theme.

Valid themes are light and dark.

window.SkrymTrackingWidget.setTheme('dark');

setLanguage

Use the setLanguage function to set the widget’s language.

Valid languages are sv, en, no and fi.

window.SkrymTrackingWidget.setLanguage('fi');

Listen to the widget and script on load

Because the widget and helper script are loaded asynchronously by the browser, they are not necessarily ready when your web application is.

In certain cases, such as when the user changes the theme or language manually, it's enough to check that window.SkrymTrackingWidget is defined. However, if you want to call the widget as soon as possible, you can listen for the widget and helper script to load.

Note that depending on your setup, the widget and helper script may already be loaded before you add the listeners, and you will therefore never receive the events.

Widget

The widget loads in an iframe. When it’s ready, it sends a message you can listen for:

window.addEventListener('message', (message) => {
  if ('type' in message.data && message.data.type === 'skrym-tracking-widget-loaded') {
    // The widget is loaded and ready to use
  }
});

Helper Script

The helper script loads in the same window as your application. It dispatches a custom event when ready:

window.addEventListener('skrym-tracking-widget-script-loaded', () => {
  // You helper script is loaded and ready to use
});