Help Center

サービス別 Widget 設置ガイド

WordPress・Wix・STUDIO など、よく使われる Web サービスへの Widget 設置手順をサービスごとに解説します。

ヘルプセンターに戻る

始める前に：Widgetコードの取得

各サービスへの設置前に、まず knotic コンソールから Widget の script タグを取得してください。

  1. 1Console の Bot管理 を開き、設置したいBotの「Bot設定を開く」をクリック
  2. 2Widget タブを開き「Widgetを有効にする」をオンにして設定を保存
  3. 3Widgetトークン管理セクションで「トークン再発行」を実行（初回のみ）
  4. 4発行された script タグ（<script src="..." data-bot-id="bot_xxxx" data-widget-token="wt_xxxx"></script>）をコピー。ボタン位置や表示モードはコンソールの設定から変更できるため、scriptタグには不要です
  5. 5トークンは発行時の1回のみ表示されます。必ず安全な場所に控えてください
  6. 6許可オリジンに設置先サイトのURL（例: https://example.com）を登録してから保存

位置・モードなどの詳細設定はコンソールのWidget設定から変更できます。scriptタグへの上書きオプションは こちら を参照してください。

1

WordPress（WPCode プラグイン使用・推奨）

サイト全体への設置には「WPCode」プラグインを使う方法が最もシンプルで確実です。テーマファイルの直接編集より安全で、テーマ更新の影響を受けません。

プラン制限：WordPress.com での利用は Business プラン以上が必要（無料・Personal プランはカスタムコード非対応）

  1. 1【プラグインのインストール】WordPress 管理画面左メニュー「プラグイン」→「新規プラグインを追加」→「WPCode」で検索 → 「今すぐインストール」→「有効化」
  2. 2【コードの設置】左メニューに追加された「Code Snippets」→「Header & Footer」を開く
  3. 3「Footer」欄（ページ下部・</body> 直前に挿入）に script タグを貼り付けて「Save Changes」
  4. 4全ページに自動適用されます。特定ページのみに設置したい場合は「Code Snippets」→「Add Snippet」から新規スニペットを作成し、「Smart Conditional Logic」で対象ページを絞り込む
  5. 5【確認】設置後、対象ページを開いてWidgetボタンが右下（または設定した位置）に表示されているか確認
2

WordPress（ブロックエディタのカスタムHTMLブロック）

特定のページや投稿だけに Widget を表示したい場合は、ブロックエディタのカスタムHTMLブロックを使う方法もあります。ページ本文内への挿入のみ対応です。

  1. 1対象ページまたは投稿の編集画面を開く
  2. 2ブロック追加ボタン（＋）をクリック →「カスタムHTML」ブロックを検索して選択
  3. 3表示されたテキストエリアに script タグを貼り付け
  4. 4プレビューで表示を確認し、「公開」または「更新」を保存

注意：<head> セクションへの挿入はこの方法ではできません。サイト全体への設置はWPCodeプラグインを使用してください

3

Wix（カスタムコード設定）

Wix はサイトダッシュボードの「カスタムコード」から script タグを全ページまたは特定ページに設置できます。エディタからではなく、ダッシュボードの Settings 画面から操作します。

  1. 1Wix サイトダッシュボード（管理画面）にログイン（wix.com からサイトを選択）
  2. 2左メニューの「Settings（設定）」→「Custom Code（カスタムコード）」を開く（「Development & integrations」セクション内）
  3. 3「+ Add Custom Code（カスタムコードを追加）」をクリック
  4. 4script タグを貼り付け、わかりやすい名前（例: knotic-widget）を入力
  5. 5「Place Code in」を「Body – end（</body> 直前）」に設定
  6. 6「Add Code to Pages」で「All Pages（すべてのページ）」または特定ページを選択
  7. 7「Apply（適用）」→ 画面上部の「Publish（公開）」をクリックして変更を反映

注意：Google Analytics・Facebook ピクセルなどは専用の「Marketing Integrations（マーケティング統合）」機能から設定してください

4

STUDIO（カスタムコード設定）

STUDIO は有料プランでサイト全体または特定ページへのカスタムコード挿入に対応しています。デザインエディタのキャンバス外（余白部分）をクリックして設定パネルを開きます。

プラン制限：カスタムコード機能は有料プラン（STARTERプラン以上）のみ利用可能。無料プランは非対応

  1. 1STUDIO デザインエディタを開き、キャンバスの外側のグレーの余白部分をクリック
  2. 2右パネルに設定が表示されたら「Site（サイト）」タブを選択（全ページに適用する場合）
  3. 3「Body終了タグの直前」のコード入力欄を展開し、script タグを貼り付け
  4. 4特定ページのみに適用する場合は「Page（ページ）」タブを選択して同様の操作
  5. 5エディタ右上の「公開」ボタンをクリックして変更を反映

注意：エディタのプレビュー画面では Widget は動作しません。公開後の実際のサイト URL で動作確認してください。1フィールドあたり最大3,000文字。<script> / <link> / <meta> / <style> タグのみ対応

5

Squarespace（コードの挿入）

Squarespace はサイト設定の「コードの挿入（Code Injection）」からサイト全体に script タグを設置できます。

プラン制限：Personal プランはコードの挿入非対応。Core・Advanced・Business・Commerce 以上が必要

  1. 1Squarespace 管理パネル左メニューの「設定（Settings）」→「詳細設定（Advanced）」→「コードの挿入（Code Injection）」を開く
  2. 2「フッター（Footer）」欄に script タグを貼り付け（</body> 直前に挿入され全ページに適用）
  3. 3「保存（Save）」をクリック

特定ページのみ設置したい場合：ページ編集画面の歯車アイコン（ページ設定）→「詳細設定（Advanced）」タブ → フッターコード欄に貼り付けて保存。 またはページ編集中にブロック追加 →「コード（Code）」ブロックを挿入する方法もあります。

6

Webflow（Project Settings のカスタムコード）

Webflow はデザイナー画面の「Project Settings（プロジェクト設定）」からサイト全体にコードを設置します。

プラン制限：カスタムコード機能はWebflowの有料サイトプラン（Basic以上）のみ対応

  1. 1Webflow デザイナーを開き、画面上部左側の「Project Settings（プロジェクト設定）」アイコン（歯車）をクリック
  2. 2「Custom Code（カスタムコード）」タブを開く
  3. 3「Footer Code（フッターコード）」欄に script タグを貼り付けて「Save Changes（変更を保存）」
  4. 4デザイナーに戻り、右上の「Publish（公開）」ボタンから公開して変更を反映

特定ページのみ設置：左パネルの「Pages（ページ）」メニューで対象ページにカーソルを合わせ設定アイコン →「Custom Code」タブ →「Before </body> tag」欄に貼り付け。

注意：<html> / <head> / <body> タグ自体は記述しないこと（レイアウト崩れの原因になります）

7

Jimdo（Widget/HTML 要素）

Jimdo の Creator バージョンでは「Widget/HTML」要素から script タグを設置できます。

プラン制限：対応しているのは旧バージョンの「Jimdo Creator」のみ。新しい「Jimdo Website Builder（Dolphin）」は任意のHTML/script設置に非対応

  1. 1Jimdo Creator の編集モードで設置したいページを開き、「Edit（編集）」ボタンをクリック
  2. 2挿入したいコンテンツエリアにカーソルを当てて「コンテンツを追加」→「その他の要素」→「Widget / HTML」を選択
  3. 3表示されたコード入力欄に script タグを貼り付けて「保存」
  4. 4サイト全体に表示する場合: Jimdo Creator 設定メニュー →「ヘッダーを編集（Edit Head）」にコードを追加するか、全ページ共通のヘッダー・フッターエリアにWidget/HTML要素を追加

注意：Jimdo Creator は日本市場での新規提供を終了している場合があります。ご利用中のバージョンをご確認ください

8

Shopify（テーマコード編集）

Shopify はテーマファイル「theme.liquid」を直接編集して script タグを設置します。Shopify 管理画面の「オンラインストア」から操作します。

  1. 1Shopify 管理画面の左メニュー「オンラインストア（Online Store）」→「テーマ（Themes）」を開く
  2. 2現在使用中のテーマの「・・・（その他）」→「コードを編集（Edit code）」をクリック
  3. 3左パネルの「layout」フォルダ内の「theme.liquid」をクリックして開く
  4. 4Ctrl+F（Mac は Command+F）で「</body>」を検索して該当箇所を探す
  5. 5</body> タグの直前の行に script タグを貼り付けて「保存（Save）」
  6. 6Shopify ストアのページを開いて Widget が表示されていることを確認

注意：theme.liquid の直接編集はテーマ更新時にコードが上書きされるリスクがあります。更新前にバックアップを取ってください。チェックアウトページへの設置には Shopify Plus 契約が必要です

9

BASE（HTMLタグ管理App）

BASE では HTMLタグ管理App をインストールすることで、サイト全体の <head> に script タグを追加できます。無料で利用できます。

  1. 1BASE 管理画面の「Apps（アプリ）」→ 検索欄で「HTMLタグ管理」を検索 → インストール
  2. 2インストール後、「Apps」→「HTMLタグ管理」を開く
  3. 3「タグの種類」は「カスタムタグ（その他）」を選択
  4. 4コード入力欄に script タグを貼り付けて保存
  5. 5設定したタグは全ページの <head> に自動挿入されます

注意：HTMLタグ管理App は <head> 内への挿入のみ対応（<body> 末尾への挿入は不可）。ページを絞り込む機能はなく、全ページ一括適用のみです。カスタムタグが反映されない場合は、App 設定から一度削除して再登録してください

10. 設置が難しい・非対応のサービス（STORES・Google Sites）

以下のサービスは任意の script タグを自由に埋め込む機能を持っていないため、knotic の Widget を設置することができません。

  • •STORES（stores.jp）：任意の外部 script タグを埋め込む機能がありません。広告タグ機能は Google 広告・Facebook Pixel のみ対応で、任意の Widget コードには非対応です
  • •Google サイト（Google Sites）：「埋め込み → コードの埋め込み」から HTML を挿入できますが、セキュリティ上の理由から script タグはサンドボックス化された iframe 内で無効化されます。外部ウィジェットは動作しません

これらのサービスをお使いで Widget を設置したい場合は、WordPress・Wix・STUDIO・Squarespace・Webflow などへの移行をご検討ください。または、knotic の「Hosted URL（公開チャットURL）」機能を使って独立したチャットページを公開し、そのリンクをサイトに設置する方法もあります（Standardプラン以上）。

scriptタグの上書きオプション（任意・通常は不要）

ボタン位置・表示モードはコンソールから変更できます。 scriptタグを修正・再設置する必要はなく、コンソール画面で保存するだけで即時反映されます。

scriptタグには以下の任意属性を追加することで、コンソール設定を上書きすることができます。 複数サイトへの同一Botの設置でサイトごとに見た目を変えたい場合などに使用します。

属性値説明
data-positionright-bottom / right-topボタン表示位置の上書き
data-modeoverlay / redirect / bothチャット起動モードの上書き

これらの属性は省略が基本です。省略した場合はコンソールの設定値が自動的に読み込まれます。 必要な場合のみ、通常の埋め込みscriptタグに追記してください。

設置後の動作確認チェックリスト

script タグを設置したら、以下の項目を順番に確認してください。

  • 対象サイトをブラウザで開き、画面の右下（または設定した位置）にWidgetボタンが表示されているか
  • Widgetボタンをクリックしてチャット画面が開くか
  • 実際に質問を入力して回答が返ってくるか
  • 回答内に引用リンクが表示されているか（引用表示をオンにしている場合）

表示されない場合：Console の Bot 管理 → Widgetトークン管理で、許可オリジンに設置先の URL（https:// から始まるドメイン）が正しく登録されているか確認してください。それでも解決しない場合はブラウザの開発者ツール（F12）→「Console」タブでエラーを確認し、サポートへお問い合わせください。

不明な点はコンソールからお問い合わせください。
コンソールへ