Install the Widget Using Google Tag Manager

Why Use GTM?

Google Tag Manager provides advanced deployment control without modifying your website's codebase:

• URL targeting: Display the widget only on specific pages or sections
• Device filtering: Deploy different widgets for desktop vs mobile
• Language routing: Show language-specific widgets based on URL structure
• A/B testing: Activate different widget configurations for user segments

Prerequisites

ViaSay prerequisites

• Make sure you have created a ViaSay Widget

👍

Deploy Invisible, Launch When Ready

Set Audience Distribution to 0% during setup. The widget code deploys to production but remains hidden. When ready to launch, adjust the percentage in Integration to control visibility—no code changes required.

Technical prerequisites

• Google Tag Manager installed on your website
• GTM container access with edit permissions
• Basic understanding of GTM concepts (tags, triggers, variables)

Installation Steps

Step 1: Create a Trigger

Triggers define when and where your widget loads.

1. Navigate to Triggers in the left sidebar
2. Click New
3. Click the trigger configuration area
4. Select Page View as the trigger type
5. Configure the trigger scope:

Deploy on all pages:

• Select All Page Views

Deploy on specific URLs:

• Select Some Page Views
• Add condition: Page URL contains /your-path/

Example: Display widget only on FAQ pages:

'Display widget only on FAQ pages:'
Page URL contains /faq

'Display widget only on FR pages:'
Page URL contains /fr

6. Name your trigger clearly (e.g., "Widget - All Pages", "Widget - FAQ Only", "Widget - Desktop FR")
7. Click Save

Step 2: Create a Tag

Tags contain the actual widget code.

1. Navigate to Tags in the left sidebar
2. Click New
3. Click the tag configuration area
4. Select Custom HTML as the tag type
5. Paste your ViaSay widget code (from Build > Integrate > Channels > Integration tab)
6. Scroll to Triggering section
7. Click to add a trigger
8. Select the trigger(s) created in Step 1
9. Name your tag (e.g., "ViaSay Widget", "ViaSay Widget - Desktop")
10. Click Save

Step 3: Test and Publish

1. Click Preview in the top-right corner
2. Enter your website URL to launch debug mode
3. Verify the widget loads on intended pages
4. Check the Tags Fired section confirms your tag executed
5. Click Submit to publish changes
6. Add a version name and description
7. Click Publish

Advanced Configurations

Target Specific Device Types

Create a custom JavaScript variable to detect device type:

1. Navigate to Variables in the left sidebar
2. Click New under User-Defined Variables
3. Select Custom JavaScript as variable type
4. Add this function:

function() {
  return window.innerWidth <= 768 ? 'mobile' : 'desktop';
}

 

5. Name it deviceType
6. Create separate triggers for mobile and desktop:
   • Trigger: deviceType equals mobile
   • Trigger: deviceType equals desktop

Deploy Multiple Widgets

Deploy different widget configurations by URL or context:

Create separate tags with different widget tokens for each trigger.

Pass Custom Variables to Widget

Enrich conversations with user context using user channel variables. See User Channel Variables documentation →

Troubleshooting

⚠️ Ad blocker impact: GTM is frequently blocked due to Google Analytics associations. If maximum widget visibility is critical, use direct HTML installation instead.

GTM vs Direct HTML Installation

GTM Documentation

• GTM Trigger Types Reference
• GTM Variable Types Reference
• GTM Built-in Variables

Next Steps

• Configure widget appearance in Format & Design
• Set up context-specific greetings in Greetings
• Pass user data with custom variables
• Monitor performance by URL segment in Monitor