Installing the widget with Google Tag Manager

You can load the Fernand support widget using Google Tag Manager instead of adding the script directly to your codebase. This is useful if you already manage scripts through GTM or want to avoid touching production code.

How is the widget loaded?

Fernand does not use installation keys or per-site tokens.

The support widget is initialized using a static JavaScript snippet and an appId matching your organization. Fernand handles the rest automatically once the widget is loaded.

You only need to add the provided script. There is no setup step inside the Fernand app.

Add the widget to Google Tag Manager

You will create a Custom HTML tag that loads the Fernand widget on your site.

Create a custom HTML tag

1. Open your Google Tag Manager workspace.

2. Go to Tags and click New.

3. Click Tag configuration and select Custom HTML.

4. Paste the Fernand support widget script, making sure to replace YOUR-APP-ID with the App ID you found in your support widget embed script settings.

   <script>
   (function (w){
       if (typeof w.Fernand !== "function") {
           var f = function () {
               f.qarguments[0] == 'set' ? 'unshift' : 'push';
           };
       f.q = []; w.Fernand = f;
       }
   })(window);
   Fernand('init', { appId: 'YOUR-APP-ID' })
   </script>
   <script async src="https://messenger.getfernand.com/client.js"></script>

Configure the trigger

Set the tag to fire on All Pages so the widget is available everywhere.

If you only want the widget on specific pages, you can restrict the trigger to those paths.

Publish the container

Once the tag and trigger are configured, click Submit in Google Tag Manager to publish your changes.

The widget will start loading as soon as the updated container is live.

Verify the installation

Open your site in a browser and look for the Fernand widget.

If it does not appear:

• Use Tag Manager Preview mode to confirm the tag is firing.

• Check the browser console for JavaScript errors.

• Disable ad blockers that might block third-party scripts.

Next steps

After installation, you can optionally identify users or pass context using Fernand('set', ...). This can be done in the same tag or in a separate tag that runs after initialization.

Authenticate and identify visitors

By default, visitors are anonymous. If your users are logged in, you can identify them and optionally authenticate them so conversations are tied to a real account.

This is done by calling Fernand('set', ...) after the widget is initialized.

Identify a logged-in user

To attach basic identity to a visitor, set their email and name.

Fernand('set', 'user', { email: 'user@company.com', name: 'Jane Doe' }); 

Authenticate users with a hash

To prevent users from impersonating others, you will need to authenticate them using a server-generated hash.

The hash must be generated on your backend using the user’s email and your Fernand signing secret, then passed to the widget.

Fernand('set', 'user', {
    email: 'user@company.com',
    name: 'Jane Doe',
    hash: 'generated_server_side_hash'
}); 

Where to place the authentication call

When using Google Tag Manager, the safest setup is:

• One tag to load and initialize the widget.

• A second tag to identify and authenticate the user.

The authentication tag should fire after the widget is loaded and only when the user is logged in.