search

Install guide

hashtag
Install Guides on your website

For both Modal and Embedded guides you need to install the script below on the webpage the guide should appear. Replace YOUR_COMPANY_ID with your company UUID. You can find the script with your ID under company settings in the platform.

<script type="text/javascript" src="https://headless.dialogtrail.com/static/sdk.js?id=YOUR_COMPANY_ID"></script>

If your guide is Embedded you also need to use the code below to set where you want the guide to be placed on the webpage. (You do not need this for Modal guides)

<div id="dt-product-guide"></div>

hashtag
Localization

To utilize localized product guides, add a locale query parameter to the SDK script source.

Example:

&locale=en_US

Note: If no locale is provided, the SDK will search for a suitable locale by looking at the html-tag lang property or the OpenGraph meta-tag.

hashtag
Tracking

hashtag
Sales tracking

We need you to set up our sales tracking events to get the most out of ebbot. They look like this:

/*
  items is a list of the products added to cart / purchased.
  id/groupId is the product id / group id that your transformer specifies.
  quantity is the amount of the product, this is optional.
  value is the sale price of the product.
  currency is the currency the user paid in, use the same one to group the sales up and get an overview in our dashboard, this is optional.
  ext is the external source, this is optional. When using the default head this is the placementId.
*/

// Add to cart event
window.DT.event(
  'add_to_cart',
  {
    items: [
      {
        id: string,
        groupId?: string,
        quantity: number,
        value: string | number
      }
    ],
    currency: string
  },
  ext?: { [key: string]: value}
);

// Purchase event
window.DT.event(
  'purchase',
  {
    items: [
      {
        id: string,
        groupId?: string,
        quantity: number,
        value: string | number
      }
    ],
    currency: string
  },
  ext?: { [key: string]: value}
);

Important: Make sure that you send the same id and groupId that you have connected to ebbot through the feed.

These events will send data to us so that you can view your sales in our dashboard, from there you will be able to compare the sales from different guides or placements.

You should install these events where you have set up your purchase events for Google Tag Manager or similar services.

hashtag
Ecommerce store integrations

hashtag
Add to cart

If “Add to cart” is enabled, a button will be displayed with each product allowing users to add items directly to cart. When the button is clicked, an event of type dt_add_to_cart is dispatched on window.

Event type:

Listen to this event:

hashtag
Initiate guide with properties

Initiate a product guide with values from your own data layer by assigning window.dtProductGuideInitProps before loading the SDK.

Example:

Types:

Internal name
Name in builder
Description

entryTags

Attributes

These are the attributes that we get from your product feed(s).

entryActions

Tags

These are internal tags used for gathering data and skipping steps without setting attributes.

hashtag
How to install a script and/or a div on your website

Each website and company has its own way of installing scripts and code. Therefore, these instructions are general but will hopefully help you. You will most likely find more specific instructions with your e-commerce provider.

hashtag
Installing a script

Most websites use a third-party tool to manage their scripts, e.g. Google Tag Manager. If so, install ebbot in there, the same way you do for other scripts.

If you prefer you can instead install the script in your website’s header or footer.

hashtag
Installing a div

Put the div where you want the embedded CTA or guide to appear on your website. Most websites allow for creating custom html elements. Create a customer html element, or similar, in the position on your website where you want the guide to appear.

hashtag
Styling tips

You can change some main colors under placement defaults, these will be the same for all placements. If you want to have specific colors for a certain placement you can accomplish this by using the css editor for that placement.

We have a bunch css vars that you can change how you like, here’s a list:

When entering your css we recommend that the css structure should look something like this:

If these instructions were not enough, try searching for the solution through your e-commerce provider’s documentation.

PreviousProduct data feedsNextProduct guide events

Last updated

Was this helpful?