Installation

This page shows how to put the chat widget on your website. The widget is the chat button and chat window your visitors use. Pick the method that matches your website: WordPress and Shopify need no code at all, and every other website needs one short piece of code pasted once.

Before you start

• An AI agent — Create one in Dashboard → My AI Agents first. The widget shows the agent you choose
• Access to your website — The WordPress or Shopify admin login, or the ability to edit your site’s code (or a developer who can)
• Your site address — For example yourstore.com or mystore.myshopify.com

How to set it up on WordPress (no code)

1. 1

   Open the WordPress window

   Go to Dashboard → Integrations → WordPress and click “Connect”. A window titled “Connect WordPress” opens

2. 2

   Enter your site address

   Type it, for example yourstore.com, and click “Open in WordPress”. Sign in to your WordPress admin if it asks

3. 3

   Install the plugin

   Your WordPress admin opens on the “Botvee AI Agent” plugin. Click Install Now, then Activate

4. 4

   Connect it

   In the plugin, click “Connect with Botvee”. A secure window opens; sign in to Botvee there. There is nothing to copy or paste

5. 5

   Choose the agent

   Pick the AI agent that should answer on this site and confirm. The plugin shows “Your AI Agent is now live on your site.”

6. 6

   Check your site

   Open any page. The chat button shows in the corner

If the button does not open your WordPress admin, click “Download the plugin manually instead” and upload it in WordPress under Plugins → Add New → Upload Plugin. The full guide is on the WordPress page.

How to set it up on Shopify (no code)

1. 1

   Open the Shopify window

   Go to Dashboard → Integrations → Shopify and click “Connect”

2. 2

   Pick the AI agent

   Choose the agent this store should use. It will answer from your Shopify products

3. 3

   Type your store domain

   In the “Store domain” field, for example mystore.myshopify.com, then click “Connect Shopify”

4. 4

   Approve in Shopify

   Shopify shows what Botvee can read. Approve it. You return to Botvee

5. 5

   Open your store

   Products start importing and the chat button appears on your storefront

If the chat button does not appear, switch on the “Botvee - Chat & AI Agent” app embed in Shopify under Online Store → Themes → Customize → App embeds. The full guide is on the Shopify page.

How to set it up on any other website (one piece of code)

Works with plain HTML, Wix or Webflow custom code, Laravel, React and any site where you can add code.

1. 1

   Open the window

   Go to Dashboard → Integrations → Custom Website and click “Connect”

2. 2

   Pick the AI agent

   Choose the agent this site should use

3. 3

   Copy the code

   Click “Copy”. The code already holds your agent’s ID, so you do not need to change anything in it

4. 4

   Paste it into your site

   Paste it just before the closing </body> tag, on every page. Most sites have one shared footer or layout file; pasting it there puts it on every page at once

5. 5

   Save and publish

   Save the file and publish your site as you normally do. Refresh the page and the chat button appears in the bottom corner

<!-- BotVee Chat Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['BotVee']=o; w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s); fjs=d.getElementsByTagName(s)[0];
    js.id=o; js.src=f; js.async=1; fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','bv','https://www.botvee.ai/widget.js'));
  bv('init', { botId: 'YOUR_AGENT_ID' });
</script>
<!-- End BotVee -->

Using React or Next.js? These sites change pages without reloading, so load the widget once, like this:

// React / Next.js — load the widget once, after mount
import { useEffect } from "react";

export function BotveeWidget({ botId }: { botId: string }) {
  useEffect(() => {
    if (document.getElementById("bv")) return;   // already loaded
    (function (w: any, d: any, s: string, o: string, f: string) {
      w["BotVee"] = o;
      w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments); };
      const js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1;
      fjs.parentNode.insertBefore(js, fjs);
    })(window, document, "script", "bv", "https://www.botvee.ai/widget.js");
    (window as any).bv("init", { botId });
  }, [botId]);

  return null;
}

What happens next

Once the widget is on your site, every visitor sees the chat button. When they open it, your agent greets them with your welcome message and answers their questions. Changes you make later in Dashboard → Customization (colours, logo, welcome message) and in Dashboard → Agent Settings (lead form, handoff, booking) appear on your site straight away. You never need to paste the code again.

Check it works

• Open your website in a private (incognito) window, so no old copy of the page is shown
• Send a test message and check the reply
• Check it appears in Dashboard → All Chats
• Open your site on a phone too — most visitors use one

Good to know

• One website should use one AI agent. You can create more agents for other websites (see Plans & Limits)
• The code loads in the background and does not slow your page down
• Customers can send text, voice notes, photos and documents in the chat

Troubleshooting

• The chat button does not appear — A caching plugin or CDN is showing an old copy of your page. Clear the cache and test again in a private window
• Still nothing on a custom site — Check the code is just before </body> and is on every page, not only the home page
• Nothing on WordPress — Check the plugin is activated, connected, and that its display rules include the page you are looking at
• Nothing on Shopify — Switch on the Botvee app embed in Themes → Customize → App embeds
• The wrong agent answers — Open the integration again and pick the right agent