Overview

This document provides step-by-step instructions for integrating Google Tag Manager (GTM) into your website and using it to deploy a Userback feedback widget via a Custom HTML tag.

Prerequisites

Before you begin, make sure you have the following:

• Userback Workspace: A workspace is needed to collect and manage feedback.
• Access Token: Retrieve your token via the Code Icon in your workspace.
• Google Tag Manager: GTM must already be installed on your website. For installation instructions, see the Google Tag Manager documentation.

Installation

Installing Userback Without User Data

1. In GTM, go to Tags > New.
2. Choose Tag Configuration > Custom HTML.
3. Paste the following code:

<script>
  window.Userback = window.Userback || {};
  Userback.access_token = '**Userback Access Token**';

  (function(d) {
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://static.userback.io/widget/v1.js';
    (d.head || d.body).appendChild(s);
  })(document);
</script>

4. Click Triggering and select All Pages (or set a specific condition).
5. Save and name your tag.

For dynamic user

Create GTM Variables

• Create a GTM Variable for the access_token (e.g., Userback Access Token).
• Create another GTM Variable for user_data (e.g., Userback User Data).

There could be:

• Javascript Variables (e.g., window.userbackAccessToken, window.userbackUserData)
• or Data Layer Variables if you prefer to push them dynamically.

On your Website

Somewhere early (like before GTM loads), set values to window or dataLayer. Example:

<script>
  window.userbackAccessToken = 'A-xxx...'; // dynamically set server-side if needed
  window.userbackUserData = {
    id: "123456",
    info: {
      name: "someone",
      email: "[email protected]"
    }
  };
</script>

or using dataLayer.push() for more advanced setups.

In your GTM tag

Inside your Custom HTML tag, you reference those GTM variables:

<script>
  window.Userback = window.Userback || {};
  Userback.access_token = {{Userback Access Token}};
  Userback.user_data = {{Userback User Data}};

  (function(d) {
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://static.userback.io/widget/v1.js';
    (d.head || d.body).appendChild(s);
  })(document);
</script>

✅ Now you can control everything dynamically without changing the GTM tag every time.

Publish and Test

• Click Submit to publish your changes.
• Open your website and verify the widget appears.

🛟 Support

Need help? Here’s how to get assistance:

1. Log in to your Userback workspace.
2. Click the Help Center icon in the top-right corner.
3. Select Contact us to start a chat with our support team.