Google Tag Manager

Add the chat widget through Google Tag Manager without changing your site's code.

Use Tag Manager when you can’t edit your site’s code. You get the full widget for visitors. Verified identity needs a server route, so it isn’t available through Tag Manager alone.

Add the tag

  1. In Tag Manager, go to Tags → New → Tag configuration → Custom HTML.
  2. Paste this, with your publishable key (pk_...) from Settings → Widgets:
html
<script>
  window.Ticketping = window.Ticketping || function () {
    (window.Ticketping.q = window.Ticketping.q || []).push(Array.prototype.slice.call(arguments))
  }
  Ticketping('init', { publishableKey: 'pk_...' })
</script>
<script src="https://widget.ticketping.com/v2/loader.js" async></script>
  1. Under Triggering, choose Initialization - All Pages.
  2. Save, then Preview your site to check the launcher appears, and Submit to publish.

The tag calls init itself rather than using data-key, because some Tag Manager setups drop custom attributes. The stub is written without arrow functions so it works in every Tag Manager workspace.

Pass user details

If your pages push the signed-in user to the data layer, you can show their name and email to your team. Create Data Layer Variables for them (for example user.email and user.name) and add this to the tag after init:

html
<script>
  if ({{DL - user email}}) {
    Ticketping('identify', { email: {{DL - user email}}, name: {{DL - user name}} })
  }
</script>

Without getToken, the identity is unverified: your team sees the details with an Unverified badge, and the visitor sees only conversations from this browser. If the widget’s Require verified identity setting is on, unverified calls are refused.

Anyone can type any email into an unverified identify call, so don’t rely on it for anything sensitive. For verified identity and history across devices, add a token route and install with the script tag or your framework.

Content Security Policy

If your site sends a CSP header, allow the widget’s hosts. See Security and CSP.

Check that it works

  1. In Tag Manager Preview, confirm the Ticketping tag fired.
  2. Open your site on its real domain, click the launcher and send a message.
  3. In Settings → Widgets, open the widget’s Install tab. It shows that the widget was detected and where. While domains are unlocked, the domain is recorded; lock domains once you’ve checked the list.

Copy prompt for your AI coding agent

prompt
Help me add the Ticketping chat widget (v2) with Google Tag Manager.

Docs index: https://ticketping.com/llms.txt
This page as Markdown: https://ticketping.com/docs/google-tag-manager.md

1. Give me a Custom HTML tag containing the ES5 queue stub
   window.Ticketping = window.Ticketping || function () { (window.Ticketping.q = window.Ticketping.q || []).push(Array.prototype.slice.call(arguments)) },
   then Ticketping('init', { publishableKey: 'pk_...' }), then
   <script src="https://widget.ticketping.com/v2/loader.js" async></script>.
   Ask me for the publishable key (starts with pk_). It's public.
2. Trigger: Initialization - All Pages.
3. If this site pushes the signed-in user to the dataLayer, add Data Layer Variables for email and name and call
   Ticketping('identify', { email, name }) only when they're set. Explain that this is unverified identity.
4. If the site has a Content-Security-Policy, list the directives to add from https://ticketping.com/docs/security.md.