IntegrationsGoogle tag manager

Add Chat Button with Google Tag Manager

Learn how to integrate Inkeep's chat button using Google Tag Manager for seamless deployment without code changes.

What is Google Tag Manager

Google Tag Manager (GTM) lets you manage and deploy custom JavaScript, without editing your website's code. This simplifies updates without needing developer involvement.

How to integrate with Inkeep

To add the Inkeep Chat Button using Google Tag Manager (GTM), we'll use a modified version of the standard JavaScript snippet. This approach includes scoping, dynamic loading, and controlled initialization for GTM compatibility.

Here's the GTM-friendly version of the Chat Button snippet after grabbing your API information:

Get an API key

Follow these steps to create an API key for your web integration.

Define the component in Google Tag Manager

  1. Navigate to your Google Tag Manager console
  2. Select your workspace and navigate to the Tags section
  3. Create a new Tag.
  4. For Tag Configuration, choose Custom HTML. And upload the following for the Chat Button:
<script>
// Scoping
(function() {
    // Dynamic loading of the Inkeep widget script
    var script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://cdn.jsdelivr.net/npm/@inkeep/cxkit-js@0.5/dist/embed.js';
    script.defer = true;
    document.head.appendChild(script);

    // Controlled initialization. Initializes the Inkeep widget once the script is loaded
    script.onload = function() {
        var inkeepWidget = Inkeep.ChatButton({
            baseSettings: {
                apiKey: "",
                primaryBrandColor: ""
            },
            aiChatSettings: {
                chatSubjectName: "",
                aiAssistantAvatar: "",
                getHelpOptions: [],
                exampleQuestions: []
            }
        });
    };
})();
</script>
  1. Update this script with your API key and desired settings.
  2. For Triggering, choose All Pages.
  3. Click save to have the Chat Button appear on your GTM synced website

Other Snippets

For the other integrations please refer to the JS Snippet examples in the UI Components Page section

On this page