Custom Website

Use this for any website that is not WordPress or Shopify — plain HTML, Wix or Webflow custom code, Laravel, React, Next.js, Vue and more. You copy one short piece of code into your site, and the chat button appears. You only do it once: every later change to the chat is made from your dashboard.

Before you start

• An AI agent — Create one in Dashboard → My AI Agents first
• A way to edit your website’s code — Or a developer who can paste the code for you
• Your site’s shared footer or layout file — Pasting the code there puts it on every page at once

How to set it up

1. 1

   Open the window

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

2. 2

   Select the AI agent

   Pick the one this website should use. You can click “Change” later to pick another

3. 3

   Copy the code

   Under “Your Embed Script”, click “Copy”. The code already holds your agent’s ID, so you do not need to edit it

4. 4

   Open your website code

   Open your HTML file or website template in your code editor, or your site builder’s “custom code” setting

5. 5

   Paste it before </body>

   Paste the code just before the closing </body> tag, on every page where the chat should appear. Put it in your shared footer or layout file so it loads everywhere

6. 6

   Save and publish

   Save your file and publish your website as normal. 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 -->

React, Next.js and Vue

These sites change pages without reloading the browser, so a plain paste can load the widget twice or lose it between pages. Load it once instead, 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

1. 1Visitor opens your site
2. 2Chat button appears
3. 3Visitor asks
4. 4Agent answers
5. 5Chat saved in your dashboard

Every visitor now sees the chat button. When they open it, your agent greets them with your welcome message and answers from its knowledge. Changes you make in Dashboard → Customization and Dashboard → Agent Settings appear on your site straight away — you never touch the code again.

What you can do with it

• Answer visitors — Day and night, in their own language
• Collect leads and bookings — With the lead form and booking form from Agent Settings
• Accept files — Customers can send photos, voice notes and documents (PDF, Word, Excel, text; 3 MB each, up to 5 at a time)
• Hand over to your team — Visitors can choose “Talk to a person” from the chat menu
• See your visitors — Dashboard → Visitors shows who is on your site and which pages they viewed

Good to know

• The code is the same for every page — you only paste it once per layout
• The widget loads in the background and does not slow your site down
• Your agent ID is unique to your agent. Keep the code as it is
• On WordPress, use the WordPress plugin instead — it is simpler

Troubleshooting

• No chat button — The code is missing from that page, or is inside <head> instead of just before </body>
• Still no chat button — A cache or CDN is showing an old copy of your page. Clear it and test in a private window
• It works on the home page only — The code is in the home page file, not in the shared footer or layout
• It appears twice on a React or Next.js site — Use the React code above, which loads the widget only once