Widget builder

<script src="https://cdn.jsdelivr.net/npm/@sinups/ai-kit/dist/embed/widget.js" defer
  data-url="https://chat.example.com/widget"
  data-title="Assistant"
  data-color="#0a84ff"
  data-size="medium"
  data-position="bottom-right"
  data-offset="30"
  data-pulse="true"
  data-open-after="15000"
  data-devices="all"
  data-actions='[
    {"id":"chat","label":"Chat with us","opensChat":true},
    {"id":"call","label":"Call me back","href":"tel:+10000000"},
    {"id":"telegram","label":"Telegram","href":"https://t.me/example","color":"#2aabee"}
  ]'></script>

<script src="https://cdn.jsdelivr.net/npm/@sinups/ai-kit/dist/embed/widget.js" defer></script>
<script>
  window.addEventListener("load", () => {
    window.chat = AiKitChat({
      url: "https://chat.example.com/widget",
      title: "Assistant",
      color: "#0a84ff",
      location: ["bottom", "right"],
      pulse: true,
      openAfter: 15000,
      labels: { open: "Открыть чат", actions: "Как с нами связаться" },
      actions: [
        { id: "chat", label: "Чат с ассистентом", opensChat: true },
        { id: "call", label: "Перезвоним за 10 секунд", href: "tel:+10000000" },
      ],
    });
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/@sinups/ai-kit/dist/embed/widget.js" defer
  data-url="https://chat.example.com/widget"
  data-config-url="https://cdn.example.com/widget.json"></script>

import { chatWidget } from "@sinups/ai-kit/embed";

const widget = chatWidget({
  url: "https://chat.example.com/widget",
  position: "bottom-right",
  color: "rgb(10, 132, 255)",
  openAfter: 15000,
  actions: [
    { id: "chat", label: "Chat with us", opensChat: true },
    { id: "call", label: "Call me back", href: "tel:+10000000" },
  ],
});

widget.notify({
  title: "Need a hand?",
  text: "We answer in a minute and keep the thread in your inbox",
  avatar: "https://example.com/ada.png",
  timeout: false,
});

// short form
widget.notify("Hi! Need a hand with the order?");

// full form: title, avatar, its own lifetime
widget.notify({
  title: "Anna from support",
  text: "Delivery across the EU takes 3 to 5 working days. Shall I cover returns?",
  avatar: "https://example.com/anna.png",
  timeout: 15000,        // ms; false keeps it until it is dismissed
});

// the call returns the hide of that one bubble
const { hide } = widget.notify({ text: "Stays until you say so", timeout: false });
setTimeout(hide, 3000);

const chat = window.aiKitChat;

// a greeting after the visitor has read for a while
setTimeout(() => chat.notify({ title: "Anna from support", text: "Anything I can help with?" }), 20000);

// a hint when the visitor is about to leave
document.addEventListener("mouseleave", (event) => {
  if (event.clientY <= 0) {
    chat.notify({ text: "Leaving? I can send the quote by email", id: "exit", timeout: false });
  }
}, { once: true });

// after the visitor scrolled through the pricing
const pricing = document.querySelector("#pricing");
new IntersectionObserver(([entry], observer) => {
  if (entry.isIntersecting) {
    chat.notify({ text: "Compare the plans with me?", id: "pricing" });
    observer.disconnect();
  }
}).observe(pricing);

// own button on the page instead of the launcher
document.querySelector("#ask").addEventListener("click", () => chat.open());

// a question about the current page
document.querySelector("#ask-about-order").addEventListener("click", () => {
  chat.navigate("https://chat.example.com/widget?order=A-1024");
});

// count of unanswered replies, kept by the page
chat.unread(3);
chat.on("open", () => chat.unread(0));

// what the visitor picked in the fan
chat.on("action", (id) => analytics.track("widget_action", { id }));

// quieter on a landing page, louder in the account
chat.setOptions({ pulse: false, openAfter: 0 });
chat.options.color = "#0a84ff";

// take it off a page where it does not belong
if (location.pathname.startsWith("/checkout")) {
  chat.hide();
}

// inside the chat page, in the iframe
const host = "https://shop.example.com";  // the page the widget runs on
parent.postMessage({ source: "ai-kit-chat", type: "unread", count: 3 }, host);
parent.postMessage({ source: "ai-kit-chat", type: "notify", title: "New reply", text: "Your ticket is answered" }, host);
parent.postMessage({ source: "ai-kit-chat", type: "close" }, host);

// on the page around it
widget.on("action", (id) => analytics.track("widget_action", { id }));
widget.send("locale", { locale: "ru" });