Embeddable Chat Widget: From Zero to Production in 5 Minutes

One line of code, a complete assistant

<script src="https://citai.ai/widget.js"
  data-api-key="sk-your-key"
  data-theme="light"
  data-position="bottom-right"
  data-welcome-message="Hi! How can I help you?">
</script>

That’s it. Your website now has an AI assistant with access to your entire knowledge base. No custom backend needed, no React, no dependencies.

Technical architecture

Shadow DOM: total isolation

The widget uses closed Shadow DOM. This means your CSS doesn’t affect the widget, the widget’s CSS doesn’t affect your site. No conflicts with Bootstrap, Tailwind, or any framework.

SSE Streaming in real time

Responses arrive token by token via Server-Sent Events using fetch + ReadableStream. No WebSocket, no extra libraries. Users see the response building in real time.

Session persistence

Conversations are saved in localStorage. If the user closes and returns, they pick up where they left off. History loads from the server automatically.

Full visual configuration

Advanced features

Pre-chat form

Capture name, email, or other data before the conversation. Configurable per field: required or optional.

Conversation starters

Suggested buttons that appear when the widget opens. Each starter fires a query against your KB directly.

Business hours

Define days and hours. After hours: capture form with name, email, and subject + custom message.

Proactive triggers

The widget can open automatically based on time spent, scroll percentage, or URL patterns.

Smart escalation

• Automatic: By low confidence threshold
• Manual: “Talk to a human” button always visible
• Webhooks: Instant notification with full conversation context

Multimedia FAQs

Images, videos, links, and carousels rendered directly in the chat.

Industry templates

Citai includes 4 pre-designed templates: E-commerce, SaaS, Education, and Health — each with optimized starters and welcome messages.

Install your widget in 30 seconds. Create your API key →