ヘルプセンター / 設定マニュアル
03 初期セットアップ

ウィジェット埋め込み手順

自社のウェブサイトに、AI BOOTH のチャット画面を設置できる機能です。設置すると、サイトを訪れたお客様が画面右下の小さなアイコンをクリックして、AI に質問できるようになります。

この機能でできること

自社のウェブサイトに、AI BOOTH のチャット画面を設置できる機能です。設置すると、サイトを訪れたお客様が画面右下の小さなアイコンをクリックして、AI に質問できるようになります。

埋め込みコードを 1 行コピーして HTML に貼り付けるだけで完了します。プログラミングの知識は不要です。

設定の前に準備するもの

  • 自社サイトの管理画面ログイン情報(WordPress / Shopify / Wix / 自社開発サイトなど)
  • HTML ファイルを編集できる権限(管理者またはサイト編集者)

用語解説

用語 わかりやすく言うと
埋め込みコード サイトに貼り付ける短い文字列。これを貼るとチャット画面が表示される
ウィジェット 画面右下に出てくるチャット用の小さなアイコン
</body> タグ HTML ファイルの一番下にある終わりの目印
CMS サイトを管理する仕組み(WordPress や Shopify など)

ステップ 1: 埋め込みコードを取得する

1-1. 設置ページを開く

左サイドバー「設置・連携」→「ウィジェット設置」をクリック。または直接 /admin/install にアクセス。

ウィジェット設置画面

1-2. コードをコピーする

画面中央に黒い背景のコードボックスが表示されます。コードは以下のような形式です。

<script src="https://ai-concierge.scirnex.com/widget.js" data-tenant-id="..." async></script>

ボックス右上の 「コピー」 ボタンをクリックすると、自動でクリップボードにコピーされます。

ステップ 2: サイトにコードを貼り付ける

利用しているサイトの種類に応じた手順を選んでください。

2-A. WordPress の場合

  1. WordPress 管理画面にログイン
  2. 左メニュー「外観」→「テーマファイルエディター」をクリック
  3. 右側のファイル一覧から footer.php を選択
  4. ファイル内の </body> を探す(だいたい一番下にあります)
  5. その直前にコピーしたコードを貼り付け
  6. 画面下の「ファイルを更新」ボタンをクリック

ポイント: 「Insert Headers and Footers」などのプラグインを使っている場合は、プラグインの「Footer」欄に貼り付けても OK です。

2-B. Shopify の場合

  1. Shopify 管理画面にログイン
  2. 左メニュー「オンラインストア」→「テーマ」をクリック
  3. 現在使っているテーマの「アクション」→「コードを編集」を選択
  4. 左側のファイル一覧から theme.liquid を開く
  5. ファイル内の </body> を探す
  6. その直前にコピーしたコードを貼り付け
  7. 右上の「保存」ボタンをクリック

2-C. 自社開発サイト / 静的 HTML の場合

すべてのページ共通の </body> 直前にコードを貼り付けてください。共通テンプレート(ヘッダー・フッターを共通化するファイル)があれば、そこに 1 回貼るだけで全ページに反映されます。

2-D. Google タグマネージャー(GTM)経由の場合

  1. GTM の管理画面で「新しいタグ」を作成
  2. タグの種類は「カスタム HTML」を選択
  3. HTML 欄にコピーしたコードを貼り付け
  4. トリガーは「All Pages」を選択
  5. 「保存」→「公開」をクリック

ステップ 3: 動作確認

ご自身のサイトを開いて、画面右下にチャット用の丸いアイコンが表示されているか確認してください。

アイコンをクリックするとチャット画面が開きます。試しに何か質問を送信し、AI が回答すれば設置成功です。

表示位置やデザインの変更

設置直後はデフォルトの色・位置(右下・青系)で表示されます。色や位置を変更したい場合は /admin/install からカスタマイズできます。

変更できる項目
メインカラー ブランドカラーに合わせて変更可能
アイコン画像 自社ロゴをアップロード可能
表示位置 右下 / 左下 / 右中央など
初回メッセージ 「ご質問はこちら」など自由文
表示する曜日・時間 営業時間のみ表示などの制御可能

ウィジェットを一時的に非表示にしたい場合

  1. /admin/install を開く
  2. 画面下部の「ウィジェットを無効化」ボタンをクリック
  3. 確認ダイアログで「OK」を押す

埋め込みコードを HTML から削除しなくても、管理画面の操作だけで非表示にできます。再開する時は「有効化」ボタンを押すだけです。

よくある質問

質問 回答
設置してもアイコンが表示されません ブラウザのキャッシュをクリアして再読み込みしてください。広告ブロッカーが原因の場合もあります
特定のページだけ非表示にできますか? はい、/admin/install で URL ごとに表示・非表示を制御できます
スマホでも表示されますか? はい、自動的にスマホ用のレイアウトに切り替わります
表示位置を左下に変えたい カスタマイズ画面で「左下」を選択してください
同じコードを複数サイトに貼ってもいい? プランごとに「サイト数」の上限があります。Light は 1 サイト、Standard 以上は複数可能
サイトの表示速度に影響しますか? ほぼ影響ありません(非同期読み込みのため、ページ表示後にチャットが読み込まれます)

それでも解決しない時

info@scirnex.com までお気軽にお問い合わせください。

このページで解決しなかったら

このページに載っていない操作・トラブル・改善要望もすべて受け付けています。
営業日 24 時間以内 にご返信します。

info@scirnex.com にメール LP の問合せフォーム