Ask AI

Build this on your own frontend

Host pages can sit on any site. The chat API is cross-origin. Prefer the floating activator (one script tag). Style with CSS variables — do not fork the widget unless you need new behaviour.

1. Easiest — floating Ask AI (recommended)

One script tag. Adds a floating Ask AI button; opens a chat window with Maximize / Minimize / Close. The inline chat on this page also has a Maximize header button. Paste, drop, or attach up to 3 images.

<script src="https://8i.co.za/guide/amcoza/ask-ai/am-kb-chat-activate.js" async></script>

Optional options (set before the script):

<script>
  window.AmKbChatActivate = {
    title: 'Ask AI',
    fabLabel: 'Ask AI',
    autoOpen: false,       // true = open window on load
    startMaximized: false  // true = open full-screen
  };
</script>
<script src="https://8i.co.za/guide/amcoza/ask-ai/am-kb-chat-activate.js" async></script>

From your own JS after load: AmKbChat.openFloat(), AmKbChat.closeFloat(), or AmKbChat.activate({…}).

2. Inline mount (fixed panel on the page)

<link rel="stylesheet" href="https://8i.co.za/guide/amcoza/ask-ai/am-kb-chat.css">
<div id="kb"></div>
<script src="https://8i.co.za/guide/amcoza/ask-ai/am-kb-chat.js"></script>
<script>
  AmKbChat.mount('#kb', { title: 'Ask AI' });
</script>

Do not put the ask API host in your page. The widget loads endpoint.js from the same folder as the JS. Change the backend once there — every embed picks it up.

3. Or auto-mount

<div
  data-am-kb-chat
  data-am-kb-title="Ask AI"></div>
<script src="https://8i.co.za/guide/amcoza/ask-ai/am-kb-chat.js"></script>

4. Style with your page theme

Override hooks on .am-kb-chat (this page maps them to the 8i theme):

.am-kb-chat {
  --am-kb-bg: #030312;
  --am-kb-ink: #f7f7ff;
  --am-kb-muted: #aaaadc;
  --am-kb-card: #09094a;
  --am-kb-line: #b7b7fb48;
  --am-kb-accent: #f6cd49;   /* 8i gold */
  --am-kb-user-bg: #0f0fb9;  /* 8i blue */
  --am-kb-user-ink: #f7f7ff;
  --am-kb-bot-bg: #09094a;
  --am-kb-radius: 12px;
  --am-kb-font: 'Baloo Chettan 2', Arial, sans-serif;
}

5. API contract

• POST JSON to the ask URL from endpoint.js (widget resolves it): { message, history, images?, session_id? }
• Success: { answer }
• 429 rate limit: { rate_limited, retry_after, error } — wait and retry
• 403 outside SADC: { geo_blocked, ai_connect, ai_builder, error } — show those links
• Images: paste, drag-drop, or Photo button — up to 3 × JPEG/PNG/GIF/WebP, ≤4MB, base64 in images[{mime,data}]
• Keep history in the browser across turns; clear on “New conversation”
• Ephraim Live: UI button Switch to Ephraim Live → yellow mode; API type values live_start / live_message / live_poll / OTP / internal live_reply. Management escalate: poppy@am.co.za.

6. Rules for product frontends

• Handle 403 / 429 in UI (this widget already does)
• Prefer am-kb-chat-activate.js (floating) or hotlink JS/CSS from 8i.co.za/guide/amcoza/ask-ai/ so fixes apply everywhere
• Never hardcode the ask API host in third-party pages — only hotlink our JS (it reads endpoint.js)
• SADC visitors only for live ask; everyone else → AI Connect / AI Builder