Frill
Widgets & Embeds

Embedding widgets on your website

After creating a widget, you need to embed it on your website. Frill offers two methods: using the Frill Script with a widget key, or embedding an iframe directly. The advantage of Frill Script is that you can still control the widget from your app.

The Frill Script must be installed on your site before widgets can appear. See Installing the Frill Script.

When using the Frill Script, your widget must be an Embed type. Then Add the data-frill-widget attribute to any HTML element:

<div data-frill-widget="YOUR_WIDGET_KEY"></div>

The widget will appear when users interact with that element.

Method 2: Direct iframe embed

For simple use cases, embed the widget as an iframe:

  1. Go to Widgets in your dashboard

  2. Click your widget card

  3. Select Iframe from the modal

  4. Copy the iframe code

  5. Paste it into your website HTML

The iframe code looks like this:

<iframe src="https://widget.frill.co/embed/widget/YOUR_WIDGET_KEY" frameborder="0" allowfullscreen></iframe>

Iframe embeds don't support targeting rules or user identification. Use the Frill Script for advanced features.

Finding your widget key

Each widget has a unique key. To find it:

  1. Navigate to Widgets in your dashboard

  2. Click on your widget card

  3. Select Copy Widget key

Use this key in the methods above.

Framework integration

The Frill Script works with React, Vue, Angular, Next.js, and other frameworks. For implementation details, see Framework integration.

For more control options, see Controlling widgets programmatically.

Was this helpful?
Was this helpful?