Webサイト埋め込み・LINE公式アカウント連携の具体的ステップ
既存WebサイトへのSocratesチャットタグの設置方法から、LINE公式アカウントへのURL誘導でAIを動かす基本ステップまでを解説します。技術知識がなくても迷わず進められる手順書として活用してください。
高性能な AI も、お客様の目に触れなければ宝の持ち腐れです。設置の手間が少ないほど、導入後の改善に集中できます。
Socrates（ソクラテス）は、既存の Web サイトや LINE 公式アカウントに対し、数ステップの作業でシームレスに統合できます。
この記事では、Web サイトへの埋め込みと LINE 公式アカウントとの連携、それぞれの具体的な手順と選び方を解説します。エンジニアに依頼する前に読んでおくと、作業範囲の見積もりに役立ちます。
1. Web サイトへの埋め込み：2 種類の方法
ウィジェット設置（最も一般的）
管理画面から発行される「埋め込みタグ」を HTML の <body> 終了タグの直前に貼り付けるだけです。サイトの隅にチャットアイコンが表示され、クリックするとチャット画面が開きます。エンジニア経験がなくても、WordPress や Squarespace などの CMS であれば「カスタム HTML」エリアに貼り付けるだけで完了します。
設置後は管理画面の「許可ドメイン」に自社サイトのドメインを登録します。これにより、タグが流出しても他サイトでは動作しないセキュアな運用ができます。
インライン埋め込み（特定ページに常時表示）
FAQ ページや商品ページのコンテンツの一部として、チャット画面を常時表示させる方法です。ポップアップではなくページに溶け込んだ形でチャットが表示されるため、積極的に使ってほしいページに最適です。
ウィジェットとインラインは同じ埋め込みタグで切り替えられます。どちらの表示形式にするかは管理画面の設定で選択します。
2. LINE 公式アカウントとの連携：2 つのアプローチ
LINE と Socrates を連携させる方法は大きく 2 つあります。目的と技術的な準備状況に応じて選択します。
Messaging API 連携（直接対話）
お客様が LINE のトーク画面で送ったメッセージに、AI がその場で返信します。アプリを切り替えることなく LINE 内で接客が完結する最もシームレスな連携方式です。LINE Developers での設定が必要です。
専用 URL への誘導（ノーコード）
リッチメニューやボタンから Socrates 専用のチャットページへ誘導します。LINE Developers の設定不要でスタートできるため、まず試してみたい場合の入り口として最適です。
Messaging API 連携の流れ
Messaging API 連携は少し手順が増えますが、ユーザー体験は大幅に向上します。大まかな流れは以下の通りです。
- 1. LINE Official Account Manager で Messaging API を有効化
「設定 > Messaging API」から API 利用を開始します。 - 2. LINE Developers でキーを取得
チャネルシークレットとチャネルアクセストークン（長期）を発行・コピーします。 - 3. Socrates 管理画面に入力
「基本設定」に取得したキーを貼り付けると Webhook URL が発行されます。 - 4. LINE 側に Webhook URL を設定
LINE Developers の Webhook 設定欄に URL を貼り付けて保存します。 - 5. 応答設定を「手動チャット」に変更
LINE の自動応答をオフにすることで、Socrates の AI だけが返信するようになります。
詳細な手順はLINE Messaging API 連携マニュアルを参照してください。
3. どちらを選ぶか：判断フロー
- 今すぐ試したい・ノーコードで始めたい
→ 専用 URL への誘導から始める。リッチメニューに URL を設定するだけでスタートできます。 - LINE トーク画面で完結させたい・本格運用
→ Messaging API 連携。設定に 30 分〜1 時間程度かかりますが、ユーザー体験が大幅に向上します。 - Web サイトと LINE 両方で使いたい
→ 両方設定可能です。同じナレッジ・AI 指示文が Web と LINE で共有されるため、設定は 1 回で済みます。
よくある質問
Q1. 埋め込みタグを設置するのにエンジニアが必要ですか？
HTML 編集ができれば不要です。WordPress なら「カスタム HTML」ブロック、Squarespace なら「コードブロック」に貼り付けるだけです。エンジニアに依頼が必要なのは、JavaScript によるカスタム動作を実装する場合などです。
Q2. 複数のページに設置できますか？
はい。同じ埋め込みタグを複数ページに設置できます。許可ドメインに自社ドメインを登録しておけば、同ドメイン内の全ページで動作します。
Q3. LINE 連携後、既存の自動応答はどうなりますか？
Messaging API 連携時は、LINE の「応答設定」を「手動チャット」に変更する必要があります。これにより既存の自動応答がオフになり、Socrates の AI だけが返信するようになります。
Q4. Web と LINE で異なる AI 設定にできますか？
同一テナント内では同じ AI 設定が適用されます。Web 用と LINE 用で設定を分けたい場合は、テナントを別に作成する運用になります。
Q5. Messaging API の設定途中でつまずいたら？
詳細な手順と注意点はLINE Messaging API 連携マニュアルにまとめています。特にステップ 4（応答設定）の変更を忘れると AI が返信しないため、必ず確認してください。
コピー & ペーストで今日から始めることも、Messaging API で深く作り込むことも自在です。
あなたのサービスの成長フェーズに合わせて、最適な導入方法を選択してください。