Skip to main content

Customer clicks a website element

Trigger a Workflow when customers clicks a button or element on your website.

Written by Beth-Ann Sher
Updated over a week ago

With Workflows, you can replace website forms with engaging, customizable bots. Your customers will trigger a Workflow by clicking a button or element on your site, so you can provide them with a faster and more personal experience.

For example, you could:

  • Replace your contact form with a Workflow that quickly identifies customers and assigns their conversation to the right team.

  • Automatically qualify and assign leads who click "Chat to sales" on your pricing page.

  • Generate more newsletter subscriptions from your blog’s "Subscribe" button.

Note:

  • You can use Workflows from buttons on desktop and mobile sites. They don’t work in mobile apps.

  • Workflows from buttons will trigger for visitors/users every time they click on the button.


Get started

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

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

Choose where to launch your Workflow

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.

If you can't see the option to Save and close you'll need to scroll across the navigation menu to bring it into view.

Trigger the same Workflow from multiple places

If you have multiple buttons and you'd like them to trigger the same Workflow you can manually define the CSS class that triggers the Workflow.

Only one button per page will trigger the Workflow, so if you have multiple buttons they must be on separate pages.

Follow the steps above and select one of the buttons you'd like to trigger the Workflow. You'll see the CSS selector used, and can manually edit it here:

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:

Now any element on your site with that class, will trigger the Workflow. 👍

Once you've finished configuring the trigger settings and scheduling, you can start building your Workflow.

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:

To progress further, Button Bot workflows (e.g., “Customer clicks a website element”) would require:

  • Reply buttons with defined button_label values, or

  • Data/attribute collection to capture input.

Without a button or input field, the customer sees the first message but has no way to interact and trigger progression to the next step.


Why can't I select any element?

Sometimes, when you open your website, the selector menu at the bottom doesn't appear. If you can't see the selector menu, there are three things you should check:

Check if the Messenger is installed on your site

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:

Is your site embedded inside a third-party iframe?

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 which is an expected behaviour and can't be changed. However, if your site or product itself is loaded inside a third-party iframe (for example, 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.

Is your site changing window.opener?

The selector menu uses the window.opener property to communicate with the Intercom app. If this is being overwritten by your site’s Javascript (or a library you are using) then the selector menu will not work.

Check your Cross-Origin-Opener-Policy header
If your Cross-Origin-Opener-Policy header has a value of same-origin then it keeps window.opener to have a null value and the selector menu will not load.

The Cross-Origin-Opener-Policy needs to be set to unsafe-none or removed is required only by the selector menu editor (not by the Workflow trigger).

Once a website element is selected, the Cross-Origin-Opener-Policy can be set back to unsafe-none and the Workflow can still trigger the element from your website correctly.

For Workflows triggered by 'Customer clicks a website element', there is currently no built-in option to limit the Workflow to display only once per customer. The Workflow will trigger again every time the element is clicked. As a workaround, a custom JavaScript solution may be implemented to suppress additional triggers.

Still having trouble?

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.


💡Tip

Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts


Did this answer your question?