Google Tag Manager

Overview

This guide will walk you through integrating Capacity's chat interface into your website using Google Tag Manager (GTM). Once implemented, visitors to your website will have instant access to your organization's knowledge base through an intelligent chat widget.

Prerequisites

Before you begin, ensure you have:

• Active Google Tag Manager Account - With access to your website's GTM container
• Capacity Concierge Token - Located in the Capacity settings - concierge - at the top right corner
• Website Administrator Access - To publish GTM changes
• Testing Environment (recommended) - To validate the integration before going live

Step-by-Step Integration Process

Step 1: Access Your GTM Container

1. Log into your Google Tag Manager account
2. Select the GTM container associated with your website
3. Ensure you're working in the correct workspace

Step 2: Create a New Tag

1. Click "Tags" in the left navigation menu View full size
2. Click the "New" button to create a new tag View full size
3. Click on the tag configuration area to open tag type selection View full size

Step 3: Configure Tag Settings

1. Choose Tag Type:
   • Select "Custom HTML" from the tag type options View full size
2. Name Your Tag:
   • Enter a descriptive name like "Capacity Chat Widget" or "AI Knowledge Assistant"
   • This helps with organization and future maintenance
3. Add the Capacity Code:
   • In the HTML field, paste the following code exactly as shown:
     <script type="text/javascript">!function(){
         var si = document.createElement("script");
         si.type = "text/javascript";
         si.async = true;
         si.src = "https://cdn.aisoftware.com/concierge/index.js";
         si.id = "ais-concierge-script";
         si.setAttribute("concierge-token", "***INSERT-YOUR-TOKEN-HERE***");
         document.body.appendChild(si);
     }();</script> 
     
     View full size
4.  Insert Your Token:
   • Replace ***INSERT-YOUR-TOKEN-HERE*** with your actual Capacity concierge token and ensure there are no extra spaces or characters around your token

Step 4: Set Up Triggers

1. Click on the Triggers to configure when the tag fires View full size
2. Click on "New" View full size
3. Click on Trigger Configuration View full size
4. Choose Your Trigger Strategy:
   • Choose Your Trigger Strategy: Option A: DOM Ready(Recommended)
     • "DOM Ready" as a trigger, the tag will fire once the DOM is fully built 
     • This provides the most comprehensive user experience View full size
   • Option B: Specific Pages
     • Create a custom trigger if you only want the widget on certain pages
     • Configure page URL conditions as needed
     • Example: Only on support or contact pages
5. Click "Save" View full size
6. Add the Trigger to your Tag View full size
7. Save Trigger Configuration View full size

Step 5: Test Your Implementation

1. Enable Preview Mode:
   • Click "Preview" in the top right corner of GTM
   • This allows you to test without publishing changes live View full size
2. Visit Your Website:
   • Navigate to your website in a new tab
   • GTM Preview mode should be active (you'll see a debug panel) View full size
3. Verify Tag Firing:
   • Check that your Capacity tag appears in the "Tags Fired" section
   • Look for your tag name in the GTM debug panel
4. Test Chat Widget:
   • Confirm the chat widget appears on your website
   • Test a sample question to ensure it's responding correctly
   • Check widget appearance on different devices/screen sizes

Step 6: Publish Your Changes

1. Return to GTM Interface:
   • Exit preview mode once testing is complete
2. Submit Changes:
   • Click "Submit" in the top right corner
   • Add a descriptive version name (e.g., "Added Capacity Chat Widget")
   • Include notes about what was changed View full size
3. Publish:
   • Click "Publish" to make your changes live
   • Your Capacity chat interface is now active on your website View full size

Congratulations! Your website now features Capacity's AI-powered chat interface. Visitors can instantly access your organization's knowledge base, improving user experience and reducing support inquiries.