# 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.

```js
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.

```js
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);
        },
      },
    },
  ],
});
```
