Skip to main content

Chat Widget Integration

Learn how to embed, customize, and secure the Sentrup interactive chat widget on any website. Our script is optimized for performance, loading asynchronously without blocking rendering.

How to Embed the Chat Widget on Your Website?​

To embed the Sentrup AI chat widget on your website, copy the script tag from your admin dashboard and paste it directly before the closing </body> tag of your HTML. This lightweight script loads asynchronously to ensure zero impact on your page load speed.

<script
  src="https://www.sentrup.com/embed/chat-widget.js"
  data-tenant-id="your-workspace-tenant-id"
  defer
></script>

Make sure to replace your-workspace-tenant-id with the actual ID located in your Sentrup Admin Dashboard settings.

How to Customize the Chat Widget's Visual Appearance?​

You can customize the chat widget's visual appearance by using custom script attributes such as theme colors, title greetings, placeholder text, and side positioning. Alternatively, you can configure these options dynamically from the Admin Settings panel in your Sentrup dashboard.

  • data-theme-color: Set the hex code for buttons and highlights (e.g., #FF4D6D).
  • data-title: Define the custom greeting title (e.g., Sentrup Support).
  • data-placeholder: Define the input box placeholder text (e.g., Ask us anything...).
  • data-position: Position the floating icon on the page (left or right).
<script
  src="https://www.sentrup.com/embed/chat-widget.js"
  data-tenant-id="your-workspace-tenant-id"
  data-theme-color="#FF4D6D"
  data-title="Sentrup Support"
  data-placeholder="Ask us anything..."
  data-position="right"
  defer
></script>

How to Secure Your Chat Widget Using Allowed Domains?​

To secure your chat widget from unauthorized domains, navigate to the Allowed Origins settings in your dashboard and specify your domain names. The widget automatically checks the requesting origin before initiating connection channels to prevent unauthorized usage and protect quota limits.

Once domains are declared (e.g., https://mywebsite.com), the widget will verify the hosting URL before opening connection channels. Requests originating from unregistered origins will fail validation.

How to Embed the Chat Widget in Shopify Stores?​

To manually embed the Sentrup chat widget in a Shopify store, edit your active theme's theme.liquid layout file and paste the script snippet directly above the closing </body> tag. This integrates the assistant across all catalog pages, checkout flows, and customer portals.

  1. Log into the Shopify Admin Dashboard.
  2. Go to Online Store → Themes.
  3. On the active theme, click the three-dot icon (...) next to the "Customize" button, and select Edit code.
  4. In the file tree on the left, search for and open the theme.liquid file.
  5. Scroll down to the bottom of the file, and locate the closing </body> tag.
  6. Paste the Sentrup script tag directly above it:
<script
  src="https://www.sentrup.com/embed/chat-widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  defer
></script>

Make sure to replace YOUR_TENANT_ID with the store owner's actual workspace ID. Once saved, the Sentrup assistant will load on all product catalogs, checkout flows, and static pages of the store.

How to Embed the Chat Widget in WordPress Sites?​

To embed the Sentrup chat widget in WordPress websites, you can install the WPCode header-and-footer plugin to paste the script snippet into your footer, or manually insert it using PHP hooks inside your theme's active functions.php script file.

Method 1: Using a Header/Footer Plugin (No-Code)​

  1. Log into your WordPress Admin Panel.
  2. Navigate to Plugins → Add New Plugin.
  3. Search for "WPCode" (formerly Insert Headers and Footers) or any header/footer script manager, then install and activate it.
  4. Go to the new menu item Code Snippets → Header & Footer.
  5. Paste the Sentrup script code inside the Footer text area:
<script
  src="https://www.sentrup.com/embed/chat-widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  defer
></script>

Make sure to replace YOUR_TENANT_ID with your workspace ID and click Save Changes.

Method 2: Via Theme Functions (functions.php)​

If you prefer a code-based approach without installing third-party plugins, open your active theme's functions.php file and append the following PHP snippet:

<?php
add_action('wp_footer', function () { ?>
  <script
    src="https://www.sentrup.com/embed/chat-widget.js"
    data-tenant-id="YOUR_TENANT_ID"
    defer
  ></script>
<?php });