Localized Guides

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

ChatGPT でトレーニングされたカスタムチャットボットを Studio Web サイトに追加する方法。

Studio のウェブサイトページにカスタムトレーニング済みのチャットボットを埋め込む場合、AI Chatbot を使用して Studio に ChatGPT を追加する方法は次のとおりです。

スタジオのウェブサイトにチャットボットを追加する

AI Chatbot で

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

スタジオ内

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

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

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

モーダルページを作成しましょう。

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

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

モーダルを選択（通常）

空白のモーダルページがページの下にリストされます。

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

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

実際のiframeのサイズは幅450ピクセル、高さ600ピクセルです。モーダルページのサイズをiframeコード属性で設定されたiframeのサイズと一致するように設定します。

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

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

「パスを使用」設定を有効にする

次に、チャットボットダイアログを含むポップアップモーダルページを表示するボタンをWeb ページに追加します。最適な場所は、ページフッターにボタンを追加することです。ページフッターがない場合は、ここで追加できます (これはこのチュートリアルの範囲外です。フッターの追加方法については、Studio ドキュメントを確認してください)。