One script tag. Connects to your Dyva. Visitors chat on your site. No backend.
Lightweight script. Handles connection, conversation state, and UI. Visitors chat without creating an account.
Script tag in your HTML. Widget appears.
Theme, position, colors, dimensions, greeting. All via data attributes.
Open, close, send messages, listen to events.
Drop this script tag in the <body> of any page. Replace YOUR_DYVA_ID with your Dyva ID from the dashboard.
<script src="https://dyva.ai/embed.js" data-dyva-id="YOUR_DYVA_ID"></script>That is it. Chat button appears bottom-right. Click it, full chat interface opens.
All via data-* attributes on the script tag. No config object needed.
| Attribute | Default | Description |
|---|---|---|
data-dyva-idRequired | -- | Required. Your Dyva ID. |
data-theme | "auto" | "light", "dark", or "auto" (matches site theme). |
data-position | "bottom-right" | "bottom-right" or "bottom-left". |
data-primary-color | -- | Hex color for button and header. |
data-greeting | -- | Greeting shown when widget opens. |
data-width | 380 | Width in pixels. |
data-height | 600 | Height in pixels. |
data-open | "false" | "true" to auto-open on page load. |
data-hide-branding | "false" | "true" to remove branding. Pro+ only. |
<script
src="https://dyva.ai/embed.js"
data-dyva-id="rpl_x4y5z6a7b8c9"
data-theme="dark"
data-position="bottom-right"
data-primary-color="#8b5cf6"
data-greeting="Hey! How can I help you today?"
data-width="400"
data-height="640"
data-open="false"
data-hide-branding="false"
></script>After the embed script loads, a global window.Dyva object is available with the following methods.
| Method | Description |
|---|---|
Dyva.open() | Open the chat widget. |
Dyva.close() | Close the chat widget. |
Dyva.toggle() | Toggle the widget open or closed. |
Dyva.sendMessage(text) | Programmatically send a message as the visitor. |
Dyva.on(event, callback) | Subscribe to widget events. See Events below. |
// Open the widget when a custom button is clicked
document.getElementById("help-btn").addEventListener("click", () => {
Dyva.open();
});
// Send a contextual message based on the current page
Dyva.sendMessage("I have a question about " + document.title);Use Dyva.on(event, callback) to listen for widget lifecycle and messaging events.
| Event | Payload | Description |
|---|---|---|
ready | -- | Widget has loaded and is ready to use. |
open | -- | Chat widget was opened. |
close | -- | Chat widget was closed. |
message | { role, content } | A new message was sent or received. |
error | { code, message } | An error occurred (network failure, rate limit, etc.). |
Dyva.on("ready", () => {
console.log("Widget loaded");
});
Dyva.on("message", (data) => {
console.log(`[${data.role}]: ${data.content}`);
// Track messages in your analytics
analytics.track("dyva_message", {
role: data.role,
length: data.content.length,
});
});
Dyva.on("error", (err) => {
console.error("Dyva error:", err.code, err.message);
});Fine-tune appearance with CSS custom properties. Add to your stylesheet to override defaults.
| Property | Default | Description |
|---|---|---|
--dyva-font | system-ui | Font family used in the widget. |
--dyva-radius | 12px | Border radius for the widget container and messages. |
--dyva-z-index | 9999 | Stack order of the widget overlay. |
:root {
--dyva-font: "Inter", sans-serif;
--dyva-radius: 16px;
--dyva-z-index: 50000;
}Wrap the embed script in a component for clean lifecycle management. Works with both Pages Router and App Router.
"use client";
import { useEffect, useRef } from "react";
interface DyvaWidgetProps {
dyvaId: string;
theme?: "light" | "dark" | "auto";
position?: "bottom-right" | "bottom-left";
primaryColor?: string;
greeting?: string;
width?: number;
height?: number;
open?: boolean;
hideBranding?: boolean;
}
export function DyvaWidget({
dyvaId,
theme = "auto",
position = "bottom-right",
primaryColor,
greeting,
width,
height,
open,
hideBranding,
}: DyvaWidgetProps) {
const loaded = useRef(false);
useEffect(() => {
if (loaded.current) return;
loaded.current = true;
const script = document.createElement("script");
script.src = "https://dyva.ai/embed.js";
script.async = true;
script.dataset.dyvaId = dyvaId;
script.dataset.theme = theme;
script.dataset.position = position;
if (primaryColor) script.dataset.primaryColor = primaryColor;
if (greeting) script.dataset.greeting = greeting;
if (width) script.dataset.width = String(width);
if (height) script.dataset.height = String(height);
if (open) script.dataset.open = "true";
if (hideBranding) script.dataset.hideBranding = "true";
document.body.appendChild(script);
return () => {
script.remove();
};
}, [dyvaId, theme, position, primaryColor, greeting, width, height, open, hideBranding]);
return null;
}