この文章を使って、顧客がウェブサイトの特定のボタンや要素をクリックしたときにMessengerで開くWorkflowを設定します。Messengerがサイトにインストールされ、プランでWorkflowsにアクセスできるチームメンバーが利用可能です。
例えば、次のことができます：
連絡フォームをWorkflowに置き換え、顧客を迅速に特定し、会話を適切なチームに割り当てます。
価格ページの「Chat to sales」をクリックしたleadsを自動的に資格判定し、割り当てます。
ブログの「Subscribe」ボタンからより多くのニュースレター購読を生成します。
注意：
デスクトップおよびモバイルサイトのボタンからWorkflowsを使用できます。モバイルアプリでは動作しません。
ボタンからのWorkflowsは、訪問者/usersがボタンをクリックするたびにトリガーされます。
始めましょう
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オプションが見えない場合は、ナビゲーションメニューをスクロールして表示してください。
複数の場所から同じ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をクリック）。トリガーしたいボタンの1つを選択します。キャプチャされたCSSセレクターが表示され、手動で編集できます。
すべてのボタンが.bot_launcher_buttonのようなクラスを共有していることを確認し、ここに追加します（まだ選択されていない場合）。その後、保存して閉じます。
サイト上のそのCSSクラスを共有する任意の要素は、クリックされるとWorkflowをトリガーします。
トリガーが設定されたら、Workflowの構築を開始できます。歓迎メッセージ、訪問者が既知の顧客か新しいleadsかに基づく分岐、会話をチームに割り当てるなどのアクションを追加します。利用可能なステップタイプの完全なガイドはWorkflowの構築を参照してください。
例えば、「Chat to us」ボタンでWorkflowを使用している場合、新しいleadsと現在の顧客のために別々のパスを作成することがあります。
重要：さらに進めるには、Button Bot workflows（例：「顧客がウェブサイトの要素をクリックしたとき」）には以下が必要です：
定義された
button_label値を持つ返信ボタン、または入力をキャプチャするためのデータ/属性収集。
ボタンや入力フィールドがない場合、顧客は最初のメッセージを見るだけで、対話や次のステップへの進行をトリガーする方法がありません。
なぜ要素を選択できないのですか？
ウェブサイトを要素セレクターで開いたときに、下部のセレクターメニューが表示されないことがあります。これは通常、以下の問題のいずれかが原因です。最初の2つは誰でも解決可能ですが、3つ目と4つ目はチームの開発者による技術的な設定が必要な場合があります。
サイトにMessengerがインストールされているか確認してください。
ウェブサイトから要素を選択するには、Messengerがそのサイトにインストールされている必要があります。インストールされていない場合、セレクターメニューは読み込まれません。例えば、製品内でWorkflowをトリガーしたいが、ログアウトした訪問者向けにのみMessengerがインストールされている場合、製品内でセレクターメニューは表示されません。
Messengerがインストールされていない場合は、これらのガイドを参照してください：
ウェブサイトからログアウトした訪問者向けにWorkflowをトリガーする場合は、訪問者とleads向けにMessengerをインストールしてください。
ウェブサイトからログインしたusers向けにWorkflowをトリガーする場合は、users向けにMessengerをインストールしてください。
サイトはサードパーティの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に設定されていると、ブラウザは自動的にwindow.openerをnullに設定し、セレクターメニューの読み込みを妨げます。修正するには、開発者にヘッダー値をunsafe-noneに変更するか、ヘッダーを完全に削除するよう依頼してください。
注意：selectorメニューエディターで要素を選択している間のみ、Cross-Origin-Opener-Policyヘッダーをunsafe-noneに設定（または削除）する必要があります。Workflowトリガーの実行時には影響しません。
要素選択を保存したら、ヘッダーを元の値に戻せます。Workflowは顧客のクリックで正しくトリガーされ続けます。
重要：「顧客がウェブサイトの要素をクリックしたとき」にトリガーされるWorkflowsには、現在、顧客ごとに1回のみ表示を制限する組み込みオプションはありません。要素がクリックされるたびにWorkflowが再度トリガーされます。回避策として、追加トリガーを抑制するカスタムJavaScriptソリューションを実装できます。
まだ問題がありますか？
正しいワークスペースがサイトにインストールされていてもセレクターメニューが読み込まれない場合は、Messengerでチャットしてください。喜んでお手伝いします。