サイト埋め込みデモ

あなたのサイトに
AIキャラクターを埋め込む

たった1行のコードで、WebサイトにインタラクティブなAIキャラクターを追加。訪問者はリアルタイムで会話できます。

右下のボタンをクリックして体験してみてください

ライブデモ

このページに実際のCharafyウィジェットが埋め込まれています。右下のチャットボタンをクリックして会話を始めましょう。

活用シーン

観光AIガイド

観光地の案内や歴史解説をAIキャラクターが多言語で対応。ウェブサイトに埋め込むだけで、24時間対応の観光コンシェルジュに。

EC・カスタマーサポート

商品の質問や使い方をAIが即座に回答。人件費を抑えながら、お客様の満足度を向上させます。

教育・学習サポート

AIチューターが学習者の質問にリアルタイムで回答。教材サイトや学習プラットフォームに組み込んで、学びを加速。

かんたん3ステップで導入

キャラクターを作成

ダッシュボードで写真をアップロードし、声と性格を設定してAIキャラクターを作成します。

埋め込みを有効化

キャラクター設定画面で埋め込み機能をオンにし、許可するドメインを設定します。

コードを貼り付け

生成されたscriptタグをあなたのWebサイトのHTMLに貼り付けるだけ。すぐに動作します。

導入コード

scriptタグをHTMLに貼り付けるだけ。フレームワーク不問で、どんなサイトにも対応します。

<!-- Charafyウィジェットを追加 -->
<script
  src="https://charafy.ai/widget.js"
  data-character-id="YOUR_CHARACTER_ID"
  data-embed-mode="video"
></script>

フローティングモード（デフォルト）

画面の角に丸いボタンが表示されます。クリックするとボタンの上にチャットパネルが開きます。

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

オーバーレイモード

ボタンをクリックすると、半透明の背景とともに中央にオーバーレイが表示されます。

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

フルページモード

ボタンをクリックすると、画面全体にチャットが表示されます。

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

設定オプション

属性	デフォルト	説明
data-character-id	（必須）	キャラクターUUID
data-mode	"floating"	"floating"、"overlay"、または "fullpage"
data-theme	-	iframeに ?theme= として渡されます
data-lang	-	"en" または "ja"
data-color	"#6366f1"	ボタンの背景色
data-position	"bottom-right"	"bottom-right" または "bottom-left"
data-embed-mode	-	"video" または "audio-only"

JavaScript API

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

注意事項

キャラクターの embed_enabled=true が必要です。
ウィジェットはShadow DOMでスタイルを隔離しています。サイトのCSSと競合しません。
モバイル（640px以下）では、フローティングパネルが自動的にほぼ全画面に拡大します。

今すぐ始めよう

無料プランで今日からAIキャラクターをあなたのサイトに。セットアップは5分で完了します。