search

DifyチャットボットをWixサイトに統合する方法

Wixは人気のWebサイト作成プラットフォームです。ドラッグ・アンド・ドロップを使用して、ユーザーがWebサイトを視覚的にデザインできます。Wixのiframeコード機能を活用することで、DifyチャットボットをWixサイトにシームレスに統合できます。

この機能はチャットボットの統合だけでなく、外部のサーバーや他のソースからのコンテンツをWixページに表示することもできます。例えば、天気ウィジェット、株価ティッカー、カレンダー、またはカスタムウェブ要素などがあります。

このガイドでは、iframeコードを使用してDifyチャットボットをWixWebサイトに埋め込む手順を説明します。この方法は他のWebサイト、ブログ、またはウェブページにDifyアプリケーションを統合する際にも適用できます。

hashtag
1. DifyアプリケーションのiFrameコードスニペットを取得する

すでにDify AIアプリケーションarrow-up-rightを作成していると仮定し、以下の手順に従ってiFrameコードスニペットを取得してください：

  1. Difyアカウントにログインします。

  2. 埋め込みたいDifyアプリケーションを選択します。

  3. ページ右上の「公開」ボタンをクリックします。

  4. 公開ページで「サイトに埋め込む」のオプションを選択します。

    サイトに埋め込む

  5. 適切なスタイルを選択し、表示されるiFrameコードをコピーします。例：

    iFrameコード例

hashtag
2. iFrameコードスニペットをWixサイトに埋め込む

  1. WixWebサイトにログインし、編集したいページを開きます。

  2. ページの左側にある青い+（要素の追加）ボタンをクリックします。

  3. 埋め込みコードを選択し、HTMLを埋め込むをクリックして、ページにHTML iFrame要素を追加します。

    HTML iFrameを追加

  4. HTML設定ボックスで、コードオプションを選択します。

  5. Difyアプリケーションから取得したiFrameコードスニペットを貼り付けます。

  6. 更新ボタンをクリックして変更内容を保存し、プレビューします。

以下はDifyチャットボットを埋め込むためのiFrameコードスニペットの例です：

Dify iFrameコードを挿入

⚠️ iFrameコード内のアドレスがHTTPSで始まることを確認してください。HTTPアドレスは正しく表示されません。

hashtag
3. Difyチャットボットのカスタマイズ

Difyチャットボットのボタンスタイル、位置、その他の設定を調整することができます。

hashtag
3.1 スタイルのカスタマイズ

iFrameコード内のstyle属性を変更することで、チャットボットボタンの外観をカスタマイズできます。例：

このコードは、チャットボットインターフェースに幅2ピクセルの実線の黒い境界線を追加します。

hashtag
3.2 位置のカスタマイズ

style属性内のposition値を変更することで、ボタンの位置を調整できます。例：

このコードは、ページの右下隅にチャットボットを固定し、下端と右端から20ピクセルの位置に配置します。

hashtag
よくある質問

1. iFrameのコンテンツが表示されない

  • URLがHTTPSで始まっていることを確認してください。

  • iframeコードに誤字がないか確認してください。

  • 埋め込まれたコンテンツがWixのセキュリティポリシーに準拠しているか確認してください。

2. iFrameのコンテンツが切り取られて表示される

iframeコード内のwidthとheightのパーセンテージ値を変更することで、コンテンツの切り取り問題を解決できます。

Previous数分で業務データを持つ公式サイトのAIチャットボットを作成する方法NextAWS Bedrockのナレッジベースに統合する方法

Last updated