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