Documentation Examples
Examples
See how Cevvo integrates into your website with chat widgets and modals.
Chat Widget
Floating chat bubble that opens a full conversation panel
your-website.com/docs
Ask AI
Hi! I can help you find answers from our documentation. What would you like to know?
Try asking:
Features
- Floating chat bubble with customizable position
- AI Chat and Docs search toggle modes
- Deep Thinking mode for complex questions
- Example questions to guide users
- Custom welcome message and branding
- Light, dark, and auto theme support
- Streaming real-time responses
Preview Options
Embed Code
<!-- Cevvo Chat Widget -->
<script src="https://cdn.cevvo.ai/widget/widget.js"></script>
<script>
CevvoWidget.init({
projectId: 'YOUR_PROJECT_ID',
apiKey: 'YOUR_API_KEY',
mode: 'chat',
buttonText: 'Ask AI',
position: 'bottom-right',
primaryColor: '#155EEF',
theme: 'light',
welcomeMessage: 'Hi! I can help you find answers from our documentation. What would you like to know?',
exampleQuestions: [
"How do I get started?",
"What integrations are available?",
"How does billing work?"
]
});
</script>Search Modal
Centered search modal overlay for quick AI-powered answers
your-website.com/docs
AI Assistant
Ask anything about our documentation
Ask a question...
Powered by Cevvo
Features
- Centered overlay modal for focused search
- Minimal, distraction-free interface
- Customizable title and subtitle
- Keyboard shortcut support (Cmd+K)
- Powered by Cevvo branding
- Auto-closing on outside click
Preview Options
Embed Code
<!-- Cevvo Search Modal -->
<script src="https://cdn.cevvo.ai/widget/widget.js"></script>
<script>
CevvoWidget.init({
projectId: 'YOUR_PROJECT_ID',
apiKey: 'YOUR_API_KEY',
mode: 'modal',
modalTitle: 'AI Assistant',
modalSubtitle: 'Ask anything about our documentation',
primaryColor: '#155EEF',
theme: 'light'
});
</script>Framework Integration
Use Cevvo in React, Vue, or any JavaScript framework
React — useEffect Hook
// App.jsx or Layout.jsx
import { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://cdn.cevvo.ai/widget/widget.js';
script.async = true;
script.onload = () => {
window.CevvoWidget.init({
projectId: 'YOUR_PROJECT_ID',
apiKey: 'YOUR_API_KEY',
mode: 'chat',
primaryColor: '#155EEF',
welcomeMessage: 'Hi! How can I help you?',
});
};
document.body.appendChild(script);
return () => {
// Cleanup on unmount
document.body.removeChild(script);
const widget = document.querySelector('.cevvo-widget');
if (widget) widget.remove();
};
}, []);
return <div>{/* Your app content */}</div>;
}React — Dedicated Component
// components/CevvoWidget.jsx
import { useEffect } from 'react';
export default function CevvoWidget({
projectId,
apiKey,
mode = 'chat',
primaryColor = '#155EEF',
welcomeMessage = 'Hi! How can I help you?',
}) {
useEffect(() => {
// Load widget script
if (window.CevvoWidget) {
window.CevvoWidget.init({ projectId, apiKey, mode, primaryColor, welcomeMessage });
return;
}
const script = document.createElement('script');
script.src = 'https://cdn.cevvo.ai/widget/widget.js';
script.async = true;
script.onload = () => {
window.CevvoWidget.init({ projectId, apiKey, mode, primaryColor, welcomeMessage });
};
document.body.appendChild(script);
}, [projectId, mode, primaryColor, welcomeMessage]);
return null; // Widget renders itself
}
// Usage:
// <CevvoWidget projectId="proj_abc123" apiKey="YOUR_API_KEY" mode="chat" />