Use this article to set up a Workflow that opens in the Messenger when a customer clicks a specific button or element on your website. This is available to teammates who have the Messenger installed on their site and access to Workflows on their plan.

For example, you could:

Go to Fin AI Agent > Workflows and click New workflow.

Choose Create from scratch and use the trigger "When customer clicks a website element".

Now you'll need to configure the settings to select a button on your site which will trigger the Workflow. Just choose Select element on your site to launch from.

Then, choose the website where you’d like to add this Workflow and click Open website.

You’ll be brought to your website in a new window. In the menu at the bottom of the page, choose "Navigate" to go the page that contains the button you want to trigger your Workflow on:

Once you’re on the right page, click Select on the menu, then click on the website element you want.

Once you've selected the right element, hit Save and close. You'll be returned to the Workflow builder, where the selected element will appear as the confirmed trigger. To verify it was registered correctly, check that the trigger configuration now shows a CSS selector — this is the unique address of the element on your page, for example .contact-button or #chat-trigger. If it shows a generic selector rather than one specific to your button, repeat the selection.

If you have multiple buttons across your site and you'd like them all to trigger the same Workflow, you can manually define a shared CSS class. A CSS class is a label you add to HTML elements in your site's code — any element with that class can then act as a trigger. A CSS selector is the matching rule Intercom uses to find that element on the page, for example .bot_launcher_button.
​

Before setting this up, note the one-button-per-page constraint below:

First, use the visual selector (open your Workflow, click Select element on your site to launch from, and click Select on the bottom menu) and select one of the buttons you'd like to trigger the Workflow. You'll then see the CSS selector that was captured — you can manually edit it in the field shown:

Ensure that all the buttons share a class like .bot_launcher_button and add it here (if it's not selected already), then save and close:

Any element on your site that shares that CSS class will now trigger the Workflow when clicked.

Once you've confirmed the trigger is set up, you can start building your Workflow — add steps such as a welcome message, branches based on whether the visitor is a known customer or a new lead, and actions like assigning the conversation to a team. See building your Workflow for a full guide to the available step types.

For example, if you’re using a Workflow on a "Chat to us" button, you might create separate paths for new leads and current customers:

Sometimes, when you open your website using the element selector, the selector menu at the bottom doesn't appear. This is usually caused by one of the following issues. The first two can be resolved by anyone; the third and fourth involve technical configuration that may require a developer on your team.

To select an element from your website, the Messenger must be installed on the site you want to build it on. If it's not installed, the selector menu won't load. For example, if you want to trigger a workflow in your product, but you only have the Messenger installed for logged-out visitors, the selector menu won't appear inside your product.

If you don't have the Messenger installed, read these guides to get started:

The selector menu will not work on a page where your site is embedded inside a third-party iframe.

The Intercom Messenger is always rendered in its own iframe (an inline frame — a way of embedding one web page inside another). This is expected behaviour and can't be changed. However, if your site or product itself is loaded inside a third-party iframe (for example, inside a Shopify App or Figma Plugin), the Messenger can't access information from the parent page containing the iframe.

In these cases, selecting an element to trigger a Workflow is not supported.

The selector menu uses the window.opener property — a browser API that lets the selector communicate back to the Intercom app in the tab that opened your website. If your site's JavaScript (or a third-party library) overwrites window.opener to null, the selector menu will not be able to send data back and will not load.

Check your Cross-Origin-Opener-Policy header
Your server's Cross-Origin-Opener-Policy (COOP) header controls whether a page can communicate with the window that opened it. If your COOP header is set to same-origin, browsers automatically set window.opener to null, which prevents the selector menu from loading. To fix this, ask your developer to change the header value to unsafe-none or remove the header entirely.

If you have the correct workspace installed on your site, and the selector menu still isn’t loading, chat to us in the Messenger and we’ll be happy to help.