Skip to main content
All CollectionsAI & AutomationAutomationTriggers
Customer clicks a website element
Customer clicks a website element

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

Beth-Ann Sher avatar
Written by Beth-Ann Sher
Updated this week

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 AI & Automation > Workflows and click New workflow.

Choose Create from scratch and use the trigger "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.

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:


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:

Have you installed Intercom in an iframe?

The selector menu will not work on a page where the Intercom Messenger has been installed in an iframe.

Iframes act like a "sandbox", so the Messenger can't access information from the page containing the iframe. We recommend installing the Intercom Messenger on your site directly, without an iframe.

This is not always possible (on Shopify Apps or Figma Plugins, for example), 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.

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?