Embed Demo

Add AI Characters
to Your Website

With just one line of code, add an interactive AI character to any website. Visitors can have real-time conversations.

Click the button in the bottom-right corner to try it out

Live Demo

A real Charafy widget is embedded on this page. Click the chat button in the bottom-right corner to start a conversation.

Use Cases

Tourism AI Guide

AI characters provide multilingual tourism guidance and historical explanations. Embed on your website for a 24/7 concierge.

E-Commerce & Support

AI instantly answers product questions and how-to inquiries. Reduce costs while improving customer satisfaction.

Education & Tutoring

AI tutors answer learner questions in real-time. Embed in educational sites and learning platforms to accelerate learning.

Get Started in 3 Steps

Create a Character

Upload a photo in the dashboard, set a voice and personality to create your AI character.

Enable Embed

Turn on the Embed feature in your character settings and configure allowed domains.

Paste the Code

Just paste the generated script tag into your website's HTML. It works immediately.

Integration Code

Simply paste a script tag into your HTML. Framework-agnostic, works with any website.

<!-- Add Charafy widget -->
<script
  src="https://charafy.ai/widget.js"
  data-character-id="YOUR_CHARACTER_ID"
  data-embed-mode="video"
></script>

Floating Mode (Default)

A circular button appears in the corner. Clicking it opens a chat panel above the button.

<script
  src="https://charafy.ai/widget.js"
  data-character-id="YOUR_CHARACTER_ID"
></script>

Overlay Mode

Clicking the button opens a centered overlay with a semi-transparent backdrop.

<script
  src="https://charafy.ai/widget.js"
  data-character-id="YOUR_CHARACTER_ID"
  data-mode="overlay"
  data-color="#8b5cf6"
  data-position="bottom-left"
></script>

Fullpage Mode

Clicking the button opens the chat covering the entire viewport.

<script
  src="https://charafy.ai/widget.js"
  data-character-id="YOUR_CHARACTER_ID"
  data-mode="fullpage"
></script>

Configuration Options

Attribute	Default	Description
data-character-id	(required)	Character UUID
data-mode	"floating"	"floating", "overlay", or "fullpage"
data-theme	-	Passed as ?theme= to the iframe
data-lang	-	"en" or "ja"
data-color	"#6366f1"	Button background color
data-position	"bottom-right"	"bottom-right" or "bottom-left"
data-embed-mode	-	"video" or "audio-only"

JavaScript API

CharafyWidget.open()   // Open the chat panel
CharafyWidget.close()  // Close the chat panel
CharafyWidget.destroy() // Remove widget entirely

Notes

The character must have embed_enabled=true.
The widget uses Shadow DOM for style isolation — it won't conflict with your site's CSS.
On mobile (<=640px), the floating panel expands to near full-viewport automatically.

Get Started Today

Start adding AI characters to your website for free. Setup takes just 5 minutes.