How to Integrate Brainfish Widgets with Google Tag Manager: A Step-by-Step Guide

You can embed the Brainfish widget on your site using Google Tag Manager (GTM). Below are the steps for setting it up. Make sure to replace the placeholder widget key with your own.

---

1. Log in to Google Tag Manager

Go to the Google Tag Manager website and sign in with your Google account.

---

2. Create a New Tag

• Select the container for the site you want to update.
• In the left sidebar, click Tags.
• Click the New button to create a new tag.

---

3. Configure the Tag

• Click on Tag Configuration.
• Choose Custom HTML as the tag type.

---

4. Add the Brainfish Widget Code

Paste the following code into the HTML field:

<script>
  var s = document.createElement('script');
  s.type = 'module';
  s.src = 'https://cdn.jsdelivr.net/npm/@brainfish-ai/web-widget@latest/dist/web.js';
  s.onload = () => {
    Brainfish.Widgets.init({
      widgetKey: '<YOUR_KEY>'
    });
  };
  document.head.appendChild(s);
</script>

• Replace <YOUR_KEY> with your actual widget key.
• For the SlideOver widget, change the widgetKey to your SlideOver widget’s key (e.g. <YOUR_KEY>).

---

5. Save and Publish

• Click Save to store your tag.
• Click Submit to publish your changes in GTM.

---

6. Test Your Implementation

• Use GTM’s Preview mode to verify that the widget loads correctly.
• Ensure the Brainfish widget appears and functions as expected on your site.

---

⚠️ Limitations of Using GTM with type="module"

• Direct imports don’t work: GTM’s Custom HTML tags do not reliably support <script type="module"> blocks with import statements. If you paste code like:

  <script type="module">
    import Brainfish from "https://cdn.jsdelivr.net/...";
    Brainfish.Widgets.init(...);
  </script>
  

  it will likely fail to run inside GTM.

• Why we use a workaround: The snippet above works by dynamically injecting a <script type="module"> tag into the page. This ensures the browser executes it as a proper module, while still being deployed through GTM.

• External dependencies: Module loading requires a valid CORS setup and browser support (modern browsers only). If you need maximum compatibility or can’t use modules, consider bundling the Brainfish widget into a classic JS build and loading that instead.

---

Documentation Links

• Google Tag Manager Help Center