Google Tag Manager

1. In your container, add a tag of type Custom HTML:

   <script>
     window.wirefaceChatSettings = { bot: 'pk_your_bot_id' };
   </script>
   <script src="https://chat.example.com/widget.js" async></script>

2. Set its trigger to All Pages (or the pages that should have the chat), then publish the container.

Settings go in window.wirefaceChatSettings rather than data-* attributes, so they don't depend on how Tag Manager writes the tag. Any boot option works there.

Chat events in the data layer

The chat fires its events on window as wirefacechat:<event>. A second Custom HTML tag (also on All Pages) can forward the ones you want:

<script>
  ['open', 'message', 'lead', 'handoff', 'csat'].forEach(function (name) {
    window.addEventListener('wirefacechat:' + name, function (e) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'wireface_' + name,
        wirefaceBot: e.detail.bot,
        wirefaceRole: e.detail.role, // message events only
      });
    });
  });
</script>

Then build triggers on the custom events (wireface_lead, ...) as usual. Don't push message text into analytics: it is what visitors typed, and may hold personal details.

Notes

• Add your site to the bot's allowed origins.
• Tag Manager adds the tag after the page has loaded, so the launcher appears a moment later than with a tag in your HTML.
• If your site sends a Content-Security-Policy, Tag Manager and the chat both need to be in it: see Content-Security-Policy.