ウィジェットの設置

WordPressの管理画面で Plugins → Add New を開き、WPCode を検索してインストールし、有効化します。これがコードを書かないルートで、テーマを更新しても消えません — テーマファイルを直接編集した場合は消えます。

Code Snippets → + Add Snippet → Add Your Custom Code（New Snippet）と進みます。名前を HelpBrain などに設定し、Code Type を HTML Snippet にします。

コード欄にスニペットを貼り付けます。Insertion で Auto Insert を選び、Location を Site Wide Footer に設定します。

スニペットを Active に切り替え、Save Snippet を押します。新しいタブでサイトを開くと、チャットの丸いボタンが表示されているはずです。

Shopify管理画面で Online Store → Themes を開きます。公開中のテーマの ⋯ ボタンから Edit code を選びます。

左のファイル一覧の Layout から theme.liquid をクリックします。

ファイル末尾までスクロールして </body> を見つけ、そのすぐ上の行にスニペットを貼り付けます。

Save を押します。このレイアウトを使うストアフロントの全ページにチャットが表示されます。

Settings → Advanced → Code Injection と進みます。

Header ではなく Footer 欄にスニペットを貼り付けます。Squarespace側が </body> の直前に挿入してくれます。

Save を押し、公開サイトを開いて確認します。

Wixのダッシュボードで Settings → Custom Code（Advanced の下）を開き、+ Add Custom Code をクリックします。

コード欄に貼り付け、後で見つけられるよう HelpBrain などの名前を付けます。

Add Code to Pages を All pages に、Place Code in を Body - end に設定します。

Apply を押します。カスタムコードは公開サイトに反映されるため、エディタのプレビューではなく公開URLで確認してください。

Designerで Site Settings → Custom Code を開きます。

「before </body> tag」と書かれた Footer Code 欄にスニペットを貼り付けます。

パネル上部の Save Changes を押します。

サイトを公開します。ここが見落とされがちです。カスタムコードは公開時にはじめて反映され、Designerのプレビューでは決して動きません。

Project Settings（歯車アイコン）→ General を開き、Custom Code までスクロールします。

head側ではなく、End of <body> tag の欄に貼り付けます。

サイトを公開します。Webflowと同様、カスタムコードは公開サイトでのみ動作します。

Ghostの管理画面で Settings → Code injection を開きます。

Site Footer の欄にスニペットを貼り付けます。

Save を押します。記事を含むサイトの全ページに適用されます。

GTMのワークスペースで Tags → New → Tag Configuration → Custom HTML と進みます。

HTML欄に貼り付け、タグ名を HelpBrain にします。

Triggering で All Pages（Page View）を選び、タグを保存します。

Submit を押し、続けて Publish します。コンテナを公開するまで何も反映されません。

ルートレイアウトの <body> 内で next/script を使って読み込みます。afterInteractive にすることでクリティカルパスから外れます。

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://helpbrain.net/w/YOUR_BOT_KEY.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

index.html の </body> 直前に、通常のスニペットを追加します。React固有の作業はありません。ウィジェットは document.body に自分で取り付くので、アプリの再レンダリングの影響を受けません。

<script src="https://helpbrain.net/w/YOUR_BOT_KEY.js" async></script>

全ページで描画されるテンプレート（多くはフッターを含むもの）を開きます。

閉じ </body> タグのすぐ上の行に貼り付けます。

フッターを共通のインクルードで管理しているなら1か所で十分です。各ページが独立したファイルなら、それぞれに貼り付けてください。