Install Dialog via Google Tag Manager

This guide deploys the Dialog widget through Google Tag Manager — a no-code path you set up entirely from GTM.

Heads-up before you commit: because the widget loads via GTM after the rest of the page, visitors get a delay and a layout shift before it appears, and it won’t blend cleanly into your design system.

One thing GTM cannot do for you: refresh your cart UI after a product is added through Dialog. No GTM tag has visibility into your application state. Your frontend developer will need a small JS snippet listening to the dialog:cart:updated event on document to re-render your cart icon / mini-cart — see Add to cart issues for the exact pattern. If you don’t have a developer who can wire even that, your visitors will need to reload the page to see the cart update.

Tracking add-to-cart and checkout also needs extra tags — see the GTM tracking bridge. Use the GTM install path only if an SDK install isn’t an option for your team.

When to pick this path

GTM is the right fit when all of the following are true:

• Your store is not on Shopify (use the Shopify app instead — it covers data ingestion AND frontend in one go).
• Your store is not on Prestashop (use the Prestashop module instead).
• You don’t have frontend developers available to wire the SDK or the React / Vue components.
• You do have GTM already installed on your site (or someone who can install it).

If you have a React or Vue storefront, prefer the components. If you have any other frontend (Svelte, server-side templating, vanilla JS), prefer the SDK. GTM should be the last-resort when none of those are feasible.

Prerequisites

• A Google Tag Manager account with a container deployed on your site.
• Your Dialog API key (provided by the Dialog team after you create an API Integration organization at app.askdialog.com/sign-up).
• The product ID available in JavaScript on your product pages — typically via dataLayer.push, a global JS variable, or a DOM attribute.
• A catalog already uploaded to Dialog so the assistant has content to answer with. See Catalog integration.

Step 1: Make sure GTM is live on your site

This guide assumes GTM is already deployed. If it isn’t, install the standard GTM snippet on every page (see Google’s own setup guide). For the Dialog tag to do anything useful, it needs to fire on at least your product pages.

Step 2: Create a variable for the product ID

Dialog needs to know which product the visitor is looking at. Create a GTM variable that returns the product ID.

In GTM, go to Variables → User-Defined Variables → New:

• Name: Dialog Product ID
• Type: depends on how the product ID is exposed on your site.

Common approaches

Data Layer Variable — if your site pushes the product ID to the dataLayer on product pages:

• Type: Data Layer Variable
• Variable name: productId (or whatever key your dataLayer uses).

Custom JavaScript — if the product ID lives on a global JS variable:

function() {
  return window.myApp.currentProduct.id;
}

DOM Element — if the product ID is in a DOM attribute:

• Type: DOM Element
• Selection method: CSS Selector
• Element selector: [data-product-id]
• Attribute name: data-product-id

Note

The product ID format must match what’s configured in your Dialog organization (e.g. internal SKU, your CMS’s product ID, etc.). Whatever you used in your catalog upload is what Dialog expects here.

Step 3: Create the Dialog tag

In GTM, go to Tags → New:

• Name: Dialog - Instant Block
• Type: Custom HTML
• HTML:

<script src="https://cdn.askdialog.com/assets/dialog-instant.js?productId={{Dialog Product ID}}&apiKey=YOUR_API_KEY&target=YOUR_CSS_SELECTOR&position=afterend"></script>

Replace YOUR_API_KEY with your Dialog API key, and YOUR_CSS_SELECTOR with a CSS selector targeting where you want the Dialog block to appear on the product page.

Script parameters

Parameter	Required	Description
productId	Yes	The product ID displayed on the current page
apiKey	Yes	Your Dialog API key
target	Yes	A CSS selector targeting the element next to which Dialog is inserted
position	No	Insertion position relative to the target (default: afterend)

Possible values for position

Value	Description
beforebegin	Before the target element
afterbegin	Inside the target, before its first child
beforeend	Inside the target, after its last child
afterend	After the target element (default)

Step 4: Configure the trigger

Add a trigger to the tag so it only fires on product pages:

• Type: Page View
• Fires on: Some Page Views
• Condition: a page-path condition that matches your product URLs. Examples:
  • WooCommerce / WordPress: Page Path contains /product/
  • Magento: Page Path matches the regex ^/.+\.html$ (or scope it tighter)
  • Custom ecom: whatever pattern your product URLs use

Step 5: Test

1. In GTM, click Preview (top right).
2. Enter a product page URL from your site.
3. Verify that:
   • The Dialog - Instant Block tag fires.
   • The product questions block appears on the page.
   • Suggestions load correctly.
   • The input field lets you ask a question and opens the Dialog assistant.

Step 6: Publish

When testing passes, click Submit in GTM to publish the container.

Visual customization

The Dialog block adapts to your site via CSS variables. Override them in your site’s stylesheet to tune the look:

:root {
  --dialog-primary-color: #000000;       /* Primary color (buttons, accents) */
  --dialog-cta-text-color: #ffffff;      /* Button text color */
  --dialog-shop-font-family: inherit;    /* Font family */
}

Tracking add-to-cart and checkout from GTM

GTM deploys the widget but it doesn’t automatically know when a visitor adds to cart or completes checkout outside the assistant. To attribute conversion correctly, wire those events via the GTM tracking bridge — two more GTM tags that forward add_to_cart and purchase events to Dialog.

Troubleshooting

Issue	Likely cause	Solution
Block doesn’t appear	The target selector doesn’t match any element	Check the CSS selector in the browser devtools
productId is undefined	The GTM variable returns undefined at load time	Ensure the product ID is available on the page before the tag fires
403 error on the API	Invalid or expired API key	Verify your API key with the Dialog team
Block appears in the wrong place	The target or position parameter is not suitable	Adjust the CSS selector and/or the position value