Widget Integration

Add an AI-powered chat widget or search modal to your website with a single script tag.

Quick Setup

Add the following snippet to your website's HTML, just before the closing </body> tag.

HTML

<script src="https://cdn.cevvo.ai/widget/widget.js"></script>
<script>
  CevvoWidget.init({
    projectId: 'YOUR_PROJECT_ID',
    apiKey: 'YOUR_API_KEY',
    mode: 'chat',
    primaryColor: '#155EEF',
    theme: 'auto'
  });
</script>

Widget Modes

Chat Widget

A floating chat bubble in the corner of the page that opens a full conversation panel with AI Chat and Docs search tabs.

mode: 'chat'

Search Modal

A centered overlay modal triggered by a button or keyboard shortcut (Cmd+K). Great for documentation sites.

mode: 'modal'

Configuration Options

projectIdstring

Your Cevvo project ID (required).

mode'chat' | 'modal'default: 'chat'

Widget display mode.

buttonTextstringdefault: 'Ask AI'

Text displayed on the chat bubble button.

position'bottom-right' | 'bottom-left'default: 'bottom-right'

Position of the chat widget on the page.

primaryColorstringdefault: '#155EEF'

Primary brand color for the widget header and buttons.

theme'light' | 'dark' | 'auto'default: 'auto'

Widget theme. Auto follows the user's system preference.

welcomeMessagestring

Initial message shown when the chat opens.

exampleQuestionsstring[]default: []

Suggested questions shown to guide users.

Visual customizer: Use the Widget Customizer in your dashboard to configure and preview the widget with a live preview, then copy the generated embed code.