How to Embed Your AI Character on Any Website

Ellie Nguyen

06 Apr 2026 • 4 min read

MegaNova Studio generates ready-to-paste code that puts your AI character on any webpage. No separate server, no API integration required — visitors open your site and chat with the character directly, without logging in to MegaNova.

The embed runs as an isolated widget. It handles session management, rate limiting, and domain validation on its own. You control everything from the Settings tab inside your character's Studio page.

Step 1: Open the Embed Manager

In your character's Studio, go to the Settings tab. Under the Embed section, click Generate Embed Code. If you have configured an embed before, the button reads Edit Embed Settings instead.

The modal that opens has four tabs: Display, Behavior, Access Control, and Code Snippets.

Step 2: Configure Display

The Display tab controls how the widget looks on the page.

Theme — Light, Dark, or Auto. Auto follows the visitor's system preference.

Show Avatar — toggles the character's avatar image in the chat header. On by default.

Width and Height — accepts CSS values. Width defaults to 100% (fills the container). Height defaults to 600. You can use px units for fixed sizes.

Border Radius — three options:

Square — hard corners (0px border-radius)
Rounded — 12px border-radius (default)
Fully Rounded — 24px border-radius

Font Style — Default, Compact (tighter line height), or Large (bigger text).

Step 3: Configure Behavior

The Behavior tab controls how the character interacts with visitors.

Voice Reply — enables text-to-speech on character responses. Off by default. Enabling this adds a voice=true parameter to the embed URL.

Typing Animation — shows a typing indicator while the character generates a response. On by default.

Memory Mode — three options:

No Memory — each page load starts a fresh conversation. No history retained.
Session Memory — conversation persists during the browser session. Cleared when the tab closes.
Persistent Memory — conversation history retained across sessions.

Safe Mode — Standard or Strict. Strict applies stronger content filtering on user inputs before they reach the character.

Step 4: Configure Access Control

The Access Control tab determines who can use the embed and at what rate.

Public Access — when enabled, anyone who visits the embed URL can chat. No login required. On by default.

Activate Embed — the master toggle. The embed is inactive until this is checked. An inactive embed returns "Character not found or embed not active" to anyone who tries to load it.

Rate Limit — prevents abuse by limiting requests per minute from the embed:

Low — 10 requests per minute
Medium — 50 requests per minute (default)
High — 200 requests per minute

Allowed Domains — restricts which websites can load the embed. Leave empty to allow any site. Add domains like https://example.com to restrict. The embed validates the request's Origin header against this list. Both exact matches and subdomains are supported — adding example.com also allows app.example.com.

If allowed domains are set and a request comes from an unlisted origin, the embed returns a 403. The studio's own domain is always trusted regardless of this setting.

Step 5: Copy the Code

Once you save, go to the Code Snippets tab. Three embed formats are available.

iFrame

The simplest option. Works on any HTML page.

<iframe
  src="https://studio.meganova.ai/e/abc12345?theme=dark"
  width="100%"
  height="600"
  style="border:0; border-radius: 12px;">
</iframe>

The src uses the short embed code (/e/{cid}) when one is assigned, making the URL easier to manage than a full UUID. The query parameters (theme, voice, memory) are appended from your configuration automatically.

Loads the character into any <div> on the page with more flexibility than an iframe.

<script src="https://studio.meganova.ai/character-widget.js"></script>
<div id="mn-character" style="height: 500px;"></div>

<script>
MegaNovaWidget.init({
  "cid": "abc12345",
  "container": "#mn-character",
  "theme": "dark",
  "voice": false,
  "memory": "none"
});
</script>

The widget initializer targets any CSS selector via the container property. The #mn-character div is the default target in the generated code.

React Component

For React applications, import the component from the MegaNova embed package.

import { MegaNovaCharacter } from "@meganova/embed";

<MegaNovaCharacter
  cid="abc12345"
  theme="dark"
  memory="session"
  width="100%"
  height="600"
/>

Props map directly to the settings you configured. Optional props (voice, memory, showAvatar, typingAnimation) are only included in the generated code when they differ from the default.

The Short Embed URL

When the embed is active and a short code (cid) is assigned, the Settings tab shows a Short Embed URL:

https://studio.meganova.ai/e/abc12345

This URL is the standalone page for the character widget — no surrounding interface. You can also link directly to it for a full-page embed experience or use it inside an iframe.

Analytics

The Analytics button in the embed settings shows five metrics for the character's embed:

Total Impressions — number of times the widget was loaded
Unique Users — distinct visitors
Messages/Session — average messages per conversation
Voice Usage — total voice responses played
Active Sessions — currently open sessions

Domain Restriction Example

If you want the embed to work only on yoursite.com and app.yoursite.com:

Go to Access Control
Add https://yoursite.com to Allowed Domains
Save

Requests from any other origin will be rejected. The studio preview (at studio.meganova.ai) still works because MegaNova's own domain is always in the trusted list.

If you clear the Allowed Domains list, the embed becomes accessible from any site again.

What Visitors Experience

Visitors see a chat interface with the character's avatar and name. The character's first message appears immediately. There is no login prompt, no MegaNova branding flow — just the character.

Sessions run against the character's published configuration. If you update the character's Blueprint and save, the changes are live for all active embed sessions. Visitors already mid-conversation will see the updated behavior on their next message.

Open MegaNova Studio and set up your embed →

Stay Connected

💻 Website: Meganova Studio

🎮 Discord: Join our Discord

👽 Reddit: r/MegaNovaAI

🐦 Twitter: @meganovaai