ツールチップを作成する際、ボタンやヘッダーなど特定のウェブサイト要素を選択してツールチップを追加できます。IntercomはCSSセレクターを使ってこれらの要素を選択します。

要素を選択すると、ツールチップは自動的にその要素に追加される場所を示すCSSセレクターを生成します。選択した要素のCSSは右下の配置 > 要素の一致で確認できます。

いくつかの理由でCSSセレクターを手動で追加したい場合があります。この記事の後半で説明します。自動で選ばれたCSSセレクターを手動で編集したい場合は、フィールド内をクリックして選択したいCSSセレクターを入力してください。

ウェブサイトの要素を選ぶ際にCSSを編集したい理由はいくつかあります。

製品やサイトがツールチップ公開後に変わった場合、元のCSSが機能しなくなることがあります。これは参照している要素が存在しなくなったか、かなり違う場所に移動したためです。この場合、「要素を変更」ボタンで新しい要素を選ぶか、新しいセレクターを手動で入力できます。

CSSはウェブサイトの要素にスタイルを適用するために使われます。いくつかのウェブフレームワークはこれらのスタイルを適用するためにCSSクラスを動的に生成します。つまり、CSSセレクターはユーザーが製品やサイトにアクセスするたびに変わる可能性があります。この場合、自動のCSSセレクターでツールチップを追加できません。

一部のセレクターを編集してワイルドカードを使い、動的に生成されるCSSセレクターの部分を無視することができます。これはCSSを編集してusers全員に共通する部分だけを選択することを意味します。以下の例では、「button__2kbli」ではなく「button__」を探すようにセレクターを編集しています。CSSの「button_」部分はusers全員に共通しているためです。

ツールチップを正しく表示させる最良の方法は、Intercomが検出できる特別な属性でサイトのHTMLに注釈を付けることです。

注意：これを行うにはHTMLを編集する必要があります。

サイトのどの要素をツールチップに使いたいか分かっている場合、これらの要素に特別なデータ属性 data-intercom-target="..."を追加できます。

例えば、ツールチップでスタートボタンを指し示したい場合、この要素にdata-intercom-target="Start button"を追加できます。このようにHTMLに注釈を付けることで、製品の小さな変更がツールチップに影響を与えにくくなります。

注意：上記のようにHTMLに注釈を付けると、ツールチップビルダーはdata-intercom-target注釈のある要素をハイライトして選択できるようになります。

ツールチップのCSS編集についてさらに質問があれば、Messengerでお気軽にお問い合わせください。こちらはツールチップのテスト方法で、正常に動作しているか確認できます。