Widgets

The Frill API allows you to access, customize, and control any Widget loaded by the Frill Script. Using the Frill API is simple once you have a reference to a Widget. To do this, you first need to know the Key, which you can find in your Widget dashboard, or on the edit screen.

Frill('widget')

The easiest way to access a Widget is by calling the widget command with the Widget Key. If the Widget is already loaded, the function will return the existing instance, making it safe to call multiple times.

const widget = await window.Frill('widget', {
  key: 'YOUR_WIDGET_KEY', // <-- Add Widget key here
  callbacks: {
    onReady(widget) {
      // Optional callback if you prefer this syntax
      console.log(widget);
    },
  },
});

Using container onReady callback

Another option is to providing an onReady callback in your script configuration. This callback will run once when ready and will receive the Widget instance. To do this, include a custom widgets configuration when you load your script, using the corresponding Widget Key.

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  widgets: [
    {
      key: 'YOUR_WIDGET_KEY', // <-- Add Widget key here
      callbacks: {
        onReady(widget) {
          // This function is called when the Frill Widget is fully loaded and ready for use
          console.log(widget);
        },
      },
    },
  ],
});