Installing the Chat Widget with Google Tag Manager

Applicable for: dashboard users with an active subscription

If the scripts on your website are managed in Google Tag Manager, you can add the NoForm AI chat bubble as a tag instead of editing your site’s HTML. The Installation page gives you a version of the installation code made for Tag Manager, and the rest of the work is one Custom HTML tag and a container publish.

You need the following:

In the NoForm AI dashboard, open the assistant you want to install. In the left sidebar, open the “Chat Widget” group and click “Installation”.

The “Installation code” card sits on the right side of the page. Two tabs in its header choose the channel: “Chat bubble” and “Embedded chat”. Keep “Chat bubble” selected, then look at the row of install methods below it, which offers “Website HTML” and “Google Tag Manager”. The card opens on “Website HTML”, so click “Google Tag Manager” and the code in the card changes to a longer version spread over several lines.

Use that version for anything you paste into Tag Manager. Tag Manager re-creates the script tag when it injects a Custom HTML tag and drops the settings attached to it, so the Website HTML code arrives on your page without its assistant ID and the chat never loads. The Google Tag Manager version applies those settings from inside the script itself, which leaves Tag Manager nothing to strip.

Your choice of method stays selected while you move between the “Chat bubble” and “Embedded chat” tabs, so you can compare the two channels and come back without losing your place. The install-method row belongs to the Chat bubble only. The “Embedded chat” tab shows a single snippet and no method row, because the embedded chat goes into the HTML of the page that hosts it.

Click “Copy code” at the bottom of the card. The button copies exactly the code shown above it, matching the channel tab and the install method you have selected, and a “Copied!” confirmation appears in the corner of the screen.

The addresses and the assistant ID inside your card belong to your own assistant, so your code will not read exactly like the example in the picture.

Paste the code straight into Tag Manager while it is on your clipboard. Do not retype it, reformat it, or edit any line inside it. The address, the assistant ID, and the server address in that code are specific to your assistant.

In Google Tag Manager, open Tags and click New. Click Tag Configuration, choose Custom HTML from the list of tag types, and paste the copied code into the HTML field. Check that what you pasted starts with <script> on its own line and runs over several lines, which tells you it is the Google Tag Manager version rather than the one-line Website HTML one.

Click Triggering and choose the All Pages trigger, the built-in page-view trigger that fires on every page of your site. That is the right default for a chat widget you want available everywhere.

The widget waits for your page to finish parsing before it sets itself up, whenever the tag fires, so the other common triggers load it correctly as well. Initialization - All Pages works if your container uses initialization tags for consent handling, and DOM Ready and Window Loaded work too. Pick All Pages unless your consent setup calls for a different one.

Give the tag a name you will recognize later, such as “NoForm chat widget”, and click Save. Then click Submit, add a version name if you want one, and publish the container. The chat bubble reaches your visitors once that version is live, and not before.

Click Preview in Google Tag Manager, enter the address of a page on your site, and connect. In the Tag Assistant window that opens, your NoForm tag should be listed under the fired tags for the page view, and the chat bubble should appear on the page in the connected tab.

After you publish the container, open your website in a private or incognito browser window and give the page about three seconds after it finishes loading. The bubble appears in the corner, and clicking it opens the chat. Test on the live site rather than in the dashboard preview, because the preview keeps working even when something on your site blocks the widget.

If the Website HTML snippet is already in your pages and you move the install into Tag Manager, remove the snippet from your HTML. Leaving both in place is safe for your visitors, since the Google Tag Manager code checks whether the widget script is already on the page and stops if it is, so one chat bubble appears rather than two. Keeping one install still saves you from editing two places every time something changes.

A tag that fires only after a visitor accepts cookies follows that rule, so visitors who decline consent see no chat bubble. Set the tag to fire independently of consent state if you want the chatbot available to every visitor.

If your site sends a Content Security Policy header, that policy applies to the widget the same way it applies to any other script your container loads. Ask whoever manages the policy to allow the NoForm AI addresses that appear in your installation code in the script-src and frame-src directives, and the NoForm AI server address in connect-src.

For a wider set of causes, including subscription state and message limits, see “Why Isn’t My Chat Widget Appearing? Troubleshooting Guide”.

Use the code shown under the “Google Tag Manager” method on the “Chat bubble” tab. The “Website HTML” code is meant for pasting directly into your page’s HTML, and it loses the settings it carries when Tag Manager re-creates the tag.

The Google Tag Manager method covers the Chat bubble. The “Embedded chat” tab offers one snippet, which goes into the HTML of the page where you want the chat to sit, because that chat renders in a spot you choose on the page rather than in a floating bubble.

All Pages suits most sites, since it fires on every page view and puts the chat bubble across your whole site. Initialization - All Pages, DOM Ready, and Window Loaded all load the widget correctly as well, so choose whichever fits your container’s consent setup.

Installing the chatbot through Google Tag Manager changes nothing about the events your chatbot sends to Google Analytics 4. A GA4 setup that runs inside Tag Manager receives them too. See “Connecting Google Analytics 4 to Your Chatbot” for the event list and the setup steps.

The widget checks the page address against your allowed domain on every load, whichever way you installed it. A container published on a domain outside that setting shows the bubble with a warning in place of the chat.

Your colors, messages, position, and assistant settings reach the widget from your dashboard each time a visitor loads a page, so a settings change takes effect on the next page load. Re-publish the container only when you change the installation code itself.