STUDIOにチャットボットを埋め込む方法【カスタムコードで設置】
ノーコードツール「STUDIO」で作ったサイトに、AIチャットボットを設置する手順を解説します。 STUDIOのカスタムコード機能を使えば、コードを1行貼るだけで設置できます。
⚠️ 最初に確認してください：カスタムコードは有料プラン限定です
STUDIOのカスタムコード機能は、有料プランのプロジェクトでのみ利用できます。 無料プランでは外部のスクリプトを追加できないため、残念ながらチャットボットを設置できません。
先にご自身のプランをご確認ください。無料プランのままFAQuickに登録しても、設置ができませんのでご注意ください。
準備するもの：埋め込みコード
チャットボットのサービスから発行される、次のような1行のコードを用意します。
FAQuickの場合、管理画面の「埋め込みコード」欄にある「コードをコピー」ボタンで取得できます。
設置手順
カスタムコードの設定を開く
STUDIOのエディタで、対象プロジェクトの設定から「カスタムコード」の項目を開きます。サイト全体に適用するか、特定のページだけに適用するかを選べます。
「</body> 内の末尾」に貼り付ける
コードの追加先として <head> と </body> が選べます。
</body> 内の末尾を選び、そこに埋め込みコードを貼り付けてください。
ここに入れたコードは、ページの読み込みが終わってから実行されるため、サイトの表示速度に影響しません。
公開する
設定を保存し、プロジェクトを公開（Publish）します。
公開サイトで確認する
公開後のサイトを開き、右下にチャットボタンが表示されていれば完了です。
💡 エディタのプレビューでは動きません
カスタムコードは、公開後のサイトでのみ動作します。エディタの編集画面やプレビューでチャットボタンが出なくても、故障ではありません。公開してから確認してください。
STUDIOのカスタムコードの制限
| 項目 | 制限 |
|---|---|
| 利用できるプラン | 有料プランのみ |
| 追加できるコードの数 | <head>・</body> それぞれ最大10個まで |
| 1つの欄の文字数 | 最大30,000文字 |
<head> に入れられるタグ | meta / link / style / script / noscript のみ |
チャットボットの埋め込みコードは1行だけなので、これらの制限に引っかかることはまずありません。
最新の仕様や画面の詳細は、STUDIO公式ヘルプもあわせてご確認ください。
表示されない時は
- 公開しましたか？ カスタムコードは公開後のサイトでのみ動作します。
- プランは有料ですか？ 無料プランではカスタムコード自体が使えません。
- 貼り付け先は
</body>ですか？<head>に入れても動作しますが、表示が遅くなる場合があります。 - ブラウザのキャッシュが残っている可能性があります。
Ctrl + F5で強制的に再読み込みしてください。