Skip to content
Submit a Support Ticket
  • There are no suggestions because the search field is empty.

How do I install the Sophiie chatbot on my website?

You can add Sophiie's chatbot to your website to handle enquiries directly from your site. Here's how to set it up.

Step 1: Get your embed code

  1. Log in to your dashboard at app.sophiie.ai
  2. Go to Settings > Chatbot
  3. Copy the embed code provided — it's ready to use as-is, with your account details already included

Step 2: Add the code to your website

Paste the embed code into your website's HTML, just before the closing `</body>` tag. Where you do this depends on your website platform.

WordPress

  1. Go to your WordPress admin panel
  2. Navigate to Appearance > Widgets or Appearance > Theme Editor > footer.php
  3. Add a Custom HTML widget (or block) and paste the Sophiie embed code
  4. Save your changes

Alternatively, if you use a page builder (Elementor, Divi, etc.), add an HTML block to your footer template and paste the code there.

Shopify

  1. Go to your Shopify admin
  2. Navigate to Online Store > Themes > Edit Code
  3. Open the `theme.liquid` file
  4. Paste the Sophiie embed code just before `</body>`
  5. Save

Squarespace, Wix, or other builders

Most website builders have a section for adding custom code. Look for something like "Code Injection", "Custom Code", or "Footer Code" in your site settings. Paste the Sophiie embed code there.

If you're not sure where to find it, check your platform's help docs for "how to add custom code" — or let us know and we'll walk you through it.

SSL requirement

Your website must have HTTPS (an SSL certificate) for the chatbot to work. Most modern websites have this by default — you can check by looking at your website URL. If it starts with `https://`, you're good to go.

If your site still uses `http://` (no "s"), contact your website hosting provider to enable SSL. Most hosts offer this for free.

Common Questions

The chatbot isn't appearing on my site

If you've added the code but can't see the chatbot:

  • Make sure you pasted the code before the closing `</body>` tag, not in the `<head>` section
  • Clear your browser cache and reload the page
  • Check that your website has HTTPS enabled (see above)
  • Try viewing your site in a private/incognito browser window

Can I customise the chatbot's appearance?

The main customisation option is the pop-out toggle — you can choose whether the chatbot automatically pops out when someone visits your site, or stays minimised until the visitor clicks on it. You'll find this in your dashboard under Settings > Chatbot.

If you'd like to remove the "Powered by Sophiie" branding, that's available as an additional cost. Let us know and our team can arrange it.

For Developers — Manual Installation & API

If you prefer to install the chatbot manually or need to customise the integration, this section covers the configuration options, code snippets, and available API methods.

Configuration interface

The `Configuration` interface defines the options you can use to customise the Sophiie chatbot:

interface Configuration {
  /**
   * The Organization ID of your Sophiie account.
   * This is a mandatory field to identify your organization.
   */
  orgId: string;

  /**
   * The environment to interact with the Sophiie engine.
   * Defaults to "production". Use "development" for testing purposes.
   */
  environment?: "development" | "production";

  /**
   * The mode of rendering for the chatbot.
   * This can determine how the chatbot is displayed on the page.
   */
  render?: RenderOptions;
}

Embed code — Option 1 (recommended)

Add the following to your HTML page just before `</body>`, replacing `YOUR_ORG_ID_HERE` with your Sophiie Organisation ID (found in Settings > Chatbot):

<script>
function _vf_load() {
  window.sophiie.chat.load({
    orgId: "YOUR_ORG_ID_HERE",
    render: {
      mode: "overlay"
    }
  });
}
</script>
<script type="module" src="https://cdn.sophiie.ai/chatbot/bundle.mjs" onload="_vf_load()"></script>

Embed code — Option 2 (alternative)

If you need more control over script loading, you can use this alternative approach:

<script type="text/javascript">
  (function (d, t) {
    var v = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    v.onload = function () {
      window.sophiie.chat.load({
        orgId: "YOUR_ORG_ID_HERE",
        render: {
          /* Custom rendering options */
        },
      });
    };
    v.src = "https://cdn.sophiie.ai/chatbot/bundle.mjs";
    v.type = "text/javascript";
    s.parentNode.insertBefore(v, s);
  })(document, "script");
</script>

API methods

Once the chatbot is loaded, you can control it programmatically:

Show the chatbot widget:

window.sophiie.chat.show();

Open the chat interface:

window.sophiie.chat.open();

Send a custom interaction:

window.sophiie.chat.interact({
  type: "user_message",
  content: "Hello, I need help with my order.",
});

Need More Help?

If the chatbot still isn't working after following these steps, let us know the following and our team will help get it sorted:

  • Your business name
  • Your website URL
  • What platform your website is built on (WordPress, Shopify, etc.)
  • A screenshot of any errors you're seeing