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 are using a JavaScript framework, e.g., React (including Next.js), Vue, or Angular, you don't need to do anything special. Load the script tag like you would any other. Frill will automatically create and remove Widgets & Surveys. If you need more fine-tuned control, like conditional loading or custom Widget controls, check out our examples for best practices.

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.