Google Tag Manager (GTM) is a tool that lets you add and manage code snippets on your website without editing the site's code directly. If your website already uses GTM, this is the recommended way to install the Superchat web widget.
Below you will find step-by-step instructions on how to integrate your Superchat Web Widget into your Google Tag Manager.
Step 1: Create your Web Widget script
Click here and select New Web Widget.
Step 2: Copy the applicationKey from your Web Widget script
When your widget is created, Superchat will display a script unique to your account. It will look something like this:
<script src='https://widget.superchat.de/snippet.js?applicationKey=AAAAAAAAAAAAAAAAAAA' referrerpolicy='no-referrer-when-downgrade'></script>
The script shown above is just an example — yours will have a different application key. You do not need to use this script directly. Instead, find the string of characters that appears after applicationKey= in your own script and copy that. This is your unique application key, and you will paste it into the GTM script in Step 4.
Step 3: Create a new tag in Google Tag Manager
Open Google Tag Manager and select your container
In the left-hand menu, click Tags, then click New
Give your tag a name, such as "Superchat Web Widget"
Click the Tag Configuration area and select Custom HTML as the tag type
Step 4: Add the Superchat script
Paste the following script into the HTML field, replacing XXXXXXXXXXXXXXXXX with your application key from Step 2:
<script>(function() {var script = document.createElement("script");script.type = "text/javascript";script.src = "https://widget.superchat.de/snippet.js?applicationKey=XXXXXXXXXXXXXXXXX";script.setAttribute("referrerpolicy","no-referrer-when-downgrade");document.body.appendChild(script);})();</script>
Step 5: Set a trigger
A trigger tells GTM when to fire your tag — in other words, on which pages the widget should load. Click the Triggering section and select All Pages. This ensures the widget appears across your entire website.
If you only want the widget to appear on certain pages, you can create a custom trigger instead — for example, to show it only on your contact or pricing page.
Once it is configured as you wish, you can press Save.
Step 6: Preview and verify
Before publishing, it is worth checking that the widget loads correctly. Click Preview in the top right corner of GTM.
Then simply paste in the URL you are adding the Web Widget to. This opens a debug session in your browser where you can visit your website and confirm the Superchat widget appears as expected. You will also see in the GTM debug panel whether the tag fired successfully.
Step 7: Publish your changes
Once you are happy the widget is loading correctly, go back to GTM and click Submit in the top right corner.
Add a version name if prompted (for example, "Add Superchat widget"), then click Publish. Your widget will now be live on your website.
Troubleshooting
Troubleshooting
The widget is not appearing on my website
Check that you have published your GTM container after saving the tag — changes in GTM do not go live until you click Submit and Publish. Also confirm that the trigger is set to All Pages and that the application key in the script matches the one in your Superchat widget settings.
The tag is not firing in GTM Preview mode
Make sure the trigger is configured correctly and that you are visiting a page that matches the trigger conditions. If you are using a custom trigger, double-check the rules are set up as intended.
I am not sure if I copied the right application key
Go back to Settings → Web Widget in Superchat, open the widget you created, and copy the full script again. The application key is everything after applicationKey= and before the closing quote mark.