# 埋め込みの方法（自サイトで利用） - サイト: SHELP - カテゴリ: AIチャットボット - URL: https://shelp.jp/help/shelp-manual/embed-widget - サービスサイト: https://shelp.jp - 最終更新: 2026/07/21 18:35:48 > チャットボットは、スクリプトタグを貼るだけで自社サイトに埋め込めます。 --- ## 埋め込みの手順 1. 「設定画面」の「チャットボット設定」にアクセスします。 2. 「埋め込みコード」を押します。 ![Screenshot from 2026-06-10 13-10-25](https://cdn.shelp.jp/01KTKA20PWNNXVQZ8Z5QQ4GVHP/contents/01KTQV02DWXFTZYN4PQZQD3CB8/6a28e3b95a447.jpg "Screenshot from 2026-06-10 13-10-25") 3. スクリプトタグが発行されるのでコピーします。 ![Screenshot from 2026-06-10 13-12-12](https://cdn.shelp.jp/01KTKA20PWNNXVQZ8Z5QQ4GVHP/contents/01KTQV02DWXFTZYN4PQZQD3CB8/6a28e4208bef3.jpg "Screenshot from 2026-06-10 13-12-12") 4. 自社サイトのHTMLに貼り付けます。 5. 保存・公開すると、サイトにチャットボットが表示されます。 --- ## CMS・作成ツールを使っているサイトへの設置 HTMLファイルを直接編集できないサイトでも、多くの場合は次の方法でタグを設置できます。 - **CMS（WordPressなど）**：テーマのヘッダー編集機能や、ヘッダーにタグを挿入するプラグイン・設定項目を利用します - **ホームページ作成サービス**：「カスタムHTML」「外部スクリプトの埋め込み」などの機能からタグを追加します お使いのサービスでの具体的な手順は、各サービスのヘルプをご確認ください。 --- ## 自社サイトを持っていない場合 Webサイトを持っていない場合や、サイトにタグを設置できない場合でも、チャットボットは利用できます。 - **チャット専用ページ**：プロジェクトごとにチャットボット専用のページが用意されています。このURLをメールや資料でそのまま案内すれば、エンドユーザーはブラウザからすぐにチャットを利用できます。 - **FAQページ上のチャット**：FAQページを公開している場合、公開ページ上にもチャットボットが表示されます。 詳しくは「チャット専用ページ」「チャットボットのみ利用」を参照してください。 --- ## 注意 - \[設定-チャットボット設定\] - CORSドメイン名設定で設定されたURL以外からは埋め込めなくなります。全てのURLから許可する場合は空にすると埋め込むことが可能なため、開発時などは空で登録してください。 - チャットボットの上限回数を超えると、自動的にチャットボットが非表示になります。 - チャットボットを埋め込むと、内部でSHELPのAPIを呼び出します。 そのため、あなたのWEBサイトが、APIの実行をできる環境にない場合は利用できない場合があります。 --- ## オプションの説明 | **オプション名** | **必須** | **初期値** | **入力規則** | **説明** | | --- | --- | --- | --- | --- | | `data-project-name` | **○** | **\-** | **string** | **必ず自身のプロジェクトのPATHを設定してください。pathを変更時はこちらも変更する必要があります。** | | `data-bottom` | **\-** | `10px` | **string** | **チャットボットの下部からの距離を設定します。** | | `data-right` | **\-** | `10px` | **string** | **チャットボットの右からの距離を設定します。** | | `data-body-lock` | **\-** | `0` | **0\|1 (number)** | **チャットボットを表示時、ボディのスクロールを禁止するかどうかを設定します。
(0:ロックしない, 1:ロックする)** | --- ## CSSの変更 scriptを設置すると、あなたのサイトにチャットボットのDOMが生成され、挿入されます。 生成されたボタンなどの、CSSを独自に変更したい場合は、あなたのサイトのCSSファイルで上書きするように設定してください。 ※チャットボット内のCSSは変更できません。生成されたボタンや、チャットボットのフレームなどが変更できます。 --- ## 埋め込んだが表示されない場合 以下をまずは確認してください。 - スクリプトタグが正しく設置されているか。 - プロジェクトやチャットボットが公開・有効になっているか。 - 別ドメインの場合、CORSの設定がされているか。 - 埋め込んだWEBサイトにて検証ツールを開いてエラーが発生していないかを確認してください。 ### \- エラーが発生していた場合 以下のエラーコードから原因を特定できます。それでも解決しない場合はサポートよりご連絡ください。 | エラーコード | 表示メッセージ | 考えられる原因 | 対処方法 | | --- | --- | --- | --- | | \[00004177\] | 不正なアクセスです | アクセス元（リファラー）が許可ドメインと一致しない | 同様に、許可ドメインの設定に設置先サイトが含まれているか確認してください | | \[00005145\] | AIが設定されていません | 学習データから専用AIがまだ作成（学習）されていない | FAQ・ファイル・URLを登録し、AIの作成（学習）を実行してください | | \[00005146\] | チャットが非表示になっています | チャットの表示設定が無効になっている | 設定画面でチャットの表示を有効にしてください | | \[00005147\] | プランの制限を超えています | 月間チャット上限などプランの制限に達している | 翌月のリセットを待つか、プランのアップグレードをご検討ください | | \[00005148\] | 不明なエラーが発生しました | 上記以外の予期しないエラー | 時間をおいて再度お試しください。解消しない場合はサポートへお問い合わせください | --- このヘルプページは SHELP で作成されています。 SHELP: https://shelp.jp