Studio.DesignにChatGPTチャットボットを追加する方法

Studio.Design のウェブサイトページに、カスタムトレーニング済みのチャットボットを埋め込みたいとします。SiteSpeakAI を使用して ChatGPT を Studio.Design に追加する手順は次のとおりです。

Studio.Design のウェブサイトにチャットボットを追加する

Studio.Design は、コードを一切使用せずに自由なビジュアルデザインを求めるデザイナー、クリエイター、中小企業向けに設計された、コード不要のウェブサイトビルダーです。洗練されたデザインと優れたパフォーマンスを兼ね備えたポートフォリオ、ランディングページ、ブランドウェブサイトの構築に特に人気があります。

詳しくは、Studio.Design をご覧ください。

SiteSpeakAI の場合

上部のドロップダウンメニューからチャットボットを選択し、サイドバーの「チャットボットをインストール」セクションをクリックして「iFrame」を選択し、「コードをコピー」ボタンをクリックしてコードスニペットをコピーします。

Studio.Design で

1. Studio.Design アカウントにログインし、ダッシュボードでウィジェットを追加したいプロジェクトにマウスオーバーして「デザインエディター」を選択します。

2. プロジェクトが編集モードで開き、デフォルトのページが表示されます。

注意: Studio.Design では、JavaScript スニペットを使用してチャットボットボタンを追加することはできませんが、SiteSpeakAI チャットボットダイアログの iframe コード（このチュートリアルの冒頭でコピーしたもの）を含むポップアップモーダルページを作成し、これをウェブページ上のボタンにリンクすることは可能です。

それでは、モーダル ページを作成しましょう。

3. 左側のサイドバーでページオプションを選択します

4. 「ページ」タブで「追加」をクリックしてページを追加します。これにより、通常ページと動的ページ、通常モーダルと動的モーダル、リダイレクトページ、検索ページ、パスワードページを追加できます。ここでは通常モーダルページを選択します。

5. 「モーダル（通常）」を選択

6. 「ページ」に空のモーダルページが表示されます

7. 追加 を選択し、「空白を埋め込む </>」ボックスをモーダルページにドラッグします。

8. 最初にコピーしたiframeコードを </>カスタム ボックスに挿入します。モーダルページの埋め込みボックスにチャットボットが表示されます。次の手順でサイズを変更します。

9. 実際のiframeのサイズは幅450ピクセル、高さ600ピクセルです。iframeのコード属性で設定されているiframeのサイズに合わせて、モーダルページのサイズを設定してください。

10. iframeを含む埋め込みボックスを選択し、モーダルページ全体に表示されるサイズを設定します。

11. モーダルページ設定オプションを選択します

12. パスを使用 設定を有効にします

チャットボットのダイアログを含むポップアップモーダルページを表示するボタンをウェブページに追加します。ボタンはページフッターに追加するのが最適です。ページフッターがない場合は、ここで追加できます（このチュートリアルではフッターの追加方法については扱いませんので、Studio.Design ドキュメントをご確認ください）。

13. チャットボットを追加したいページを選択します

14. ボックスをページフッターにドラッグします

15. ボタンをボックス

ご注意: Studio.Design で使用するボタンにはアイコンを表示できないため、適切なテキストをボタンに追加します。この例では、「サポート」と入力しました。

16. ボタンのサイズ、余白、パディング、形状、塗りつぶし色を変更するには、ボタン ボックスを選択し、上部のメニューの属性を使用して変更を加えます。この例では、デフォルトの黒いボタンの色をウェブページと一致する色に変更しました。

17. ボタンをクリックしたときにモーダルがアクティブになるようにするには、作成したモーダルをボタンを含むボックスにリンクする必要があります。

18. 選択ライブプレビュー でウェブページをプレビュー表示します

19. 出来上がり！ ライブページにボタンが表示されます！

20. ボタンをクリックすると、チャットボットのダイアログが表示されます。

これで、Studio.Design ウェブサイトにチャットボットが追加され、お客様がチャットボットとやり取りできるようになりました。