Google Tag Manager Installation

Install the nuhello chatbot using Google Tag Manager (GTM).

Prerequisites

• A Google Tag Manager account
• GTM container installed on your website
• Your nuhello Pixel Key and Bot ID

Step 1: Open Google Tag Manager

1. Go to tagmanager.google.com (opens in a new tab)
2. Select your account and container

Step 2: Create a New Tag

1. Click Tags in the left sidebar
2. Click New
3. Name your tag: nuhello Chatbot

Step 3: Configure the Tag

Tag Configuration

1. Click Tag Configuration
2. Select Custom HTML
3. Paste the following code:

<script>
  window.nuhelloSettings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID"
  };
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

4. Check Support document.write (optional, usually not needed)

Triggering

1. Click Triggering
2. Select All Pages (or create a custom trigger)
3. Click Save

Step 4: Submit and Publish

1. Click Submit in the top right
2. Add a version name (e.g., "Added nuhello chatbot")
3. Click Publish

Advanced: Using GTM Variables

For dynamic configuration, use GTM variables:

Step 1: Create Variables

1. Go to Variables
2. Under User-Defined Variables, click New

Create two variables:

nuhello Pixel Key:

• Variable Type: Constant
• Value: YOUR_PIXEL_KEY

nuhello Bot ID:

• Variable Type: Constant
• Value: YOUR_BOT_ID

Step 2: Update the Tag

<script>
  window.nuhelloSettings = {
    key: "{{nuhello Pixel Key}}",
    botId: "{{nuhello Bot ID}}"
  };
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Passing User Data with Data Layer

Step 1: Push User Data to Data Layer

On your website, push user data to the data layer:

dataLayer.push({
  'event': 'userDataReady',
  'userId': 'user123',
  'userName': 'John Doe',
  'userEmail': 'john@example.com'
});

Step 2: Create Data Layer Variables

In GTM, create variables for each:

• User ID Variable (Data Layer Variable): userId
• User Name Variable (Data Layer Variable): userName
• User Email Variable (Data Layer Variable): userEmail

Step 3: Update the Tag

<script>
  window.nuhelloSettings = {
    key: "{{nuhello Pixel Key}}",
    botId: "{{nuhello Bot ID}}",
    userId: "{{User ID Variable}}",
    name: "{{User Name Variable}}",
    email: "{{User Email Variable}}"
  };
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.nuhello.com/widget.js';
    s.async = true;
    document.head.appendChild(s);
  })();
</script>

Step 4: Create Custom Trigger

1. Go to Triggers
2. Click New
3. Select Custom Event
4. Event name: userDataReady
5. Save

Update the nuhello tag to use this trigger instead of (or in addition to) All Pages.

Show on Specific Pages

Create a custom trigger to show the widget on specific pages:

Step 1: Create Trigger

1. Go to Triggers → New
2. Select Page View
3. Configure:
   • Trigger fires on: Some Page Views
   • Page Path contains /contact
   • OR Page Path contains /support

Step 2: Apply to Tag

Replace the "All Pages" trigger with your custom trigger.

Hide on Specific Pages

To hide the widget on certain pages (e.g., checkout):

Method 1: Exception Trigger

1. Create a trigger for pages where you DON'T want the widget
2. In your tag, add it as an Exception

Method 2: Blocking Trigger

1. Go to Triggers → New
2. Select Page View
3. Configure:
   • Trigger fires on: Some Page Views
   • Page Path does not contain /checkout

Tag Sequencing

Load nuhello after other critical tags:

1. Open your nuhello tag
2. Click Advanced Settings
3. Under Tag Sequencing, check Fire a tag before...
4. Select any tags that must load first

Debugging

Preview Mode

1. Click Preview in GTM
2. Visit your website
3. The GTM debugger will show if the tag fired

Check Variables

In Preview mode, click on tags to see variable values.

Console Check

Open browser console and run:

console.log(window.nuhelloSettings);
console.log(typeof window.openNuhelloWidget);

Troubleshooting

Tag not firing?

1. Check if the trigger conditions are met
2. Verify no blocking triggers are active
3. Make sure the container is published

Widget not appearing?

1. Confirm the tag fired in Preview mode
2. Check for JavaScript errors in console
3. Verify pixel key and bot ID are correct

Data Layer variables empty?

1. Ensure data is pushed to dataLayer before GTM loads
2. Check the variable names match exactly
3. Use Preview mode to inspect data layer values