> For the complete documentation index, see [llms.txt](https://developers.frill.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.frill.co/frill-script/quick-start.md).

# 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](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're using a bundler (**React**, **Next.js**, **Vue**, **Angular**, etc.), install the [`@frillco/script`](https://www.npmjs.com/package/@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.

```bash
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:

```tsx
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`:

```tsx
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:

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

await frill('container', {
  key: 'YOUR_SCRIPT_KEY',
  // Optionally identify the current user
  user: { name: 'Ada Lovelace', email: 'ada@example.com' },
});
```

Prefer a plain script tag? You don't need the package — load the [script above](#getting-started) 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](https://github.com/Frill-co/frill-widget-examples) for more complete React & Next.js examples.