> ## Documentation Index
> Fetch the complete documentation index at: https://sitespeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

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

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

### SiteSpeakAIで

![Copy iFrame code](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/w7W2e6LRUCXwnPBB94PVsSplPsma1LNwV3ZHnexl.png)

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

### スタジオ内

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

![Studio dashboard](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/0cMLgdJ6wwSBFKrk1RlQY5xGAYkoMWqexY9ydsRg.png)

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

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

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

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

![Select pages](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/thmLfy9dFC1R4lNsgymPVITBkdZ4f6v4bEc9yiDl.png)

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

![Add page](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/XqO23lFfieKfiuAVHMr00VA7AWQ9Vo5dfF8i2e8r.png)

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

![Select modal](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/U3PwDPa5bjA1IxQDCMxtM5yyybrfHa4xFXdKsF7T.png)

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

![Blank modal](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/uZ1owARefl54OnfJLJz8HZNucWeFvzrrsabViBr6.png)

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

![Add embed box](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/8292S8HiiVtZZWRoIat8Pio8dmn2nVkmfWtE5wAZ.png)

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

![Insert iframe](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/VsRWofyOJKSJ0zBJgabr50lAwluE5MBJnrB3AB8G.png)

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

![Set modal size](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/GIJrhhaYZ0OS5Z3ZGPR65XM6HaRtLGFWWgIoETcN.png)

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

![Set embed size](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/KgAlBgnNA8ZpGvOkJwttEfme57XYORyR37EunMQ4.png)

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

![Modal settings](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/qu88nIr5m0ELQAKau1U80LeQCV1S3Bh4P8pYvCMH.png)

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

![Enable use path](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/srTXTvEr2SNZWIZxkA4QtgYaaKz9wBY4UE8q6xdB.png)

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

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

![Select page](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/qkwXmALVkIES6iW8UEowxsts7hOY7QtRqeEQH0FD.png)

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

![Drag box to footer](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/gZ1SyEjmzk5rFbfV1JEMtKbYtEtD5B5vpjazlK8Z.png)

15. ボタンをボックスにドラッグする

![Drag button](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/uIIve1aE4wNjtDtTxDrtBjXzWe7szIzaM0SHp1TK.png)

注意: Studioで使用されるボタンにはアイコンを表示できないため、ボタンに適切なテキストを追加します。この例では、Supportを追加しました。

![Button text](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/73tx7xFD0RtDqRJOKkGrIAIEJPRa9SBHApgyZuuu.png)

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

![Style button](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/OWTzOLOSuFNcE3FaajyUSsMEVOngq30QtV5ZUgu1.png)

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

![Link modal](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/gWk2IpTIoXyApjJoufYp4zdK49n1orjoN6PceImM.png)

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

![Live preview](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/mH5VJA7wmbYLumkfdHMN7oj0bw02vaDuhXfXNh3q.png)

19. できました!ライブ ページにボタンが表示されます。

![Button on page](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/TKyFp07vcdMn11X3EurAZm1uqqKX2HRDkgGDgZzk.png)

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

![Chatbot dialogue](https://nyc3.digitaloceanspaces.com/cdn.sitespeak.ai/uploads/help-center/images/3L6lMCl5Ath3qBQDLskCGQPqzuJWxgf2nlK9bkmb.png)

チャットボットがStudio Web サイトに追加され、顧客がチャットボットとやり取りできるようになりました。

***

<Card title="Ready to automate your customer service with AI?" icon="bot" href="https://sitespeak.ai/register?utm_source=docs&utm_medium=cta&utm_campaign=primary-cta" arrow="true" cta="Create Your AI Agent">
  Join over 1000+ businesses, websites and startups automating their customer service and other tasks with a custom trained AI agent.
</Card>