ツールチップは、製品内で顧客を教育し関与させるための非妨害的で文脈に沿った体験を提供し、より早い導入を促進します。新機能に注目を集めたり、Help CenterのArticleを表示したり、Product Tourを開始したりする際に最適です。
ツールチップの作成は迅速かつ簡単で、コードは不要です。始め方は以下の通りです。
ツールチップのデザイン
まず、メインメニューからOutboundに移動し、右上の＋ 新しいメッセージをクリックします。
次に、コンテンツタイプとしてツールチップを選択します。
左のサイドバーからこのコンテンツタイプを選んで、既成のテンプレートから始めることもできます。
注意：
ツールチップはデスクトップのウェブアプリ専用に設計されており、ネイティブモバイルアプリではサポートされていません。モバイルアプリで顧客を教育・関与させるには、Mobile Carouselsをご利用ください。
同じグループに追加することで、複数のツールチップを一度に追加できます。
これらは同じオーディエンスターゲティング、スケジューリング、目標が適用されます。新規顧客向けのオンボーディングツールチップをまとめたり、製品の特に複雑な部分をサポートする教育用ツールチップをグループ化するのに最適です。
1グループあたり100個、合計50グループまでツールチップを作成できます。
次に、ツールチップに短くてキャッチーなタイトルを付けます。例えば、新機能を発表する場合は「Feature launch」と名付けることができます。
ツールチップを追加するサイトを選択
ツールチップのデザインを始めるには、「Add tooltips」をクリックします。
新しいウィンドウが開きます。ここでツールチップを追加したいウェブサイトを入力します。
このURLは適切なウェブサイトを選択するためのもので、顧客にツールチップを表示する対象URLではありません。ページとオーディエンスのターゲティングルールは後のステップで選択できます。
URLを追加したら、「Open website」をクリックします。
ツールチップを追加する場所を選択
このツールチップが別のページ用の場合は、ここから別のページに移動できます。
「Add tooltip」をクリックして、このページでツールチップのデザインを始めます。
ツールチップを配置したいページ上の要素を選択します。
ツールチップにコンテンツを追加
スタイライズされたテキストを使い、リンク、画像、動画、コード、箇条書きや番号付きリストを追加できます。
対応する画像・動画形式はPNG、JPG、JPEG、GIF、MP4です。
Smart Linksを使って、Intercomで既に作成したコンテンツを検索できます。例えば、Help CenterのArticleへのSmart Linkを追加して詳細情報を提供したり、このツールチップから開始したいProduct Tourを追加したりできます。
注意：
Smart LinksはIntercomで作成した公開済みのコンテンツのみを検索し、そのコンテンツに設定したターゲティングルールは無視します。
Smart Linkでトリガーされたコンテンツは、エディターでツールチップをプレビューする際には配信されません。
ツールチップのスタイル設定
アイコン - ページ上の要素の隣にアイコンを表示したい場合に選択します。
アイコンなし - 顧客が要素にホバーしたときにコンテンツがシームレスに表示されるようにしたい場合に選択します。
ラベル - 製品の機能に「New」や「Beta」などのラベルを要素の隣に追加したい場合に選択します。ラベルは16文字以内です。
アイコンタイプ - 新機能に注目を集めるビーコンなど、表示したいアイコンの種類を選択します。
サイズ - ツールチップのアンカーのサイズを小、中、大から選択します。これはアイコン、アニメーションビーコン、ラベルの3つのアンカースタイルすべてに適用されます。小がデフォルトで既存のツールチップアンカーサイズに一致します。中または大を選ぶと、顧客が見やすくクリックしやすくなります。
アイコンの色 - ブランドに合わせたり、ページ上で目立たせるために色をカスタマイズします。
コンテンツ表示タイミング - 顧客がホバーしたときやクリックしたときなど、ツールチップがコンテンツを表示するタイミングを決めます。
アニメーションビーコン - 顧客が操作するまでツールチップがゆっくり点滅し、その後は静止します。
ここで追加するすべてのツールチップの背景色とテキストを設定できます。「グループ設定」から管理してください。
ツールチップに最適なレイアウトを選択
これらのコントロールを使って、ツールチップを正確に配置または移動できます。以下のオプションを試してみてください。
オーバーレイ - このツールチップは要素の上に浮かびます（Messengerのように）。
埋め込み - このツールチップはHTMLと同じ行にレンダリングされ、ページのレイアウトを調整できます。
整列 - ツールチップを要素内のテキストに合わせる、要素の横に置く、または要素の隣に配置します。左、右、上、下、中央の位置調整も可能です。
オフセット - ツールチップのピクセルパディングをオフセットして、さらに正確に配置します。
配置設定
「配置」をクリックして、ツールチップをサイト全体（例：ヘッダーやフッター）に表示するか、特定のページ（例：選択したページのみ）に表示するかを決めます。
ツールチップを表示するページを制御するには、「特定のページ」を選択し、「＋新しいルールを追加」をクリックします。
次に、ツールチップを表示するページのURLを定義します。デフォルトでは最初に選択したウェブサイトのURLですが、このルールを編集してサイト内の任意のページを選択できます。
ツールチップを配置する要素があるページを選択してください。
「contains」を使うと、ページのグループやユーザーIDのような固有のパラメータを含むページを柔軟にターゲットにできます。例えば、URLに「project」を含むページをターゲットにして、顧客がプロジェクトに取り組んでいるときに狙うことができます。
ターゲットにしたいページに合わせて、必要なだけページURLルールを追加してください。
アプリやサイトからURLをコピー＆ペーストするのがおすすめです。ブラウザのアドレスバーに隠れている文字（末尾のスラッシュなど）も正確に取得できます。
要素のマッチング
ここではCSSセレクターを使ってツールチップを配置する要素を変更できます。ページ上の特定のテキストにツールチップを置きたい場合は、「By Text」でそのテキストを含む正確な要素を検索してみてください。
「By Text」で要素をマッチングすると、そのテキストを含むページ上の最初の要素が見つかります。
ページ上の適切な要素を選択するのが難しい場合は、CSSセレクターを手動で選択することを試してください。
ツールチップの配置が決まったら、「完了」をクリックしてください。
このグループにさらにツールチップを追加できます。追加したツールチップには同じルールとスケジュールが適用されます。
異なるルールやスケジュールのツールチップを作成したい場合は、現在のものを保存してから新しいツールチップをデザインしてください。
頻度と背景色の管理：
「グループ設定」で、これらのツールチップの表示頻度と一貫した背景色を設定してください。
頻度：
これらのツールチップを、対象ユーザーの条件に合うたびに表示し続けるか、エンゲージメントがあった後に非表示にするかを選択してください。機能の告知や認知向上に最適です。
頻度はここに追加したすべてのツールチップに適用され、個別のツールチップごとには設定できません。
ツールチップのエンゲージメントはブラウザのクッキーで追跡され、ユーザーアカウントではありません。したがって、usersが以下の操作を行うと、以前にエンゲージしたツールチップが再度表示されます。
別のブラウザやデバイスを使用する
キャッシュとクッキーをクリアする
シークレットウィンドウでログインする
背景色：
ここに追加したすべてのツールチップの背景色とテキストのHEXカラーを設定できます。製品のデザインガイドラインに合わせるのに最適です。
グループ設定の管理が終わったら、「保存して閉じる」をクリックしてください。
ツールチップグループの編集
ツールチップグループを編集しているとき、下部ツールバーで以下が確認できます：
グループに含まれるすべてのツールチップ。
ツールチップのタグ付け方法 - CSSセレクターかテキスト要素か。
ツールチップの表示場所 - サイト全体か特定のページか。
ツールチップが現在のページにあるかどうか。
現在のページにないツールチップを編集すると、ページ中央にツールチップが浮かび、バナーエラーが表示されます。
これは、個別のツールチップの異なる設定を表示しているツールチップグループの例です。
ライブ環境でテストする
ツールチップを本番公開する前に、以下の方法でテストすることをおすすめします。
1. 新規ユーザーとしてテストする
新規ユーザー向けにツールチップを追加した場合は、製品に新規登録して実際の新規ユーザーとしてテストしてください。これにより、既存データがない完全に新しい状態でツールチップが機能することを確認できます。
2. すべての異なる製品権限でテストする
製品に基本、管理者、スーパ管理者など異なる権限レベルがある場合は、それぞれの権限レベルのユーザーとしてツールチップをテストしてください。これにより、すべてのusersタイプでツールチップが機能し、すべてのusersがアクセスできるページにツールチップが追加されていることを確認できます。
3. 製品コンテンツの有無でツールチップが機能するかテストする
製品にユーザー生成コンテンツがある場合は、コンテンツの有無にかかわらずツールチップが機能することを確認してください。空の状態とコンテンツがある状態の両方をテストしてください。
audience targeting rulesを使って、自分やチームメンバーだけがツールチップをプレビューできるようにし、正常に動作しているか確認できます。例えば、「Email contains examply」のusersを選択できます。
その後、ツールチップを本番公開し、追加したウェブページにアクセスして動作を確認してください。
トラブルシューティング
ツールチップを本番公開して表示されない場合は、以下を確認してください。
配置設定で正しいページが選択されていること。
ウェブページのURLが変更されていないこと。
動的要素がページのレイアウトを変えていないこと。修正方法はこちら。
ツールチップが表示されているが正しい場所でない場合は、レイアウトと位置を編集してください。
「By Text」で要素マッチングし、配置設定で「Sitewide」を選択している場合、そのテキストがあるページすべてにマッチする可能性があります。このツールチップにはCSSセレクターを使って要素マッチングすることを試してください。
注意：シングルページアプリケーション（SPA）を使用している場合、IntercomはMessengerが最初に読み込まれたときのみTooltipsをチェックします。これにより、ルート変更（URLが完全にリロードされずに変わる場合）後にTooltipsの表示が不安定になることがあります。
これを修正するには、アプリケーションの重要なルート変更時にIntercom('update')を呼び出してください。これにより、Intercomが現在のページのツールチップを再評価します。
サポートチームは、SPAで正しく表示されるように、URLが変更されるたびにTooltipsを再評価するワークスペース設定を有効にできます。ご希望の場合はお問い合わせください。