$ bitnivo embed --ai-builder

Built your site with an AI? Hand it this.

Bitnivo answers your customers from your own information and turns the good ones into leads. Copy the prompt into Cursor, Lovable, v0, Bolt, Replit or whatever you build with, and it wires the widget in for you. If you would rather paste the code yourself, it is right below the prompt.

01
Copy

The prompt, or the snippet

Both are self-contained. Swap the placeholder ID for your own and the assistant goes live on the next deploy.

1. The prompt

Paste this into your AI builder

Add the Bitnivo live chat widget to this website.

Step 1. Add this snippet to the project so it runs on every page, immediately before the closing </body> tag:

<!-- Bitnivo assistant: paste once, it updates itself from now on -->
<script>
(function () {
  var BOT_ID = "YOUR-CHATBOT-ID";
  var SRC = "https://bitnivo.co/chat/YOUR-CHATBOT-ID";
  if (document.getElementById("bitnivo-" + BOT_ID)) return;
  var cfg = { layout: "bubble", position: "right", color: "#6D5EFC", label: "Chat with us" };
  var open = false;
  var greeted = false;
  try { greeted = window.sessionStorage.getItem("bitnivo_greeted_" + BOT_ID) === "1"; } catch (e) {}

  var btn = document.createElement("button");
  btn.id = "bitnivo-" + BOT_ID;
  btn.type = "button";
  btn.style.cssText = "position:fixed;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border:0;border-radius:999px;color:#fff;font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 12px 30px rgba(15,15,30,.25);cursor:pointer;transition:background-color .2s ease";
  btn.addEventListener("click", function () { open = !open; place(); });

  var frame = document.createElement("iframe");
  frame.src = SRC;
  frame.title = "AI assistant";
  frame.allow = "clipboard-write";
  frame.style.cssText = "position:fixed;z-index:2147483000;border:0;background:#fff;box-shadow:0 24px 60px rgba(15,15,30,.28);overflow:hidden";

  function place() {
    var side = cfg.position === "left" ? "left" : "right";
    var other = side === "left" ? "right" : "left";
    var docked = cfg.layout === "panel";
    btn.style.background = cfg.color;
    btn.setAttribute("aria-label", cfg.label);
    btn.textContent = open ? "Close" : cfg.label;
    btn.style[side] = "20px";
    btn.style[other] = "auto";
    btn.style.bottom = "20px";
    btn.style.display = docked ? "none" : "inline-flex";
    frame.style[side] = docked ? "0" : "20px";
    frame.style[other] = "auto";
    frame.style.top = docked ? "0" : "auto";
    frame.style.bottom = docked ? "0" : "88px";
    frame.style.width = docked ? "min(400px,100vw)" : "390px";
    frame.style.maxWidth = docked ? "100vw" : "calc(100vw - 40px)";
    frame.style.height = docked ? "100vh" : "min(640px,78vh)";
    frame.style.borderRadius = docked ? "0" : "18px";
    frame.style.display = docked || open ? "block" : "none";
  }

  // The assistant tells this snippet how to look every time it loads, which is
  // how a version push reaches this page without the code being touched.
  window.addEventListener("message", function (event) {
    if (event.source !== frame.contentWindow) return;
    var data = event.data || {};
    if (data.type !== "bitnivo:presentation" || data.public_id !== BOT_ID) return;
    if (data.layout === "panel" || data.layout === "bubble") cfg.layout = data.layout;
    cfg.position = data.position === "left" ? "left" : "right";
    if (data.color) cfg.color = data.color;
    if (data.label) cfg.label = data.label;
    if (cfg.layout === "panel") open = true;
    place();
    greet();
  });

  function greet() {
    if (greeted || cfg.layout === "panel") return;
    greeted = true;
    try { window.sessionStorage.setItem("bitnivo_greeted_" + BOT_ID, "1"); } catch (e) {}
    setTimeout(function () { open = true; place(); }, 2500);
  }

  function mount() {
    document.body.appendChild(frame);
    document.body.appendChild(btn);
    place();
  }
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount); else mount();
})();
</script>

Step 2. Put it in the shared layout or template, so it loads exactly once on every page.

Step 3. Replace YOUR-CHATBOT-ID everywhere it appears with the chatbot ID from my Bitnivo dashboard (the Publish and embed tab).

Rules:
- Keep the snippet exactly as it is. Do not rewrite, minify, rename or split it.
- Do not change anything else in my project.
- If the snippet cannot run where you would put it, tell me instead of guessing.

Swap YOUR-CHATBOT-ID for your own ID, or copy this same prompt from your dashboard where it is already filled in.

2. The code, if you prefer

The widget on its own

<!-- Bitnivo assistant: paste once, it updates itself from now on -->
<script>
(function () {
  var BOT_ID = "YOUR-CHATBOT-ID";
  var SRC = "https://bitnivo.co/chat/YOUR-CHATBOT-ID";
  if (document.getElementById("bitnivo-" + BOT_ID)) return;
  var cfg = { layout: "bubble", position: "right", color: "#6D5EFC", label: "Chat with us" };
  var open = false;
  var greeted = false;
  try { greeted = window.sessionStorage.getItem("bitnivo_greeted_" + BOT_ID) === "1"; } catch (e) {}

  var btn = document.createElement("button");
  btn.id = "bitnivo-" + BOT_ID;
  btn.type = "button";
  btn.style.cssText = "position:fixed;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;padding:13px 18px;border:0;border-radius:999px;color:#fff;font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 12px 30px rgba(15,15,30,.25);cursor:pointer;transition:background-color .2s ease";
  btn.addEventListener("click", function () { open = !open; place(); });

  var frame = document.createElement("iframe");
  frame.src = SRC;
  frame.title = "AI assistant";
  frame.allow = "clipboard-write";
  frame.style.cssText = "position:fixed;z-index:2147483000;border:0;background:#fff;box-shadow:0 24px 60px rgba(15,15,30,.28);overflow:hidden";

  function place() {
    var side = cfg.position === "left" ? "left" : "right";
    var other = side === "left" ? "right" : "left";
    var docked = cfg.layout === "panel";
    btn.style.background = cfg.color;
    btn.setAttribute("aria-label", cfg.label);
    btn.textContent = open ? "Close" : cfg.label;
    btn.style[side] = "20px";
    btn.style[other] = "auto";
    btn.style.bottom = "20px";
    btn.style.display = docked ? "none" : "inline-flex";
    frame.style[side] = docked ? "0" : "20px";
    frame.style[other] = "auto";
    frame.style.top = docked ? "0" : "auto";
    frame.style.bottom = docked ? "0" : "88px";
    frame.style.width = docked ? "min(400px,100vw)" : "390px";
    frame.style.maxWidth = docked ? "100vw" : "calc(100vw - 40px)";
    frame.style.height = docked ? "100vh" : "min(640px,78vh)";
    frame.style.borderRadius = docked ? "0" : "18px";
    frame.style.display = docked || open ? "block" : "none";
  }

  // The assistant tells this snippet how to look every time it loads, which is
  // how a version push reaches this page without the code being touched.
  window.addEventListener("message", function (event) {
    if (event.source !== frame.contentWindow) return;
    var data = event.data || {};
    if (data.type !== "bitnivo:presentation" || data.public_id !== BOT_ID) return;
    if (data.layout === "panel" || data.layout === "bubble") cfg.layout = data.layout;
    cfg.position = data.position === "left" ? "left" : "right";
    if (data.color) cfg.color = data.color;
    if (data.label) cfg.label = data.label;
    if (cfg.layout === "panel") open = true;
    place();
    greet();
  });

  function greet() {
    if (greeted || cfg.layout === "panel") return;
    greeted = true;
    try { window.sessionStorage.setItem("bitnivo_greeted_" + BOT_ID, "1"); } catch (e) {}
    setTimeout(function () { open = true; place(); }, 2500);
  }

  function mount() {
    document.body.appendChild(frame);
    document.body.appendChild(btn);
    place();
  }
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", mount); else mount();
})();
</script>

One self-contained snippet, no dependencies. It adds a floating chat button and loads the assistant in a frame.

02
Process

Three steps, in order

You need the chatbot before the snippet, and the ID before either of them works.

step 01

Make the chatbot first

Sign up free, name your assistant and point it at your website or upload your documents. Training takes a couple of minutes.

step 02

Copy your own ID

Every chatbot gets a short public ID. Your dashboard shows it with the code already filled in, under Publish and embed.

step 03

Paste and ship

Hand the prompt to your AI builder, or drop the snippet into your platform custom code box. Then open your live site and click the button.

Works with Cursor, Lovable, v0, Bolt, Replit, Copilot and plain HTML.

Building on WordPress, Shopify, Wix, Squarespace or Webflow instead? Your dashboard has the exact place to paste the snippet for each of them.

Create your free chatbot

Put an assistant on your website today

Create your first chatbot free, train it on your own business information, and paste one line of code into your site. No card, no developer, no waiting on anyone.

See pricing