Install the widget on your website

Open “Widget integration” in the sidebar, create a public key, and copy the installation code. Add one tag to your website's shared template:

<script async
  src="https://app.flowtomate.ru/widget/v1/widget.js"
  data-flowtomate-key="pub_live_REPLACE_WITH_YOUR_KEY"
  data-flowtomate-api="https://api.flowtomate.ru"></script>

Replace the example key with your project's key. It is public and can be included in HTML. Do not add your dashboard password or token. Each page should have one widget tag. If your website changes pages without reloading, do not insert the script again on every navigation.

Load order

A tag with async loads independently of your website's code. Access window.FlowtomateWidget after the script's load event, then wait for await window.FlowtomateWidget.ready(). In GTM, use a Custom HTML tag with an All Pages trigger and the same code. Check that another tag or template is not inserting a duplicate.

In React and Next.js, add the script once in the browser. For Next.js, use a client component:

'use client';

import { useEffect } from 'react';

export function FlowtomateScript() {
  useEffect(() => {
    if (document.querySelector('script[data-flowtomate-key]')) return;
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://app.flowtomate.ru/widget/v1/widget.js';
    script.dataset.flowtomateKey = 'pub_live_REPLACE_WITH_YOUR_KEY';
    script.dataset.flowtomateApi = 'https://api.flowtomate.ru';
    document.body.append(script);
  }, []);
  return null;
}

Include the component once in the shared layout. Make API calls after the script loads.

For a plain HTML page, you can preserve the order of two scripts with defer:

<script defer src="https://app.flowtomate.ru/widget/v1/widget.js"
  data-flowtomate-key="pub_live_REPLACE_WITH_YOUR_KEY"
  data-flowtomate-api="https://api.flowtomate.ru"></script>
<script defer src="/flowtomate-integration.js"></script>

Your developer creates the second file. The browser runs it after the widget script. Before calling methods that need loaded content, run await window.FlowtomateWidget.ready(). See the main guide for a complete example of sending IDs, email addresses, and events. An early call queue is available for commands issued before loading.

Custom button

In “Widget settings” → “Widget layout”, select “Custom button”. Add an attribute to a button or menu item on your website:

<button type="button" data-flowtomate-open>What's new</button>

The widget also finds elements added after the page loads. If it is disabled or there is nothing to show the visitor, the panel will not open.

If your website uses CSP

Add the widget's sources to your website's existing Content Security Policy. The current version creates styles in the document, so it requires 'unsafe-inline' in style-src:

script-src 'self' https://app.flowtomate.ru;
connect-src 'self' https://api.flowtomate.ru;
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
media-src 'self' https:;

The image and media sources are needed for the content you publish. If your policy lists specific domains, add the domains hosting that content instead of the general https: source.

Verification

Open your website and DevTools → Network. Make sure widget.js loaded, the settings request is not blocked by CSP or CORS, and window.FlowtomateWidget is available. Run await window.FlowtomateWidget.ready(). Then return to “Widget integration”: the website address and time of the last request should appear there. ready() alone does not prove that content and visitor data loaded; check the result you need separately. If something did not work, open troubleshooting.