この記事を使ってIntercom Messengerをウェブサイトにインストールし、顧客データを安全に接続し、すべてが正常に動作しているかテストします。インストール後は、顧客を歓迎し、オンボードし、アプリの忠実なusersに育てることができます。
完全かつ安全なMessengerインストールの手順は次のとおりです:
インストールタイプを選択します。
Messengerをインストールしてテストします。
顧客データを接続しMessengerを保護します（Visitors & leadsのみを選択した場合はスキップ）。
注意：これは新しいMessengerインストール体験で、段階的に展開されています。まだワークスペースが切り替わっていない場合は、代わりにInstall Intercom for visitors and leads on webまたはInstall Intercom for users on webを使用してください。
インストールタイプを選択します
設定 > チャンネル > Messenger Live Chat > 概要に移動し、Websiteカードを見つけてウェブサイトにインストールを選択します。
インストールタイプを選択します
「チームはinboxでどの情報が必要ですか？」と尋ねられ、2つのオプションが表示されます:
Visitors & leads （最速インストール） — 会話はuserの詳細にリンクされません。後で追加設定をしてSigned-in usersを識別できます。
Signed-in users, visitors & leads — Signed-in usersからの会話には関連情報が含まれ、チームがパーソナライズされたサポートを提供するためのコンテキストを得られます。フロントエンドとバックエンドの変更が必要です。
各カードはそのオプションでチームがInboxで見る内容のプレビューを表示し、比較できます。ビジネスに合ったオプションを選択し、続行をクリックしてください。
ヒント：Visitors & leadsは最速セットアップです。チームの準備ができたら、いつでもSigned-in users, visitors & leadsの設定を完了できます。
開発者に手伝ってもらう（任意）
必要に応じて、エンジニアなどのteammateにインストールを依頼できます。Invite teammateをクリックし、メールアドレスを入力すると、Messengerインストールに必要な最小権限でワークスペースに参加する招待が送信されます。
一般およびセキュリティ設定を管理可能
Messenger設定を管理可能
ワークスペースデータを管理可能
Messengerのインストール方法を選択する
次の方法のいずれかを選択してインストール方法を決定します:
カスタムコードを使用する
コードスニペット
React
Angular
Vue
Ember
または次の統合のいずれかを通じて
WordPress
Google Tag Manager
Shopify
Segment
これらのオプションのいずれかをクリックすると選択され、その方法の具体的な手順が表示されます。多くの方法でNode.js Package Manager（NPM）インストールが利用可能で、より簡単に行えます。
注意：シングルページアプリケーション（SPA）では、標準のスニペット方式を調整する必要があります。IntercomのSPAインストールガイドに従い、動的なページ変更を正しく処理してください。
選択した方法でIntercomをインストールする
選択した方法の指示に従ってください。Code snippet、React、Angular、Vue、またはEmberを選択した場合は、NPMパッケージを参照するコードスニペットが提供されます。このスニペットにはあなたのユニークなワークスペースIDが事前に入力されています。
コードをコピーし、Messengerを表示したいすべてのページの</body>タグの前に貼り付けてください。
次に、現在ログインしているuserのメールアドレスまたはuser_idと登録日をIntercomに送信するようコードを編集します:
var APP_ID = "your_app_id";
window.intercomSettings = {
app_id: APP_ID,
name: "Jane Doe", // Full name
email: "customer@example.com", // Email address
created_at: 1312182000 // Signup date as a Unix timestamp
};コードを追加した後、アプリを開くとMessengerが表示されます。
重要：ユーザーを識別する際は次の点に注意してください:
ユーザーはuser_idまたはメールアドレスで識別できます。
user_idとメールアドレスの両方を送信した場合、識別にはuser_idが優先されます。
現在ログインしているuserのuser_id、email、user_hashはサーバーから動的に渡し、スニペット内に単一ユーザーのIDをハードコードまたはキャッシュしないでください。
インストールをテストする
インストールをテストをクリックしてMessengerが期待通りに動作するか確認してください。
合格すると「Messengerがインストールされました」という確認が表示されます。
Visitors & leadsのパスでは、「訪問者はサイトから会話を開始できます。詳細を共有するまで、ランダムな名前でInboxに表示されます。次にMessengerをカスタマイズしてブランドに合わせて色、ランチャー、歓迎メッセージを調整しましょう。」と表示されます。
Signed-in users, visitors & leadsのパスの場合は、以下の顧客データ接続セクションに進み、インストールを完了してください。
ここから後で行うかMessengerをカスタマイズをクリックしてスタイリングに直接進めます。
ユーザーログアウト時にユーザーセッションを終了する
アプリからログアウトした際に顧客の会話をクリアするため、Intercomのシャットダウンメソッドも呼び出してください:
Intercom('shutdown');ヒント：ログアウトイベントハンドラー内または同等の場所でIntercom('shutdown')を呼び出してください。
アプリがユーザーのセッションを終了する場所ならどこでも呼び出してください。これによりIntercomクッキーが即座にクリアされ、次の訪問者は新しい匿名セッションを開始します。
共有コンピューターやブラウザーを使うユーザーは、クッキーが期限切れになるまで直近のログインユーザーの会話履歴を見られるため、すべてのログアウト時にこの呼び出しが重要です。
顧客データを接続する
Visitors & leadsのみを選択した場合はこのセクションをスキップしてください — 上記のテストが完了すればインストールは完了です。Signed-in users, visitors & leadsを選択した場合は、以下でユーザーデータ属性の接続を完了してください。
注意：Signed-in users, visitors & leadsのパスはフロントエンドとバックエンドの両方のコード変更が必要です。このセクションを完了するには開発者権限が必要です。
顧客データの安全を確保するため、各顧客のトークンを生成する
サーバーで、ログイン中の各userの署名付きJSON Web Token（JWT）を生成します。例：Nodeの場合:
const jwt = require('jsonwebtoken');
const token = jwt.sign(
{ user_id: user.id, email: user.email },
process.env.INTERCOM_SECRET_KEY,
{ algorithm: 'HS256', expiresIn: '1h' },
);
このステップにはワークスペースの秘密鍵が必要です。画面に（マスクされた状態で）表示されます。この鍵はサーバーに保管し、ブラウザやアプリのコードに含めないでください。
注意：鍵はプラットフォームごとにスコープされ、ワークスペースは複数持つことができます。Messengerのセキュリティ設定から鍵の作成、ローテーション、デコードが可能です。
更新したスニペットをウェブサイトに追加する
すでにインストールしたスニペットに1行追加します。メールはトークンから抽出され、MessengerのIDを安全に表現します。
Intercom({
app_id: 'your_app_id',
intercom_user_jwt: token,
});
この変更を展開するすべての場所に適用されるため、同じコードベースを共有する場所も接続されます。
インストールをテストする
インストールをテストをクリックしてMessengerが期待通りに動作するか確認してください。
💡 ヒント：さらにサポートが必要ですか？コミュニティフォーラムでIntercomサポートやコミュニティの専門家から回答や支援を得られます。
関連記事