Skip to main content
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.
1

Add the Script Tag

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

Set Up Tracking

Track customer behavior to give experts context about their journey.
3

Customize & Deploy

Style the widget to match your brand and go live!

​
Adding the Remark Widget tag

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

You may use Google Tag Manager if you prefer, or you can add the tag manually to the <head> section of your page. 
<script
  type="text/javascript"
  src="https://chat-widget.withremark.com/api/loader?shop={{your shop domain}}"
  async
></script>
If your storefront is hosted at https://www.example.com/, your snippet would look like: 
<script
  type="text/javascript"
  src="https://chat-widget.withremark.com/api/loader?shop=example.com"
  async
></script>

​
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.
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.

​
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: '[email protected]',
    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
});