> ## Documentation Index > Fetch the complete documentation index at: https://docs.remark.ai/llms.txt > Use this file to discover all available pages before exploring further. # Getting Started > Install Remark's chat widget and set up customer tracking in minutes 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. Include the Remark JavaScript snippet in your website's head section. Track customer behavior to give experts context about their journey. 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 The snippet itself is the same regardless of how you install it: ```html theme={null} ``` Replace `{{your shop domain}}` with your storefront's root domain. For a store at `https://www.example.com/`, the snippet would be: ```html theme={null} ``` 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 `` 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](https://shopify.dev/docs/api/admin-graphql/latest/objects/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: `` for the floating chat, and `` 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 ``, 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: ```html theme={null} ``` The floating widget can be pre-placed the same way (``), 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](/sdk/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. 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: ```javascript theme={null} 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: ```javascript theme={null} 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*. ```javascript theme={null} 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. ```javascript theme={null} 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*. ```javascript theme={null} 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. ```javascript theme={null} 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. ```javascript theme={null} 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. ```javascript theme={null} 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. ```javascript theme={null} 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 }); ```