Messengerをウェブサイトにインストールするのに数分しかかかりません。インストール後は、訪問者やleadsを迎え入れ、チャットし、顧客に変換できます。
訪問者/leads と Users の違い
ウェブサイトの訪問者はMessengerを通じてコミュニケーションを取るとleadsになりますが、usersはウェブサイトやアプリにログインしています。主な違いは彼らについて知っている情報量です。ログイン中のusers向けにIntercomをインストールする場合は、こちらのガイドを使用してください。MessengerをインストールするにはIntercomのトライアルまたはサブスクリプションが必要です。
注意：新しいMessengerインストール体験が段階的に展開されています。ワークスペースで更新されたインストールフローが表示された場合は、ウェブサイトにMessengerをインストールするを参照してください。本記事は以前のインストールフローを反映しています。
ウェブ上の訪問者とleads向けの初期Messengerインストール
インストール方法を選択する前に、ウェブサイトの要件を考慮してください。
すべての訪問者がMessengerにアクセスできる標準的なウェブサイト - ログイン中・ログアウト中の訪問者の両方にMessengerを利用可能にしたい場合に選択してください。
Messengerをログイン中のusersのみに制限した標準的なウェブサイト - Messengerのアクセスを認証済みusersのみに制限したい場合に選択してください。
シングルページアプリケーション（SPA）インストール - ウェブサイトがシングルページアプリケーションとして構築されている場合にこの特定の方法を使用してください。
まず設定 > 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を選択した場合、ログインなしのウェブサイト訪問者向けにIntercomをインストールする選択肢があります。
usersと訪問者の両方にMessengerをインストールすることを推奨します。
選択した方法でIntercomをインストールする
選択した方法の指示に従ってください。
コードスニペット、React、Angular、Vue、またはEmberの方法を選択した場合、NPMパッケージが提供され、コードスニペットをコピーして自分のアプリのコードベースに貼り付けられます。このスニペットはあなたのユニークなワークスペースIDで事前に設定されているので、すぐに使えます。
パッケージはNPMサイトでも直接見つけられます。
他にもBasic JavaScriptやSingle-page appにコードスニペットを含めるテンプレートや、Rails gemを使ってスニペットをインストールする方法があります。
コードをコピーして、Messengerを表示したいすべてのページの</body>タグの直前に貼り付けてください。
コードを追加したら、訪問者としてウェブサイトを表示するとMessengerが表示されます。
注意：ログアウト中の訪問者には、スニペットにuser_id、email、user_hashを含めず、app_idのみを含めてください。匿名訪問者に別のセッションのIDを渡すとプライバシー問題が発生します。Messengerが複数のdomainでインストールされている場合、クッキーのドメイン間転送方法を検討し、各訪問者が他のusersのIDを漏らさず一意かつ一貫して識別されるようにしてください。
ウェブページでzoom CSSを使用している場合、Intercomのウィジェットが影響を受けないようにしてください。
外観オプション
最初のオプションは、Messengerをウェブサイトの訪問者に表示するか非表示にするかを選べます。デフォルトは表示です。
2つ目のオプションはMessenger設定へのリンクで、色やテーマを変更できます。
インストールを確認する
インストールを確認をクリックして、インストールが成功したか確認できます。成功すると通知が表示され、問題があれば知らせてくれます。
Intercom Messengerをインストールして正しく表示されない場合は、よくある解決方法をご覧ください。
使い方を学ぶ：
クライアント向けに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
};
</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>
EUおよびAUホスティングのワークスペース向けにIntercomをインストールする
EUまたはAUホスティングを使用している場合、追加のapi_baseパラメータを指定する必要があります。値は以下の表に記載されています。
データホスティング地域 |
|
アメリカ合衆国（US） | |
欧州連合（EU） | |
オーストラリア（AU） |
一般的なトラブルシューティング手順
Messengerがウェブサイトに表示されない場合、以下の一般的なトラブルシューティング手順で問題の診断に役立ててください。
1. インストールを確認する
まずMessengerのJavaScriptスニペットまたは選択したプラグインが正しくインストールされているか確認してください。JavaScriptスニペットを使用している場合は、ウェブサイトの閉じる</body>タグの直前に配置されていることを確認してください。
2. 信頼されたドメインを確認する
ワークスペースの設定 > セキュリティ > 信頼されたドメインでウェブサイトのdomainが正しく設定されていることを確認してください。domainがリストにない場合、Messengerは読み込まれません。
3. 身元確認を見直す
身元確認を有効にしている場合は、正しく設定されているか確認してください。誤設定があると403エラーが発生し、Messengerがウェブサイトに読み込まれなくなります。
4. 広告ブロッカーやプライベートブラウジングを無効にする
広告ブロッカーやプライベートブラウジングモードなどのブラウザ機能や拡張機能がMessengerの動作を妨げることがあります。一時的に無効にしてMessengerが表示されるか試してください。
注意: 身元確認は追加のセキュリティ対策です。強制されているがウェブサイトで正しく設定されていない場合、403エラーが発生する可能性があります。