この文章を使って、顧客がウェブサイトの特定のボタンや要素をクリックしたときに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ボタンの制約に注意してください:
重要: Workflowをトリガーするのは1ページあたり1つのボタンのみです。複数のボタンがある場合は、別々のページに配置する必要があります。
まず、ビジュアルセレクターを使用します（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または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には、現在、顧客ごとにWorkflowを一度だけ表示する組み込みオプションはありません。要素がクリックされるたびにWorkflowが再度トリガーされます。回避策として、追加トリガーを抑制するカスタムJavaScriptソリューションを実装できます。
まだ問題がありますか？
正しいワークスペースがサイトにインストールされていてもセレクターメニューが読み込まれない場合は、Messengerでチャットしてください。喜んでお手伝いします。