Messengerをウェブサイトにインストールするのに数分しかかかりません。インストール後は、顧客を歓迎し、オンボードし、アプリの忠実なusersとしてサポートできます。
Messengerを完全かつ安全にインストールするために必要な2つのステップは次のとおりです:
Messengerをインストールするには、Intercomのトライアルまたはサブスクリプションが必要です。
注意：新しいMessengerインストール体験が段階的に展開されています。ワークスペースで更新されたインストールフローが表示された場合は、ウェブサイトにMessengerをインストールするを参照してください。本記事は以前のインストールフローを反映しています。
ウェブ上のusers向けの初期Messengerインストール
まず設定 > チャンネル > Messenger > インストールに移動し、ウェブ用にインストールを選択します。
Messengerのインストール方法を選択する
次の方法のいずれかを選択してインストール方法を選んでください:
コードスニペット
React
Angular
Vue
Ember
WordPress
Google Tag Manager
Shopify
Segment
各方法を選択すると具体的な手順が表示されます。多くの方法では、より簡単にするためにnode package manager (NPM)インストールが提供されています。
開発者に手伝ってもらう（任意）
必要に応じて、チームメイト（エンジニアなど）にインストールを依頼できます。単にチームメイトを招待をクリックしてください。
メールアドレスを入力すると、チームのワークスペースに参加できる招待メールが送信されます。
招待されたチームメイトは、Advanced / Expertプランではライトシート、Essentialプランではフルシートが付与されます。Messengerのインストールに必要な最小限の権限が与えられます:
一般およびセキュリティ設定を管理できる
Messenger設定を管理できる
ワークスペースデータを管理できる
自分でインストールする
インストール方法にコードスニペット、React、Angular、Vue、EmberまたはShopifyを選択した場合、次のいずれかを選んでインストールを完了できます:
ログインしているusers向け - ログイン中のusers向けにMessengerをインストールします。Messengerは顧客名や過去の会話をデバイス間で表示します。
ログインしていないウェブサイト訪問者向け - 匿名のウェブサイト訪問者向けにMessengerをインストールします。会話はブラウザのクッキーに保存されます。
usersと訪問者の両方にMessengerをインストールすることを推奨します。
次に「Messengerへの接続を有効にする」をオンにしてください。
重要：これが無効の場合、Intercomへのすべてのリクエストが失敗します。Messenger APIはデフォルトで有効になっていません。Messengerインストールページに初めてアクセスすると、コード例がグレーアウトしているのがわかりますが、これはこのトグルを有効にするまでAPIがオフだからです。これにより、ワークスペースのMessenger APIが有効になり、トラフィックを受け入れ始めます。ユーザートラフィックを開始するにはこれを有効にする必要があります。
Messengerのセットアップが完了したら、JWTでの保護も推奨します！
選択した方法でIntercomをインストールする
選択した方法の指示に従ってください。例えば、WordPressを選択した場合は、以下の指示が表示されます。
コードスニペット、React、Angular、Vue、またはEmberの方法を選択した場合、NPMパッケージが提供され、コードスニペットをコピーして自分のアプリのコードベースに貼り付けられます。このスニペットにはあなたのユニークなワークスペースIDが事前に入力されています。
パッケージはNPMサイトでも直接見つけられます。
Node.js/Rails (Ruby)/Django (Python 3)、またはPHPアプリにコードスニペットを含めるなど、他にもいくつかのテンプレートがあります。シングルページアプリにコードスニペットを含めたり、rails gemを使ってスニペットをインストールすることも可能です。シングルページアプリケーション（SPA）の場合は、SPAインストールガイドに従い、その動的な性質に対応してください。
コードをコピーして、Messengerを表示したいすべてのページの</body>タグの前に貼り付けてください。
次に、現在ログインしているuserのメールアドレスまたはuser_idと登録日をIntercomに送信するようコードを編集してください。
コードを追加したら、アプリを開くとMessengerが表示されます。
ユーザーログアウト時にセッションを終了する
ユーザーがアプリからログアウトしたときに、顧客の会話をクリアするためにIntercomのシャットダウンメソッドを呼び出すことも忘れないでください。
共有コンピューターやブラウザを他の人と使うユーザーは、クッキーが有効な間、直近にログインしたユーザーの会話履歴を見ることができます。したがって、ユーザーのセッションが終了したとき（手動または自動ログアウト時）に適切にIntercomをシャットダウンすることが非常に重要です。
重要：
usersはuser_idまたはメールアドレスで識別できます。
user_idとメールアドレスの両方を送信した場合、識別にはuser_idが優先されます。
user_idを使用する場合でも、メールアドレスはIntercom内でusersを識別するために使用できるため、本人確認の有効化を推奨します。
Intercomにusersに関するカスタム属性を送信することもできます。
ウェブページで
zoomCSSを使用している場合は、Intercomのウィジェットに適用されないようにしてください。現在ログインしているuserの
user_id、email、user_hashは常にサーバーから動的に渡してください。スニペット内に単一のuserのIDをハードコードまたはキャッシュしないでください。訪問者がログアウトしている場合は、これらのフィールドを完全に省略し、匿名訪問者として追跡されるようにしてください。
外観と操作感のオプション
最初のオプションでは、Messengerをウェブサイトの訪問者に表示するか非表示にするかを起動前に選択できます。デフォルトは表示です。
2番目のオプションはMessenger設定へのリンクで、ここでMessengerの色やテーマを変更できます。
インストールの確認
インストールの確認をクリックして、インストールが成功したかどうかを確認できます。このボタンはMessengerが正常に検出された場合に成功通知を表示し、問題があればそれを示します。
Intercom Messengerをインストールしたのに正しく表示されない場合は、よくある修正方法を参照してください。追加のトラブルシューティングとして、広告ブロッカーやプライベートブラウジングなどのブラウザ制限がMessengerをブロックしていないか、またはパブリックサフィックスドメインを避けて適切な表示を確保しているかを確認してください。
次に進み、JWTでMessengerを保護してください。
注意：Messengerセキュリティがない場合、usersはMessengerで過去14日間の会話履歴のみを閲覧できます。詳細はこちら →
方法を学ぶ：
クライアント向けにIntercomをインストールする
Intercomワークスペースにアクセスできない場合は、ここでJavaScriptコードを取得できます👇 WORKSPACE_IDをIntercomアカウントのユニークなワークスペースIDに手動で置き換える必要があります。
<script>
var APP_ID = "WORKSPACE_ID"; // Replace this with your workspace 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
};
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/' + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>
created_atの値は、顧客がアプリ、サイト、またはサービスにサインアップした日付で、Unixタイムスタンプとして送信されるべきです。
EUおよびAUホスティングのワークスペース向けにIntercomをインストールする
EUまたはAUホスティングを使用している場合、追加のapi_baseパラメータを提供する必要があります。値は以下の表に記載されています。
データホスティング地域 |
|
アメリカ合衆国（US） | |
欧州連合（EU） | |
オーストラリア（AU） |
デスクトップ環境にIntercomをインストールする
技術的にはデスクトップアプリケーションにIntercomを含めることは可能ですが、公式にはデスクトップ環境をサポートしていません。Intercom Messengerはウェブ環境で動作するよう設計・開発されています（対応ブラウザのリストはこちら）。これらのウェブ環境は、Messengerが依存する特定のウェブ機能（例：JavascriptやCSS）をサポートしています。
Electronなどの技術を使うとウェブ技術でデスクトップアプリを作成でき、これらのアプリにIntercomをインストールすることも可能です。Electron環境でのIntercomインストールを支援するコミュニティライブラリもありますが、公式サポートはしていません。