Smarter Chat for Google Tag Manager

Smarter Chat for Google Tag Manager is a tag template that puts your Smarter chatbot, a deployed LLMClient, on any site that has a Google Tag Manager web container, whatever the site is built with: a chat button in a corner of the page, or the chat in an element of the page. Marketing and analytics teams can add it, and change it, without a developer or a release of the site.

The template loads the embed script of @smarter.sh/ui-chat from jsDelivr, in GTM’s sandbox, with three narrow permissions. Its source is github.com/smarter-sh/smarter-gtm-template.

Add the Tag

  1. In the LLMClient’s manifest, allow the site’s origin in spec.config.prompt.allowedOrigins, and apply it.

  2. In the container, Templates → Tag Templates → Search Gallery, find Smarter Chat, and add it, or New → ⋮ → Import this repository’s template.tpl.

  3. Tags → New → Smarter Chat: enter the LLMClient’s url, and choose the launcher’s position, label and color. Advanced → Target element puts the chat in an element of the page, by its css selector, instead of a launcher.

  4. Trigger it on All Pages. A single-page app can add History Change: a chatbot is added once per page, however many times the tag fires.

  5. In the tag’s Advanced Settings → Consent Settings, require functionality_storage: the chat keeps its session in a cookie.

  6. Preview the container, then publish it.

The template’s permissions are: inject scripts from https://cdn.jsdelivr.net/npm/@smarter.sh/ui-chat@*; read and write SmarterChatConfig, read SmarterChat.version and execute SmarterChat.mount; and log to the console in Preview mode. It reads no cookies and sends nothing itself. The Embed script version field (Advanced) is the version that the template is tested with; set a range, such as 0.9, to follow patch releases.

An api key, which an LLMClient needs only if it has api keys, is public in the page: use a key dedicated to the site.

A Custom HTML Tag

Where a template can’t be used, e.g. to host the script yourself, a Custom HTML tag with the embed script’s tag works too, without the sandbox:

<script src="https://cdn.jsdelivr.net/npm/@smarter.sh/ui-chat@0/dist/embed.js"
  data-chatbot="https://stackademy.3141-5926-5359.api.example.com/" async></script>