Quick start

Quick start

Getting Started

Use the Frill Script to automatically load all Widgets and Surveys. Get your Frill Script code from the Frill Script settings page and place the script before the closing </body> tag on your website.

<!-- Frill (https://frill.co) -->
<script>
  (function(t,r){function s(){var a=r.getElementsByTagName("script")[0],e=r.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://widget.frill.co/v2/container.js",a.parentNode.insertBefore(e,a)}if(!t.Frill){var f=0,i={};t.Frill=function(e,o){var n,l=f++,c=new Promise(function(v,d){i[l]={params:[e,o],resolve(p){n=p,v(p)},reject:d}});return c.destroy=function(){delete i[l],n&&n.destroy()},c},t.Frill.q=i}r.readyState==="complete"||r.readyState==="interactive"?s():r.addEventListener("DOMContentLoaded",s)})(window,document);
  window.Frill('container', {
    key: 'YOUR_SCRIPT_KEY',
    // Extra configuration here... e.g. user identification/sso/callback
  });
</script>
<!-- End Frill -->

The Frill Script will automatically load all Widgets and Surveys.

React & Frontend Frameworks

If you're using a bundler (React, Next.js, Vue, Angular, etc.), install the @frillco/script package. It's a type-safe wrapper that loads the Frill Script for you — no <script> tag to add — with dedicated components and hooks for React & Next.js.

npm install @frillco/script

React & Next.js get first-class helpers. Render <FrillScript /> once (e.g. in your root layout) to load your container before hydration:

import { FrillScript } from '@frillco/script/react';

// app/layout.tsx — loads your container
<FrillScript container={{ key: 'YOUR_SCRIPT_KEY' }} />;

Then control Widgets with hooks like useWidget:

import { useWidget } from '@frillco/script/react';

function FeedbackButton() {
  // `null` until ready, then re-renders with the instance
  const widget = useWidget({ key: 'YOUR_WIDGET_KEY' });
  return <button onClick={() => widget?.open()}>Feedback</button>;
}

For other frameworks (or imperative use in event handlers), call frill directly. It loads the Frill Script on first use, so calling it up front loads Frill eagerly:

import { frill } from '@frillco/script';

await frill('container', {
  key: 'YOUR_SCRIPT_KEY',
  // Optionally identify the current user
  user: { name: 'Ada Lovelace', email: '[e-mail]' },
});

Prefer a plain script tag? You don't need the package — load the script above like you would any other and Frill will automatically create and remove Widgets & Surveys.

If you are conditionally loading the Frill Script, or a single Widget/Survey, then you should make sure you are correctly cleaning up any Frill instance(s). For more information, please see our manual loading guide for Widgets which covers this topic in more depth.

Check out our Widget examples repo for more complete React & Next.js examples.