WebSiteChat.ai

WebsiteChatの設置方法｜WordPress・Shopify・Studio・Wix・Jimdo

WebsiteChatでは、利用しているWebサイト作成サービスごとに異なるAI連携を行う必要はありません。

WebsiteChatから発行されたWidgetコードを、サイト全体で読み込まれる場所に追加します。

プラットフォームごとに違うのは、このコードを追加する場所と公開手順です。

登録、クロール、テストまでの流れは WebsiteChatの導入手順を最初から確認する 。

WebsiteChatから取得するWidgetコード

WebsiteChatの管理画面、「チャットボット」の「設置」からWidgetコードをコピーします。以下では、このコードを各プラットフォームのどこに追加するかだけを説明します。

WebsiteChat Widget（例）
<script src="https://websitechat.ai/widget.js" data-site="YOUR_SITE_KEY"></script>

YOUR_SITE_KEY はサイトごとに異なります。本番の値は管理画面の表示を使ってください。

WordPressにWebsiteChatを設置する方法

WebsiteChat専用プラグインは不要です。WP Headers and Footers を使い、Scripts in Header にWidgetスニペットを貼ります。この欄のスクリプトは、公開ページの <head> に出力されます。

  1. WordPress管理画面を開き、未導入なら WP Headers and Footers プラグインを入れる
  2. 設定 → WP Headers and Footers を開く
  3. Scripts in Header にWebsiteChatのWidgetコードを貼る
  4. 設定を保存する
  5. キャッシュプラグインを使っている場合はキャッシュを削除する
  6. 公開サイトで確認する

このスニペットは Scripts in Body には入れません。画面の説明どおり、Header欄のコードが <head> に出力されます。

保存後も表示されないときは、スニペットが欠けていないかを確認し、キャッシュ、CDN、セキュリティやJS最適化プラグインを順に見てください。

WordPressの設定 → WP Headers and Footersで、Scripts in HeaderにWebsiteChatのWidgetコードを追加している画面
WordPressの設定 → WP Headers and Footersで、Scripts in HeaderにWebsiteChatのWidgetコードを追加している画面

ShopifyにWebsiteChatを設置する方法

Shopifyでは、管理画面のオンラインストア / テーマから、ストア全体で読み込まれる領域にスニペットを追加します。1商品ページだけに置くと、他のページでは出ません。

  1. Shopify管理画面を開く
  2. オンラインストアのテーマ設定を開く
  3. テーマコード、またはサイト全体で読み込まれるカスタム領域を開く
  4. WebsiteChatのWidgetコードを追加する
  5. 保存する
  6. ストアフロント（公開店）で確認する

テーマを差し替えたあとは、同じ位置にコードが残っているかを確認します。

Shopify管理画面のテーマまたはコード編集画面にWebsiteChatのWidgetコードを追加している画面
Shopify管理画面のテーマまたはコード編集画面にWebsiteChatのWidgetコードを追加している画面

StudioにWebsiteChatを設置する方法

WebsiteChatが読むのは、公開したStudioサイトです。エディタ上の未公開内容は、公開するまでクロール対象になりません。

  1. Studioで対象サイトを開く
  2. サイト設定を開く
  3. カスタムコード（サイト全体に入る欄）を開く
  4. WebsiteChatのスニペットを貼る
  5. 公開する
  6. 公開URLで確認する

カスタムコードの可否はStudioのプランやサイト設定に依存することがあります。欄が見当たらない場合は、Studio側のプランと設定を先に確認してください。

Studioのサイト設定でカスタムコードにWebsiteChatのWidgetコードを追加している画面
Studioのサイト設定でカスタムコードにWebsiteChatのWidgetコードを追加している画面

WixにWebsiteChatを設置する方法

Wixダッシュボードのカスタムコードから追加します。サイトが複数ある場合は、公開中の正しいサイトを選んでください。

  1. Wixダッシュボードを開く
  2. カスタムコード（コードの追加）を開く
  3. WebsiteChatのスニペットを貼る
  4. 読み込み対象をサイト全体 / すべてのページにする
  5. 保存し、必要なら公開する
  6. 公開サイトのPCとスマートフォンで確認する

特定ページだけに限定すると、他のページではウィジェットが出ません。

Wixのカスタムコード設定にWebsiteChatのWidgetコードを追加している画面
Wixのカスタムコード設定にWebsiteChatのWidgetコードを追加している画面

JimdoにWebsiteChatを設置する方法

Jimdo Creatorは、カスタムHTMLとJavaScriptを追加できます。サイト全体にWebsiteChatを出す場合は、Edit Head を使います。

  1. Jimdo Creatorを開く
  2. Menu → Settings → Edit Head を開く
  3. WebsiteChatのWidgetスニペットを貼る
  4. 変更を保存する
  5. 公開サイトで確認する

Jimdoの製品ごとに、編集画面と機能は違います。Edit Head がなく、サイト全体にJavaScriptを追加する手段もない場合、この方法では設置できません。

Jimdo CreatorのEdit HeadにWebsiteChatのWidgetコードを追加している画面
Jimdo CreatorのEdit HeadにWebsiteChatのWidgetコードを追加している画面

設置後に確認すること

  • トップページにWidgetが出る
  • 下層ページにも出る
  • デスクトップ
  • スマートフォン
  • チャットが開く
  • テスト質問に返答がある
  • 管理画面以外の公開ブラウザで見ている

回答の中身やクロールの確認は WebsiteChat導入ガイド を見てください。

WebsiteChatを削除する場合

各プラットフォームの、サイト全体コードを置いた場所から同じスニペットを外します。保存または公開し、キャッシュがあれば消し、公開ページから消えたことを確認します。

フロントのWidgetを外しても、WebsiteChat側に取り込んだサイト知識は自動では消えません。サイトの無効化や削除は、コンソールのサイト管理で別途行います。

よくある質問

WebsiteChatはWordPress専用プラグインが必要ですか？
必須ではありません。発行されたWidgetコードを、WordPressサイト全体で読み込まれる場所に追加すれば利用できます。
WixやStudioでも同じWidgetコードを使えますか？
使えます。WebsiteChat側のコードは同じです。違うのは、各サービスでそのコードを追加する場所です。
Widgetコードは全ページに追加する必要がありますか？
サイト全体でチャットを出す場合は、全ページで読み込まれる位置に追加します。特定ページだけに置くと、他のページでは表示されません。
テーマやテンプレートを変更した場合はどうなりますか？
テーマやテンプレートに直接コードを入れていると、切り替え後に消えることがあります。新しいテーマ側へ入れ直すか、テーマに依存しにくいコード挿入欄を使ってください。
Widgetが表示されない場合は何を確認すればよいですか？
コードの保存、設置場所がサイト全体か、公開済みか、キャッシュ、スクリプト制限の順で確認してください。導入全体の確認はWebsiteChat導入ガイドを参照できます。