メインコンテンツにスキップ

JavaScriptスニペットを使ってIntercom Messengerをウェブサイトに設置する方法 JavaScriptスニペットを使ってIntercom Messengerをウェブサイトに設置する方法

対応者:Matthew Krumwiede
1か月以上前に更新

JavaScriptスニペットを使ってIntercom Messengerをウェブサイトに設置する方法

JavaScriptスニペットを使ってIntercom Messengerをウェブサイトに設置する方法

シンプルなJavaScriptスニペットをウェブサイトに追加することで、Intercom Messengerを簡単に導入できます。これにより、匿名の訪問者(リード)とログインユーザーの両方に対応できます。

このガイドでは以下を説明します:

  • 訪問者・リード向けの設定方法

  • ログインユーザー向けの設定方法

  • 導入時のベストプラクティス


はじめに

導入には Workspace ID(ワークスペースID) が必要です。

以下の場所から確認できます:
設定 → インストール → Web


訪問者・リード向けのIntercom設置

ログイン機能がないサイト、またはユーザー登録前からMessengerを表示したい場合はこちらの方法を使用します。

ステップ1:JavaScriptスニペットを追加

以下のコードを、すべてのページの </body> タグ直前に貼り付けてください。

Writing

YOUR_APP_ID を実際のワークスペースIDに置き換えてください。


この設定でできること

  • サイトにMessengerが表示されます

  • 訪問者がやり取りを開始したりメールアドレスを入力すると、リードとして記録されます

  • リアルタイムでチャット対応が可能になります


ログインユーザー向けのIntercom設置

ユーザーアカウントがある場合は、ユーザー情報をIntercomに渡すことで、会話を特定ユーザーに紐づけることができます。

ステップ1:intercomSettings を更新

ユーザーがログインしている場合、以下のように情報を追加します:

Writing


推奨されるユーザー情報

  • user_id(推奨): 自社システム上の一意のID

  • email: ユーザーのメールアドレス

  • name: ユーザー名

これにより:

  • 会話が正しいユーザーに紐づく

  • Intercom上でユーザー履歴を確認できる


重要なポイント

この設定は ユーザーがログインしている場合のみ 読み込んでください。

未ログイン時は、訪問者向けの設定に戻します。


ベストプラクティス

1. ログアウト時の処理

ログアウト時には、前のユーザー情報が残らないようにリセットします:

Writing

Intercom('shutdown');


2. ユーザー情報の一貫性を保つ

  • user_idemail は常に同じ値を使用してください

  • セッションごとに値が変わらないようにします

これにより、ユーザーの重複作成を防げます。


3. すべてのページに設置する

従来のマルチページサイトでは、スニペットをすべてのページに設置してください。


4. リージョン設定(該当する場合)

US以外のリージョンを利用している場合は、api_base を追加します。

ヨーロッパ(EU)

Writing

オーストラリア(AU)

Writing

例:

Writing

window.intercomSettings = {
app_id: "YOUR_APP_ID",
api_base: "https://api-iam.eu.intercom.io"
};


トラブルシューティング

Messengerが表示されない場合

  • app_id が正しいか確認

  • スニペットが正しく設置されているか確認

  • JavaScriptエラーがないか確認

ユーザーが正しく表示されない場合

  • user_idemail が一貫しているか確認

  • セッションごとに値が変わっていないか確認


次のステップ

導入後は以下が可能になります:

  • Messengerのカスタマイズ

  • 自動メッセージの設定

  • 訪問者やユーザーとのチャット対応


必要であれば、よりフォーマルな日本語(企業向け)版や、スクリーンショット挿入位置付きの版も作成できます。

こちらの回答で解決しましたか?