ウィジェット設置ガイド

AiButtonはタグ1行をコピペするだけで設置できます。
お使いの環境に合わせた設置方法をご確認ください。

基本の埋め込みコード

管理画面で発行される埋め込みコードは以下の形式です。YOUR_SITE_ID の部分がサイトごとに異なります。

HTML

<script src="https://aibutton.jp/widget.js"
        data-site-id="YOUR_SITE_ID"
        async></script>

ポイント：このコードを </body> タグの直前に配置するのがおすすめです。ページの読み込み速度に影響を与えません。

インラインモード（埋め込み型）の設置

ページ内の特定の場所にチャットを埋め込みたい場合は、インラインモードを使用します。FAQページやLP内にチャットを配置したい場合に最適です。

フローティングモード（通常）

インラインモード（埋め込み）

1 表示場所のコンテナを用意

チャットを表示したい場所に、任意のIDを持つ空のdiv要素を配置します。

<div id="my-chat-container"></div>

2 埋め込みコードにオプションを追加

スクリプトタグに data-mode="inline" と data-container を追加します。

<script src="https://aibutton.jp/widget.js"
        data-site-id="YOUR_SITE_ID"
        data-mode="inline"
        data-container="my-chat-container"
        data-height="500px"
        async></script>

インラインモードのオプション

属性	説明	例
`data-mode`	表示モード（必須）	`"inline"`
`data-container`	表示先の要素ID（必須）	`"my-chat-container"`
`data-width`	チャットの幅（省略時: 100%）	`"100%"` / `"400px"`
`data-height`	チャットの高さ（省略時: 500px）	`"500px"` / `"600px"`

ヒント：フローティングモード（通常）とインラインモードは併用できます。同じサイトIDで両方を設置することで、FAQページはインライン、その他のページはフローティングという使い分けが可能です。

環境別の設置方法

WordPress

Wix

Shopify

STUDIO

Jimdo

Squarespace

静的HTML

React / Next.js

Vue / Nuxt

GTM

PHP

Ruby on Rails

WordPress

方法1 テーマエディタで追加（推奨）

1 WordPress管理画面 → 外観 → テーマファイルエディター
2 右側のファイル一覧から footer.php を選択
3 </body> タグの直前に埋め込みコードを貼り付け
4 ファイルを更新 をクリック

方法2 プラグインで追加

テーマファイルを直接編集したくない場合は、プラグインを使用します。

1 Insert Headers and Footers または WPCode プラグインをインストール
2 プラグイン設定画面を開く
3 Footer Scripts 欄に埋め込みコードを貼り付け
4 保存

方法3 functions.php で追加（開発者向け）

子テーマの functions.php に以下を追加します。

function add_aibutton_widget() {
    echo '<script src="https://aibutton.jp/widget.js" data-site-id="YOUR_SITE_ID" async></script>';
}
add_action('wp_footer', 'add_aibutton_widget');

Wix

1 Wixエディタを開き、左側メニューから設定をクリック
2 カスタムコード（またはトラッキングとアナリティクス）を選択
3 + カスタムコードを追加 をクリック
4 埋め込みコードを貼り付け
5
以下の設定を行う：
- • 名前：AiButton
- • コードを追加する場所：Body - 終了タグ
- • ページに追加：すべてのページ
6 適用をクリックし、サイトを公開

Shopify

1 Shopify管理画面 → オンラインストア → テーマ
2 現在のテーマの アクション → コードを編集
3 Layout フォルダ内の theme.liquid を開く
4 </body> タグの直前に埋め込みコードを貼り付け
5 保存をクリック

ヒント：チェックアウトページにも表示したい場合は、Shopify Plus が必要です。

STUDIO

1 STUDIOエディタでプロジェクトを開く
2 左上の STUDIO アイコン → Apps
3 Google Tag Manager または カスタムコード を選択
4 Body末尾 欄に埋め込みコードを貼り付け
5 保存してサイトを公開

Jimdo

注意：Jimdoでカスタムコードを追加するには、有料プラン（Grow以上）が必要です。

1 Jimdo管理画面 → 設定 → ヘッダー編集
2 ウェブサイト全体 タブを選択
3 </body> の前 欄に埋め込みコードを貼り付け
4 保存をクリック

Squarespace

1 Squarespace管理画面 → 設定 → 詳細設定
2 コードインジェクション を選択
3 Footer 欄に埋め込みコードを貼り付け
4 保存をクリック

静的HTML

HTMLファイルの </body> タグの直前に埋め込みコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サイトタイトル</title>
</head>
<body>
    <!-- ページコンテンツ -->

    <!-- AiButton ウィジェット -->
    <script src="https://aibutton.jp/widget.js"
            data-site-id="YOUR_SITE_ID"
            async></script>
</body>
</html>

React / Next.js

Next.js (App Router)

app/layout.tsx に Script コンポーネントを追加します。

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Script
          src="https://aibutton.jp/widget.js"
          data-site-id="YOUR_SITE_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Next.js (Pages Router)

pages/_app.tsx または pages/_document.tsx に追加します。

// pages/_app.tsx
import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://aibutton.jp/widget.js"
        data-site-id="YOUR_SITE_ID"
        strategy="lazyOnload"
      />
    </>
  )
}

Create React App / Vite

public/index.html（または index.html）に追加します。

<!-- public/index.html -->
<body>
  <div id="root"></div>
  <script src="https://aibutton.jp/widget.js"
          data-site-id="YOUR_SITE_ID"
          async></script>
</body>

Vue / Nuxt

Nuxt 3

nuxt.config.ts に追加します。

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://aibutton.jp/widget.js',
          'data-site-id': 'YOUR_SITE_ID',
          async: true,
          body: true
        }
      ]
    }
  }
})

Vue 3 (Vite)

index.html に追加します。

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script src="https://aibutton.jp/widget.js"
          data-site-id="YOUR_SITE_ID"
          async></script>
</body>

Google Tag Manager

1 GTM管理画面 → タグ → 新規
2 タグの種類：カスタムHTML を選択
3 HTMLに埋め込みコードを貼り付け
4 トリガー：All Pages（DOM Ready または Window Loaded）を選択
5 保存して公開

推奨：トリガーは「DOM Ready」を使用すると、ページ読み込み後すぐにウィジェットが表示されます。

PHP

共通フッターファイル（例：footer.php）に追加します。

<!-- footer.php -->
    <footer>
        <!-- フッターコンテンツ -->
    </footer>

    <script src="https://aibutton.jp/widget.js"
            data-site-id="YOUR_SITE_ID"
            async></script>
</body>
</html>

Laravel

resources/views/layouts/app.blade.php に追加します。

    
    <script src="https://aibutton.jp/widget.js"
            data-site-id="YOUR_SITE_ID"
            async></script>
</body>
</html>

Ruby on Rails

app/views/layouts/application.html.erb に追加します。

    <%= yield %>

    <script src="https://aibutton.jp/widget.js"
            data-site-id="YOUR_SITE_ID"
            async></script>
  </body>
</html>

トラブルシューティング

ウィジェットが表示されない

• site-id が正しく設定されているか確認してください
• 管理画面でサイトが「有効」になっているか確認してください
• 登録したドメインと実際のドメインが一致しているか確認してください
• ブラウザの開発者ツール（F12）でエラーが出ていないか確認してください

ウィジェットの位置がおかしい

• 他のチャットツールやポップアップと競合していないか確認してください
• CSSの z-index が他の要素と競合していないか確認してください
• 管理画面でボタン位置（左下/右下）を変更できます

特定のページだけに表示したい

GTMを使用して、特定のURL条件でのみタグを発火させることで実現できます。
または、JavaScriptで条件分岐を追加することも可能です。

設置でお困りですか？

ご不明な点がございましたら、お気軽にお問い合わせください。
設置のサポートも無料で承っております。

お問い合わせ無料で始める