Add AI Chat using Google Tag Manager

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

1. Go to the Inkeep Dashboard
2. Select your project under Projects
3. Go to the Integrations tab
4. Click on Create integration
5. Select Web
6. Provide a Name and URL (optional) for the integration
7. Click on Create
8. Click the Example < /> button to get your API key and view suggested settings

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://unpkg.com/@inkeep/uikit-js@0.3.19/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().embed({
            componentType: "ChatButton",
            properties: {
                baseSettings: {
                    apiKey: "",
                    integrationId: "",
                    organizationId: "",
                    primaryBrandColor: ""
                },
                aiChatSettings: {
                    chatSubjectName: "",
                    botAvatarSrcUrl: "",
                    getHelpCallToActions: [],
                    quickQuestions: []
                }
            }
        });
    };
})();
</script>

5. Update this script with your API key and desired settings.
6. For Triggering, choose All Pages.
7. 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

• Search Bar
• Embedded Chat
• Custom Trigger