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

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

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

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

SiteSpeakAI の場合

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

Studio.Design で

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

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

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

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

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

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

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

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

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

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

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

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

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

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