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 });

How to Embed the Chat Widget in Android Apps?​

To integrate the Sentrup chat widget into an Android application, you can use a native WebView component and load an HTML string containing the widget script.

  1. Ensure your app has internet permissions in AndroidManifest.xml: 
    <uses-permission android:name="android.permission.INTERNET" />
  2. In your Activity or Fragment, set up the WebView: 
    import android.webkit.WebView
    import android.webkit.WebSettings

    val webView = findViewById<WebView>(R.id.chatWebView)
    webView.settings.javaScriptEnabled = true
    webView.settings.domStorageEnabled = true

    val htmlContent = """
        <!DOCTYPE html>
        <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body style="margin:0;padding:0;">
            <script
              src="https://www.sentrup.com/embed/chat-widget.js"
              data-tenant-id="YOUR_TENANT_ID"
              defer>
            </script>
        </body>
        </html>
    """.trimIndent()

    webView.loadDataWithBaseURL("https://yourdomain.com", htmlContent, "text/html", "UTF-8", null)

Make sure to pass a valid baseUrl (like your allowed domain) to loadDataWithBaseURL so that Sentrup's domain validation accepts the request.

How to Embed the Chat Widget in iOS Apps?​

For iOS applications, you can use WKWebView from the WebKit framework to load the Sentrup chat widget HTML string.

  1. Import WebKit and set up your WKWebView in your ViewController: 
    import UIKit
    import WebKit

    class ChatViewController: UIViewController {
        var webView: WKWebView!

        override func loadView() {
            let webConfiguration = WKWebViewConfiguration()
            // JavaScript is enabled by default in WKWebView
            webView = WKWebView(frame: .zero, configuration: webConfiguration)
            view = webView
        }

        override func viewDidLoad() {
            super.viewDidLoad()
            
            let htmlString = """
            <!DOCTYPE html>
            <html>
            <head>
                <meta name="viewport" content="width=device-width, initial-scale=1">
            </head>
            <body style="margin:0;padding:0;">
                <script
                  src="https://www.sentrup.com/embed/chat-widget.js"
                  data-tenant-id="YOUR_TENANT_ID"
                  defer>
                </script>
            </body>
            </html>
            """
            
            if let baseUrl = URL(string: "https://yourdomain.com") {
                webView.loadHTMLString(htmlString, baseURL: baseUrl)
            }
        }
    }

Similarly, ensure the baseURL matches your allowed domains configured in the Sentrup dashboard.