Searj

Widget Embedding Guide

Learn how to add your chatbot to your website. The process is simple — just copy a single line of code and paste it into your site.

Getting Your Embed Code

1
Navigate to your bot page

From the dashboard, select the bot you want to embed.

2
Open the "Widget" tab

Click on the "Widget" tab to view embedding settings.

3
Copy the code

Click the "Copy" button to copy the embed code to your clipboard.

The Embed Code

The embed code looks like this:

<script src="https://yourdomain.com/widget/searj-widget.js" data-bot-id="YOUR_BOT_ID"></script>

YOUR_BOT_ID will be automatically replaced with your bot's unique identifier when you copy the code from the dashboard.

Where to Add It

Place the embed code right before the closing tag in your HTML pages:

<html>
  <head>...</head>
  <body>
    <!-- Your website content -->

    <!-- Searj Chatbot Widget -->
    <script src="https://yourdomain.com/widget/searj-widget.js" data-bot-id="YOUR_BOT_ID"></script>
  </body>
</html>

Platform-Specific Instructions

WordPress

You have two options to add the code in WordPress:

Option 1: Theme Editor

  1. Go to Appearance → Theme Editor
  2. Open the footer.php file
  3. Paste the embed code before the </body> tag
  4. Click "Update File"

Option 2: Plugin (Recommended)

  1. Install the "Insert Headers and Footers" plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste the code in the "Scripts in Footer" section
  4. Save settings

Shopify

  1. Go to Online Store → Themes
  2. Click "Edit code"
  3. Open the theme.liquid file
  4. Paste the embed code before the </body> tag
  5. Click "Save"

Wix

  1. Go to Settings → Custom Code
  2. Click "Add Custom Code"
  3. Paste the embed code
  4. Select "Body - end" as the placement
  5. Choose "All pages" to apply
  6. Click "Apply"

Custom HTML

Simply paste the embed code directly into your HTML file before the </body> tag.

Next.js / React

Add the script to your root layout file or _document:

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://yourdomain.com/widget/searj-widget.js"
          data-bot-id="YOUR_BOT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Testing Your Embed

After adding the code, verify it works with these steps:

1
Open your website in a browser

You may need to clear cache (Ctrl+Shift+R).

2
Look for the chat button

A floating chat button should appear in the bottom corner of the screen.

3
Try a conversation

Click the button and ask a question to test the bot.

Live Preview

✅ You can preview the widget directly from the "Widget" tab in the dashboard without adding the code to your site first. Use this feature to test the bot's appearance and behavior.

💡 The widget uses Shadow DOM for CSS isolation — this means the widget won't affect your site's styles and won't be affected by your existing CSS styles.