この資料を使って、顧客がウェブサイトの特定のボタンや要素をクリックしたときにMessengerで開くWorkflowを設定してください。Messengerがサイトにインストールされていて、プランでWorkflowsにアクセスできるチームメンバーが利用可能です。
例えば、次のようなことができます：
お問い合わせフォームをWorkflowに置き換え、顧客を迅速に特定し、会話を適切なチームに割り当てます。
価格ページの「Chat to sales」をクリックしたleadsを自動的に資格判定し、割り当てます。
ブログの「Subscribe」ボタンからより多くのニュースレター購読を生成します。
注意:
デスクトップおよびモバイルサイトのボタンからWorkflowsを使用できます。モバイルアプリでは動作しません。
ボタンからのWorkflowsは、訪問者/usersがボタンをクリックするたびにトリガーされます。
顧客がウェブサイトの要素をクリックしてWorkflowが開始されると、その会話は「顧客が最初のメッセージを送信したとき」のトリガーにも一致するため、そのトリガーを使用するバックグラウンドのWorkflowsも同時に実行されます。
始めましょう
Fin AI Agent > Workflowsに移動し、New workflow.をクリックします。
Create from scratchを選択し、「顧客がウェブサイトの要素をクリックしたとき」のトリガーを使用します。
Workflowを起動する場所を選択してください
次に、Workflowをトリガーするサイト上のボタンを選択する設定を行います。Select element on your site to launch fromを選択してください。
次に、このWorkflowを追加したいウェブサイトを選択し、Open website.をクリックします。
新しいウィンドウでウェブサイトが表示されます。ページ下部のメニューで「Navigate」を選択し、Workflowをトリガーしたいボタンがあるページに移動します。
目的のページに移動したら、メニューのSelectをクリックし、選択したいウェブサイトの要素をクリックします。
正しい要素を選択したら、Save and closeを押します。Workflowビルダーに戻り、選択した要素が確定したトリガーとして表示されます。正しく登録されたか確認するには、トリガー設定にCSSセレクターが表示されているか確認してください。これはページ上の要素の固有アドレスで、例として.contact-buttonや#chat-triggerがあります。一般的なセレクターが表示された場合は、再度選択を繰り返してください。
注意: ウェブサイトの要素セレクターメニューの下部にSave and closeオプションが見えない場合は、そのメニューをスクロールして表示してください。このメニューはWorkflowsビルダーとは別で、Workflowsビルダーには独自の保存および公開ボタンがあります。
複数の場所から同じWorkflowをトリガーする
サイト内に複数のボタンがあり、それらすべてで同じWorkflowをトリガーしたい場合は、共有のCSSクラスを手動で定義できます。CSSクラスはサイトのコード内のHTML要素に追加するラベルで、そのクラスを持つ要素はトリガーとして機能します。CSSセレクターはIntercomがページ上の要素を見つけるための一致ルールで、例として.bot_launcher_buttonがあります。
設定前に、以下の「1ページにつき1ボタン」の制約に注意してください。
重要: 1ページにつき1つのボタンのみがWorkflowをトリガーするため、複数のボタンがある場合は別々のページに配置する必要があります。
まず、ビジュアルセレクターを使用します（Workflowを開き、Select element on your site to launch fromをクリックし、下部メニューのSelectをクリック）。Workflowをトリガーしたいボタンの1つを選択します。キャプチャされたCSSセレクターが表示されるので、フィールド内で手動編集できます。
すべてのボタンが.bot_launcher_buttonのようなクラスを共有していることを確認し、ここに追加します（まだ選択されていない場合）。その後、保存して閉じます。
サイト上のそのCSSクラスを共有する任意の要素がクリックされると、Workflowがトリガーされます。
トリガー設定が完了したら、Workflowの構築を開始できます。歓迎メッセージ、既知の顧客か新しいleadsかによる分岐、会話をチームに割り当てるアクションなどのステップを追加します。利用可能なステップタイプの完全なガイドはbuilding your Workflowを参照してください。
例えば、「Chat to us」ボタンでWorkflowを使用している場合、新しいleadsと現在の顧客のために別々のパスを作成することがあります。
重要: さらに進めるには、Button Bot workflows（例：「顧客がウェブサイトの要素をクリックする」）には以下が必要です。
定義された
button_label値を持つ返信ボタン、または入力をキャプチャするためのデータ/属性収集。
ボタンや入力フィールドがない場合、顧客は最初のメッセージを見るだけで、次のステップに進むための操作やトリガーができません。
なぜ要素を選択できないのですか？
ウェブサイトを要素セレクターで開いたときに、下部のセレクターメニューが表示されないことがあります。これは通常、以下のいずれかの問題が原因です。最初の2つは誰でも解決可能ですが、3つ目と4つ目は技術的な設定が必要で、チームの開発者が関与する場合があります。
サイトにMessengerがインストールされているか確認してください
ウェブサイトから要素を選択するには、Messengerがそのサイトにインストールされている必要があります。インストールされていない場合、セレクターメニューは読み込まれません。例えば、製品内でWorkflowをトリガーしたいが、ログアウトした訪問者向けにのみMessengerがインストールされている場合、製品内でセレクターメニューは表示されません。
Messengerがインストールされていない場合は、以下のガイドを参照してください：
ウェブサイトからログアウトした訪問者向けにWorkflowをトリガーする場合は、Messengerを訪問者とleads向けにインストールしてください。
ウェブサイトからログインしたusers向けにWorkflowをトリガーする場合は、Messengerをusers向けにインストールしてください。
サイトがサードパーティのiframe内に埋め込まれていますか？
サイトがサードパーティのiframe内に埋め込まれているページでは、セレクターメニューは機能しません。
Intercom Messengerは常に独自のiframe（インラインフレーム）でレンダリングされます。これは期待される動作で変更できません。ただし、サイトや製品自体がサードパーティのiframe内（例：ShopifyアプリやFigmaプラグイン内）に読み込まれている場合、Messengerはiframeを含む親ページの情報にアクセスできません。
このような場合、Workflowをトリガーする要素の選択はサポートされていません。
サイトがwindow.openerを変更していますか？
セレクターメニューはwindow.openerプロパティを使用しています。これは、セレクターがウェブサイトを開いたタブのIntercomアプリに通信するためのブラウザAPIです。サイトのJavaScript（またはサードパーティのライブラリ）がwindow.openerをnullに上書きすると、セレクターメニューはデータを送信できず、読み込まれません。
Cross-Origin-Opener-Policyヘッダーを確認してください
サーバーのCross-Origin-Opener-Policy（COOP）ヘッダーは、ページが開いたウィンドウと通信できるかを制御します。COOPヘッダーがsame-originまたはsame-origin-allow-popupsに設定されていると、ブラウザはwindow.openerをnullに設定し、セレクターメニューの読み込みを妨げます。（same-origin-allow-popupsは一見問題なさそうですが、この設定はページが開くポップアップとの接続のみ維持し、ページを開いたIntercomタブとの接続は維持しません。これにより、same-originと同様にセレクターが機能しなくなります。）修正するには、開発者にヘッダー値をunsafe-noneに変更するか、ヘッダーを完全に削除するよう依頼してください。
注意: Cross-Origin-Opener-Policyヘッダーは、要素選択のためのセレクターメニューエディターを使用している間のみunsafe-noneに設定するか削除すればよく、Workflowトリガーの実行時には影響しません。
要素選択を保存したら、ヘッダーを元の値に戻せます。Workflowは顧客のクリックで正しくトリガーされ続けます。
重要: 「顧客がウェブサイトの要素をクリックする」でトリガーされるWorkflowsには、現在、顧客ごとに1回のみ表示を制限する組み込みオプションはありません。要素がクリックされるたびにWorkflowは再度トリガーされます。回避策として、追加トリガーを抑制するカスタムJavaScriptソリューションを実装できます。
まだ問題がありますか？
正しいワークスペースがサイトにインストールされていてもセレクターメニューが読み込まれない場合は、Messengerでチャットしてください。喜んでお手伝いします。