Getting Started

Welcome to Remark! This guide will help you implement our expert chat widget on your website and set up customer tracking to give your experts the context they need to provide exceptional service.

Add the Script Tag

Include the Remark JavaScript snippet in your website’s head section.

Set Up Tracking

Track customer behavior to give experts context about their journey.

Customize & Deploy

Style the widget to match your brand and go live!

For Remark’s chat interface to appear on your storefront, you’ll add a small JavaScript snippet to your website’s pages. Adding this JavaScript snippet will make sure that:

Expert chat appears correctly on your site
Customers can continue to chat with their expert as they browse different pages on your site.
Every sale that is assisted by Expert Chat is correctly tracked from impression to conversion.

We recommend that you add the Remark JavaScript snippet to every page of your website. If a customer navigates to a page that does not include the Remark snippet, they will not be able to continue their conversation with an expert.You may choose to omit the JavaScript snippet from sensitive pages in your checkout journey, however the snippet must be included on the order confirmation / completion page in order to correctly track sales.

How to add the JavaScript Snippet

The snippet itself is the same regardless of how you install it:

<script
  type="text/javascript"
  src="https://chat-widget.withremark.com/api/loader?shop={{your shop domain}}"
  async
></script>

Replace {{your shop domain}} with your storefront’s root domain. For a store at https://www.example.com/, the snippet would be:

<script
  type="text/javascript"
  src="https://chat-widget.withremark.com/api/loader?shop=example.com"
  async
></script>

There are a few ways to get this snippet onto your pages. They are listed in the order we recommend.

1. Directly in your page template (preferred)

Paste the snippet into the <head> of your site’s main page template. Because the snippet lives in your own HTML, it loads on every page and is not affected by browser extensions or tracking-protection settings.

2. Shopify ScriptTag or the Remark Shopify app

If you run on Shopify, you can install the loader through a ScriptTag or the Remark Shopify app. Both inject the script server-side, so the experience for shoppers is the same as adding it to your template directly. This is a good option if you can’t (or would rather not) edit your theme’s HTML.

3. Google Tag Manager (not recommended)

You can also load Remark through Google Tag Manager or another tag manager (Tealium, Adobe Launch, Segment, etc.). This is the easiest path if your team already manages other scripts that way, but it comes with tradeoffs: Many ad and tracker blockers block googletagmanager.com at the network level, and several browsers ship the same protection on by default — including Brave, DuckDuckGo, Arc, Dia, and Firefox in strict tracking-protection mode. When GTM is blocked, every script GTM is responsible for loading is blocked with it, so Remark will not appear for those shoppers. If you choose this installation method, we suggest measuring how much of your traffic is affected and weighing that against the convenience of managing the tag in GTM.

Controlling where the widgets appear

The loader script registers two custom elements: <remark-chat-widget> for the floating chat, and <remark-qa-activator> for the embedded chat. By default, the loader inserts these elements for you based on your Remark dashboard settings — the floating widget is appended to <body>, and the embedded widget is inserted at the anchor selector configured in the dashboard. If you want precise control over placement, you can put the custom element directly in your page HTML at the exact spot you want it. The loader will detect the existing element and upgrade it in place instead of inserting a new one. This is most useful for the embedded chat, where the position in your page layout matters:

<!-- Wherever you want the embedded chat to appear -->
<remark-qa-activator></remark-qa-activator>

The floating widget can be pre-placed the same way (<remark-chat-widget></remark-chat-widget>), though it’s rarely necessary since the floating widget positions itself. Pre-placing the embedded element is also how you supply attributes that shape the starter questions shown to your visitors — see Page Context for the full list. You still need the loader script on the page; the custom element stays inert until the loader registers it.

Set up Remark to track shopper journey

Remark supercharges experts with live information about their customer’s journey. When experts can see what products, categories, and pages a customer is seeing, they can better assist your shoppers.

Why Track Customer Events?

Tracking customer behavior gives your experts crucial context about what customers are viewing, searching for, and purchasing. This enables them to provide more relevant and helpful assistance.

For this feature to work best, you will need to set up Remark to track specific actions your customers take. The Remark SDK exposes a track feature which is used to track customer actions, page views, and commerce-related events across your website. These events are then ingested and shown to experts as they assist your customer.

Waiting for Remark to initialize

Because the Remark script loads asynchronously, window.remark may not be available yet when your code runs. To safely call window.remark, wait for the remark:session-initialized event:

window.addEventListener('remark:session-initialized', () => {
  window.remark('track', {
    type: 'ProductPageView',
    productId: 'your-product-id'
  });
});

If your tracking code runs later in the page lifecycle (e.g. on a button click), you can check whether window.remark is already available and fall back to the event listener:

function trackEvent(event) {
  if (typeof window.remark === 'function') {
    window.remark('track', event);
  } else {
    window.addEventListener('remark:session-initialized', () => {
      window.remark('track', event);
    }, { once: true });
  }
}

Track Product Views

The Product View customer event helps give context to an expert when they chat with a shopper. The Product View event should be configured on all Product Detail Pages.

window.remark('track', {
  type: 'ProductPageView',
  productId: 'your-product-id' // passed as a string
});

The productId should be sent as a string. It should be the primary identifier for the product in your e-commerce system.

Track Purchases

The Purchase event is used by Remark to detect when a conversation with an expert has led to an order being placed. This event should be set up to trigger on all purchase confirmation / completion pages.

Purchase tracking must be configured before launch. It is fundamental to using Remark.

window.remark('track', {
  type: 'purchase',
  rawData: {
    currency: 'USD',
    email: 'customer@example.com',
    orderId: '123456',
    requiresShipping: true,
    subtotal: '64.39',
    shippingPrice: '12.99',
    totalTax: '3.00',
    totalPrice: '79.39',
    createdAt: "2023-03-01T19:58:28+00:00" // The datetime the order was placed in ISO 8601 format
    lineItems: [
      {
        id: 'lineItemId-1234',
        productId: 'your-product-id',
        variantId: 'your-variant-id', // Optional if no variants exist
        price: '24.39',
        quantity: 1, // Passed as number
        requiresShipping: true,
        sku: 'product-xl-blue-22',
        title: 'Product Name',
        variantTitle: 'XL Blue' // Optional if no variants exist
      },
      {
        id: 'lineItemId-1234',
        productId: 'your-product-id',
        variantId: 'your-variant-id', // Optional if no variants exist
        price: '20.00',
        quantity: 2, // Passed as number
        requiresShipping: true,
        sku: 'product-m-red-23',
        title: 'Product Name',
        variantTitle: 'M Red' // Optional if no variants exist
      }
    ],
  }
});

Track Category Views

The Category View event gives experts context on which categories / collections the customer has been viewing. The Category View event should be configured on all Category / Collection Pages.

window.remark('track', {
  type: 'CategoryPageView',
  name: 'Mountain Bikes',
});

Track Searches

The Search event gives experts context on what a customer is searching for. Trigger the search event whenever a customer executes a search.

window.remark('track', {
  type: 'Search',
  search: 'intermediate skis'
});

Track Cart Additions

The Cart Add event gives experts context on what a customer is adding to their cart. Trigger the Cart Add event whenever a customer adds an item to their cart.

window.remark('track', {
  type: 'CartAdd',
  cartItem: {
    variantId: 'your-variant-id' // Optional if no variants exist
    quantity: 1
  },
  productId: 'your-product-id' // Use productId instead, if no variants exist
});

Track Cart Removes

The Cart Remove event gives experts context on what a customer is removing their cart. Trigger the Cart Remove event whenever a customer removes an item from their cart.

window.remark('track', {
  type: 'CartRemove',
  cartItem: {
    variantId: 'your-variant-id' // Optional if no variants exist
  },
  productId: 'your-product-id' // Use productId instead, if no variants exist
});

Track Cart updates

The Cart Update event can be used to track changes in quantity in the customer’s cart. Trigger the Cart Update event whenever a customer changes the quantity of an item in their cart.

window.remark('track', {
  type: 'CartUpdate',
  cartItem: {
    variantId: 'your-variant-id' // Optional if no variants exist
    quantity: 2
  },
  productId: 'your-product-id' // Use productId instead, if no variants exist
});

Guides

Dashboard

API

Integrations

Getting Started

Adding the Remark Widget tag

How to add the JavaScript Snippet

1. Directly in your page template (preferred)

2. Shopify ScriptTag or the Remark Shopify app

3. Google Tag Manager (not recommended)

Controlling where the widgets appear

Set up Remark to track shopper journey

Waiting for Remark to initialize

Track Product Views

Track Purchases

Track Category Views

Track Searches

Track Cart Additions

Track Cart Removes

Track Cart updates

​Adding the Remark Widget tag

​How to add the JavaScript Snippet

​1. Directly in your page template (preferred)

​2. Shopify ScriptTag or the Remark Shopify app

​3. Google Tag Manager (not recommended)

​Controlling where the widgets appear

​Set up Remark to track shopper journey

​Waiting for Remark to initialize

​Track Product Views

​Track Purchases

​Track Category Views

​Track Searches

​Track Cart Additions

​Track Cart Removes

​Track Cart updates

Adding the Remark Widget tag

How to add the JavaScript Snippet

1. Directly in your page template (preferred)

2. Shopify ScriptTag or the Remark Shopify app

3. Google Tag Manager (not recommended)

Controlling where the widgets appear

Set up Remark to track shopper journey

Waiting for Remark to initialize

Track Product Views

Track Purchases

Track Category Views

Track Searches

Track Cart Additions

Track Cart Removes

Track Cart updates