The Frill Script

Script configuration options

The Frill Script accepts options to control loading behaviour, privacy settings, language, and callbacks. These options give you fine-grained control over how Frill embeds appear and behave on your site.

Basic configuration

The minimal configuration requires only a key:

window.Frill('container', { key: 'YOUR_CONTAINER_KEY' });

For widget configuration and programmatic control, see Controlling widgets programmatically.

All other options are optional and extend this base configuration.

Auto-loading control

autoLoad — Controls whether widgets and surveys load automatically. Accepts:

  • true (default) — Auto-load all widgets and surveys based on targeting

  • false — Disable auto-loading; you must manually trigger widgets/surveys via API

  • 'widgets' — Auto-load only widgets, not surveys

  • 'surveys' — Auto-load only surveys, not widgets

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  autoLoad: false  // Manual control
});

Use autoLoad: false when you want to show widgets or surveys programmatically (e.g., after a specific user action).

Privacy and analytics

disableAnalytics — Set to true to prevent Frill from tracking widget views, survey impressions, and interactions. Useful for GDPR compliance or internal testing.

disableCookies — Set to true to prevent Frill from setting cookies. This disables features like "show survey once per 30 days" that rely on cookies.

disableWarnings — Set to true to suppress console warnings (not recommended during development).

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  disableAnalytics: true,
  disableCookies: true
});

Language

language — Sets the language for Frill UI elements (buttons, labels, placeholders). Accepts ISO 639-1 language codes like 'en', 'es', 'fr', 'de'.

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  language: 'es'
});

If not specified, Frill detects the user's browser language.

Callbacks

The script supports lifecycle callbacks to run custom code when widgets or surveys load, render, or close.

onCreate — Called when a widget or survey is created (DOM elements added).

onDestroy — Called when a widget or survey is removed.

onReady — Called when the Frill Script finishes initialization.

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  callbacks: {
    onCreate: (instance) => {
      console.log('Widget created:', instance);
    },
    onDestroy: (instance) => {
      console.log('Widget destroyed:', instance);
    },
    onReady: () => {
      console.log('Frill Script ready');
    }
  }
});

Preview mode

previewMode — Set to true to load widgets and surveys regardless of targeting rules. Useful for testing configurations before publishing.

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  previewMode: true
});

Never enable previewMode in production—it bypasses all targeting and shows everything to all users.

Example: Full configuration

window.Frill('container', {
  key: 'YOUR_CONTAINER_KEY',
  user: {
    email: '[email protected]',
    name: 'Jane Doe'
  },
  autoLoad: 'widgets',
  language: 'en',
  disableAnalytics: false,
  disableCookies: false,
  disableWarnings: false,
  callbacks: {
    onReady: () => console.log('Frill ready')
  }
});

Was this helpful?