Embedding

Swap in your character’s slug. That’s the entire address.

https://dyva.ai/embed/YOUR_CHARACTER_SLUG

Size is an ordinary iframe attribute, not a Dyva setting. Pick whatever fits your layout. A corner-anchored bubble usually wants a small, fixed box.

<iframe
  src="https://dyva.ai/embed/YOUR_CHARACTER_SLUG"
  width="380"
  height="520"
  style="border:none;"
  title="Chat preview"
></iframe>

Expected result: the frame shows a round avatar bubble in its bottom-right corner. Clicking it expands to a small chat panel with the character’s name and avatar in the header.

Two parameters on the URL. That’s the full surface: there’s no separate theming API.

<iframe
  src="https://dyva.ai/embed/YOUR_CHARACTER_SLUG?color=%238b5cf6&greeting=Hey!%20Want%20to%20chat%3F"
  width="380"
  height="520"
  style="border:none;"
  title="Chat preview"
></iframe>

The widget posts and listens for three message types via window.postMessage. Useful if you want your own button to open it, instead of relying on the built-in bubble.

Messages

const frame = document.getElementById("dyva-embed");

window.addEventListener("message", (event) => {
  if (event.origin !== "https://dyva.ai") return;
  if (event.data?.type === "dyva:ready") {
    console.log("Widget loaded");
  }
});

// Open the panel from your own button instead of the built-in bubble
document.getElementById("my-chat-button").addEventListener("click", () => {
  frame.contentWindow.postMessage({ type: "dyva:open" }, "https://dyva.ai");
});

React

It’s an iframe, no client library needed. A thin wrapper keeps the URL-building in one place.

function DyvaEmbed({ slug, color, greeting, width = 380, height = 520 }) {
  const params = new URLSearchParams();
  if (color) params.set("color", color);
  if (greeting) params.set("greeting", greeting);
  const query = params.toString();

  return (
    <iframe
      src={`https://dyva.ai/embed/${slug}${query ? `?${query}` : ""}`}
      width={width}
      height={height}
      style={{ border: "none" }}
      title="Chat preview"
    />
  );
}

If the frame shows “Widget unavailable”

The slug in the URL doesn’t resolve to a character that’s currently public. Check for:

• •A typo in the slug. Copy it fresh from the character's public page URL.
• •The character was switched to private after you built the embed.
• •The character was deleted.

What this doesn’t do

Anonymous visitors get a short, capped preview conversation before the panel invites them to sign up. The exact number of free messages isn’t part of this contract and can change. There’s no domain allowlist to configure, no branding removal, and no per-visitor memory across sessions: every page load that clears cookies starts fresh.