Back to Tutorials / Create a selector-triggered flow

Create a selector-triggered flow

A selector-triggered flow is a flow that only runs when a visitor clicks a specific button or link on your website. It’s ideal for “Book an appointment”, “Talk to sales”, or “Get a quote” buttons — the visitor clicks, the chat opens, and they land directly inside the right conversation, skipping the welcome message.

Prerequisites

  • A chatbot already created and deployed on your website
  • Edit access to your website (to add the button or link)

What a trigger flow does

Your chatbot has three places where a flow can run: the regular Flow Builder (welcome flow), the Exit Intent Flow (when a visitor is about to leave), and the Selector-Triggered Flow — this one. The selector-triggered flow watches for clicks on any HTML element matching a CSS selector you choose. When the match happens, the widget opens and runs only this dedicated flow.

The trigger fires on a click, not on page load. A URL fragment alone (yoursite.com/#book) will not trigger anything — the click on the link does.

1. Open the trigger flow section

1 Find “Selector-Triggered Flow” in the chatbot editor

Open the chatbot you want to wire up (Chatbots → your chatbot → Edit), then scroll until you see the Selector-Triggered Flow card. Click the toggle on the right of the card header to enable it. A settings panel appears below.

2. Pick a selector

2 Decide how the button on your site will be identified

The Trigger selector field accepts any CSS selector. The two most common patterns:

  • #open-chat-booking — matches an element whose id equals open-chat-booking
  • .chat-trigger — matches any element with class chat-trigger

For a single button, a dedicated id is the cleanest choice. For multiple buttons across the site (e.g. one in the header and one in the footer), use a class instead so all of them trigger the same flow.

#book is a CSS selector, not a URL hash. Using #book here will not match a visitor landing on yoursite.com/#book — it matches an element with id="book". If the trigger doesn’t fire, see Trigger flow doesn’t fire from a URL hash.

3. Build the flow steps

3 Add the messages and actions the visitor will see

Below the selector field is the same flow editor used in the main Flow Builder. Add steps for the conversation you want this button to start — messages, button choices, lead forms, booking, anything supported by your tier.

Common shapes for a trigger flow:

  • Booking shortcut: message “Pick a slot” → booking widget.
  • Lead capture: message “Leave your details” → contact form.
  • Qualification: a few button choices → route to the right next step.

The trigger flow runs instead of the welcome flow, so don’t repeat the chatbot’s usual greeting here — jump straight to the point.

4. Save the chatbot

4 Publish your changes

Click Save at the bottom of the chatbot editor. The selector and the flow are now live for every page where your chatbot widget is embedded — no re-deploy needed.

5. Add the button to your site

5 Place HTML that matches the selector

On every page where you want this button to appear, add an element whose id (or class) matches the selector you set in step 2.

If your selector is #open-chat-booking, add:

<a id="open-chat-booking" href="#">
  Book an appointment
</a>

For a styled button instead of a plain link:

<button type="button" id="open-chat-booking">
  Book an appointment
</button>

If your selector is a class (.chat-trigger), use the class on as many elements as you want:

<a class="chat-trigger" href="#">Book</a>
<button class="chat-trigger">Talk to us</button>
You don’t need to touch the chatbot embed snippet — the widget already listens for clicks page-wide once it loads. Just make sure your HTML element appears after the embed script, or wait for the page to finish loading before injecting it.

6. Test it live

6 Click your button and verify the flow opens

Open your website in a fresh browser tab (not preview, not an iframe), and click the button. The chat panel should open and the first step of your trigger flow should appear immediately — no welcome message before it.

Quick console check if it’s not working: open DevTools and run document.querySelector('your-selector-here'). If it returns an element, the selector is correct. If it returns null, there’s no matching element on the page — recheck your HTML.

Still stuck? Read Trigger flow doesn’t fire from a URL hash — it covers the most common cause and two ready-to-paste fixes.

Tips & Best Practices

Pick selectors that are only used by the trigger button. .btn or a would match dozens of unrelated elements on the page and open the chat every time anyone clicks them.

One trigger flow per chatbot. If you need different flows for different buttons, create separate chatbots or branch inside the same trigger flow using button choices in the first step.

Keep an href on the link so visitors who block the widget still see something sensible — e.g. href="/contact" as a fallback.