ElevenLabsの会話型AIウィジェットをWebflowサイトに追加する方法

顧客体験を向上させたいですか？会話型AIが役立ちます。ElevenLabsの会話型AIをWebflowのウェブサイトに追加することで、訪問者は自然な会話を、まるでチームのメンバーと話しているかのように楽しめます。自然な会話が可能です。

このガイドでは、ElevenLabsの会話型AIウィジェットをWebflowサイトに追加し、カスタムHTMLとJavaScriptを使用してウィジェットを統合する手順を説明します。

CONVERSATIONAL AI（会話型AI）

ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。

始める前に

始める前に、以下を確認してください：

1. Webflowアカウント：Embed Elementにアクセスするには、Core、Growth、Agency、Freelancer Workspace、またはSite Planが必要です。
2. ElevenLabsアカウント：ElevenLabsで会話型AI音声エージェントを設定し、提供された埋め込みコード（< script >と< div >スニペットを含む）をコピーします。
3. Webflowのデザイナーに慣れていること：WebflowでEmbed Elementsを追加および編集する基本的な理解が役立ちます。

ステップバイステップガイド

ステップ1：ElevenLabsウィジェットを準備

1. ElevenLabsアカウントにログインします。
2. 会話型AIセクションに移動します。
3. 埋め込みコードをコピーします。これには以下が含まれます：
4. • ウィジェットの機能を読み込むための< script >スニペット。
   • ページ上でウィジェットが表示される場所を定義するための< div >スニペット。

ステップ2：ウィジェットをWebflowページに追加

特定のページにウィジェットを表示するには、Embed Elementを使用します。

1. Webflowプロジェクトをデザイナーで開きます。
2. ウィジェットを表示したいページに移動します。
3. Elements PanelからEmbed Elementをページの希望の場所にドラッグします。
4. Embed ElementのコードエディタにElevenLabsの埋め込みコードから< div >スニペットを貼り付けます。
5. 変更を適用するには「保存して閉じる」をクリックします。

注意：Embed Elementはデザイナーでのウィジェットのプレースホルダーとして機能します。実際のウィジェットはサイトが公開されたときにのみレンダリングされます。

ステップ3：スクリプトをグローバルに追加

ウィジェットが正しく機能するように、< script >スニペットをサイト全体にグローバルに含める必要があります。

1. Webflowダッシュボードに移動し、プロジェクト設定を開きます。
2. カスタムコードタブに移動します。
3. Footer Codeセクションに< script >スニペットを貼り付けます。これにより、ウィジェットが使用されるすべてのページでスクリプトが読み込まれます。
4. 「変更を保存」をクリックします。

ステップ4：公開してテスト

1. サイトをWebflowのステージングドメインまたはカスタムドメインに公開します。
2. ブラウザでサイトを開き、ウィジェットが期待通りに表示され、機能することを確認します。

重要：カスタムコードはWebflowのデザイナーではレンダリングされません。ウィジェットをライブで見るにはサイトを公開する必要があります。

一般的な問題とトラブルシューティング

統合の設定に 問題がありますか？心配しないでください。以下のヒントが役立つはずです。

1. ウィジェットが表示されない

• 原因：< script >または< div >スニペットが欠落しているか、誤った場所にあります。
• 解決策：< script >スニペットがFooter Codeセクションにあり、< div >スニペットがEmbed Elementに正しく配置されていることを確認してください。

2. ウィジェットのアラインメントがずれている

• 原因：Embed Elementの配置やスタイリングが不適切です。
• 解決策：Webflowのスタイルパネルを使用して、Embed Elementの寸法とアラインメントを調整します。

3. エラー

• 原因：他のスクリプトとの競合やブラウザの制限。
• 解決策：ブラウザのデベロッパーコンソールを使用してJavaScriptエラーを特定し、修正します。

高度なヒント

ウィジェットをカスタマイズしたり、異なるデバイスでテストしたり、複数のページでウィジェットを再利用したい場合、知っておくべきことがあります。

• ウィジェットのカスタマイズ：WebflowのスタイルパネルやカスタムCSSを使用して、ウィジェットの外観（サイズ、アラインメント、色など）を調整します。
• 異なるデバイスでのテスト：Webflowのレスポンシブデザインツールを使用して、ウィジェットがデスクトップ、タブレット、モバイルデバイスでシームレスに動作することを確認します。
• ウィジェットの再利用：複数のページでウィジェットを使用する予定がある場合、Embed Elementをコンポーネントとして保存します。これにより、一貫したスタイリングと管理が容易になります。

最終的な考え

ElevenLabsの会話型AIウィジェットをWebflowに統合するのは簡単です。プラットフォームの埋め込み要素とカスタムコード機能のおかげで、単一ページでもサイト全体でもエンゲージメントを向上させたい場合は、上記の手順に従って始めてください。

さらなるサポートが必要な場合は、ElevenLabsのサポートにお問い合わせいただくか、Webflowのコミュニティフォーラムで追加のガイダンスを探してください。サポート

まだ登録していない場合は、サインアップしてElevenLabsの

CONVERSATIONAL AI（会話型AI）

ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。

よくある質問