Skip to main content

​
Adding ScentBot to your website

ScentBot is a web component (<scentbot-widget>) that loads via a single script file. This guide covers the three steps to get it running on your page.

​
Step 1: Load the widget script

Add the ScentBot runtime script to your page. Place it before the widget tag, ideally in the <head> or at the end of the <body>: 
<script src="https://scentbot.widgets.scentxp.net/index.iife.js" type="application/javascript"></script>
This script registers the <scentbot-widget> custom element. It loads asynchronously and initializes the widget once the DOM is ready.

​
Step 2: Load fonts

ScentBot uses Graphik and Dover Serif as its default fonts. Add the following @font-face declarations to your CSS: 
@font-face {
  font-family: "Graphik";
  src: url("path/to/Graphik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Graphik";
  src: url("path/to/Graphik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Graphik";
  src: url("path/to/Graphik-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Dover Serif";
  src: url("path/to/DoverSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
Replace the src URLs with the actual paths where your font files are hosted. ScentXP provides the default font files during onboarding. You can substitute your own brand fonts by overriding these declarations or using the styles attribute to load a custom CSS file.

​
Step 3: Add the widget

Insert the <scentbot-widget> tag in your page markup. At minimum, you need the public-key attribute: 
<scentbot-widget
  public-key="your_public_key"
  language="en"
></scentbot-widget>

​
Typical setup

A common configuration includes user identification, positioning, and notification preferences: 
<scentbot-widget
  public-key="your_public_key"
  language="en"
  user-id="logged_in_user_id"
  position="bottom-right"
  notifications="popup"
></scentbot-widget>

​
Full page example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Store</title>

  <!-- ScentBot fonts -->
  <style>
    @font-face {
      font-family: "Graphik";
      src: url("/fonts/Graphik-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
    }
    @font-face {
      font-family: "Dover Serif";
      src: url("/fonts/DoverSerif-Regular.woff2") format("woff2");
      font-weight: 400;
      font-style: normal;
    }
  </style>

  <!-- ScentBot script -->
  <script src="https://scentbot.widgets.scentxp.net/index.iife.js" type="application/javascript"></script>
</head>
<body>
  <!-- Your page content -->

  <!-- ScentBot widget -->
  <scentbot-widget
    public-key="your_public_key"
    language="en"
    position="bottom-right"
    notifications="popup"
  ></scentbot-widget>
</body>
</html>

​
Next steps

Configuration

All widget attributes — required and optional.

Events

Listen for cart events and control the widget programmatically.