Frill
The Frill Script

Installing the Frill Script

Install the Frill Script from Settings > Frill Script. Use the script tag on a standard website, or install the @frillco/script package for React, Next.js, and other JavaScript frameworks.

Open Frill Script settings

  1. In your Frill dashboard, go to Settings > Frill Script.

  2. Choose an install tab: Script tag, React / Next.js, or GTM.

Install with the script tag

Use this path for plain HTML sites or any setup where you paste a snippet into your page.

  1. On the Script tag tab, copy your unique snippet. It includes your container key and looks like this:

<!-- 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 o=0,i={};t.Frill=function(e,p){var n,l=o++,c=new Promise(function(v,d){i[l]={params:[e,p],resolve:function(f){n=f,v(f)},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_CONTAINER_KEY_HERE' })
</script>
<!-- End Frill -->

  1. Click Copy code.

  2. Paste the script in your HTML just before the closing </body> tag, then deploy your site.

Install with React or Next.js

@frillco/script is a type-safe SDK for embedding Frill Widgets, Surveys, and Boosted Announcements. It is a type-safe wrapper that loads the Frill Script for you.

  1. On the React / Next.js tab, install the package:

npm install @frillco/script

  1. Mount the Frill Script component once, for example in your root layout:

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

// Render once, e.g. in your root layout
<FrillScript
  container={{
    key: 'YOUR_CONTAINER_KEY',
    // Identify your users (optional)
    // user: { email: '[email protected]', name: 'Mitch' }
  }}
/>

  1. Click Copy code in the dashboard if you want the snippet prefilled with your container key, then deploy your app.

For Next.js App Router setup, hooks, and programmatic control, see Framework integration (React, Vue, Angular, Next.js). Full package documentation is on developers.frill.co.

Install with Google Tag Manager

If you manage tags in GTM, follow Installing the Frill Script with Google Tag Manager instead of pasting the script into your HTML.

Verify installation

After you deploy your changes:

  1. Return to Settings > Frill Script.

  2. Click Check status.

  3. When the script is detected, the page shows that the Frill Script is installed.

If the status check fails, confirm the code matches what you copied and that your site changes are live. Ad blockers can interfere—try an incognito window. For more fixes, see Troubleshooting the Frill Script.

Next steps

Was this helpful?
Was this helpful?