# 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](https://app.frill.co/settings/company/frill-script) and place the script before the closing `</body>` tag on your website.

```html
<!-- 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](https://developers.frill.co/frill-script/widgets/manual-loading) which covers this topic in more depth.

Check out our [Widget examples repo](https://github.com/Frill-co/frill-widget-examples) for more complete React & Next.js examples.