Messengerをウェブサイトにインストールするのは数分で完了します。インストール後は、顧客を歓迎し、オンボードし、アプリの忠実なusersとしてサポートできます。
Messengerを完全かつ安全にインストールするために必要な2つのステップは次のとおりです。
Messengerをインストールするには、Intercomのトライアルまたはサブスクリプションが必要です。
ウェブ上のusers向けの初期Messengerインストール
まず設定 > チャンネル > Messenger > インストールに移動し、ウェブ用にインストールを選択します。
Messengerのインストール方法を選択する
以下の方法のいずれかを選んでインストール方法を決めてください。
コードスニペット
React
Angular
Vue
Ember
WordPress
Google Tag Manager
Shopify
Segment
各方法を選択すると具体的な手順が表示されます。多くの方法では、NPMインストールが用意されており、より簡単に導入できます。
開発者に依頼する（任意）
必要に応じて、チームメイト（エンジニアなど）にインストールを依頼できます。チームメイトを招待をクリックしてください。
メールアドレスを入力すると、チームのワークスペースに参加できる招待メールが送信されます。
招待されたチームメイトは、Advanced / Expertプランではライトシート、Essentialプランではフルシートが付与されます。Messengerインストールに必要な最低限の権限が与えられます。
一般設定およびセキュリティ設定を管理できる
Messenger設定を管理できる
ワークスペースデータを管理できる
自分でインストールする
インストール方法にコードスニペット、React、Angular、Vue、EmberまたはShopifyを選択した場合、以下のどちらかを選択してインストールを完了できます。
ログイン済みusers向け - ログイン中のusers向けにMessengerをインストールします。Messengerは顧客名や過去の会話をデバイス間で表示します。
ログインしていないウェブサイト訪問者向け - 匿名のウェブサイト訪問者向けにMessengerをインストールします。会話はクッキーを通じてブラウザに保存されます。
usersと訪問者の両方にMessengerをインストールすることを推奨します。
次に「Messengerへの接続を有効にする」をオンにしてください。
重要：これが無効の場合、Intercomへのすべてのリクエストが失敗します。Messenger APIはデフォルトで有効になっていません。Messengerインストールページに初めてアクセスすると、コード例がグレーアウトしているのはこのためです。このトグルを有効にすると、ワークスペースの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が表示されます。
userログアウト時にセッションを終了する
ユーザーがログアウトした際に、Intercomのシャットダウンメソッドを呼び出して会話をクリアすることを必ず行ってください。
共有コンピュータやブラウザを使うユーザーは、クッキーが有効期限切れになるまで直近のログインユーザーの会話履歴を見られる可能性があります。そのため、適切にIntercomをシャットダウンすることが非常に重要です（手動または自動ログアウト時）。
重要：
usersはuser_idまたはメールアドレスで識別できます。
user_idとメールアドレスの両方を送信した場合、識別にはuser_idが優先されます。
user_idを使う場合でも、メールアドレスはIntercom内でusersを識別するために使えますので、identity verificationの有効化を推奨します。
Intercomにusersに関するカスタム属性を送信することもできます。
ウェブページで
zoomCSSを使っている場合、Intercomのウィジェットが影響を受けないようにしてください。
外観オプション
最初のオプションは、Messengerをウェブサイトの訪問者に表示するか非表示にするかを選べます。デフォルトは表示です。
2つ目のオプションはMessenger設定へのリンクで、色やテーマを変更できます。
インストールの確認
インストールの確認をクリックして、インストールが成功したかどうかを確認できます。成功すると通知が表示され、問題があれば知らせてくれます。
Intercom Messengerをインストールして正しく表示されない場合は、よくある解決方法を参照してください。ブラウザの広告ブロッカーやプライベートブラウジングなどの制限、パブリックサフィックスドメインの回避も確認してください。
インストールの次のステップに進み、JWTでMessengerをセキュアにする。
注意：Messenger Securityがないと、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）をサポートしています。
ElectronElectron環境でのIntercomインストールを支援するコミュニティライブラリもありますが、公式サポートはしていません。