Trigger flow doesn’t fire from a URL hash
You created a trigger flow with a selector like #prendre-rdv and linked to your site
with https://yoursite.com/#prendre-rdv, but nothing happens when the link is clicked.
The fix is short, but the reason is worth understanding so it doesn’t bite again.
Requisitos previos
- A chatbot with a trigger flow already created in the Flow Builder
- Edit access to the HTML of the page hosting the link (only needed for Solution A)
The symptom
In the Flow Builder you turn on the trigger flow and enter a selector such as:
#prendre-rdv
On your website you have a link that looks like this:
<a href="https://www.example.com/#prendre-rdv">Prendre RDV</a>
A visitor clicks the link, the page scrolls (or reloads), but the chatbot never opens and the flow never starts.
Why it happens
The trigger field is a CSS selector, not a URL-hash matcher. When the widget loads
it watches for clicks on any element matching the selector you typed. In CSS, #prendre-rdv
means “an element whose id attribute equals prendre-rdv.” It has
nothing to do with the #prendre-rdv fragment at the end of a URL.
In your HTML, the <a> tag carries href="...#prendre-rdv"
but it does not have id="prendre-rdv", so the click never matches and the
trigger never fires.
#book-appointment and
.cta-pricing. Both are CSS selectors that match elements on the page, not pieces
of the URL.
Solution A — add an id to your link
Put the id on the element itself
Add an id attribute to the link (or button) that should open the flow:
<a id="prendre-rdv" href="https://www.example.com/#prendre-rdv">
Prendre RDV
</a>
Now the click matches the selector #prendre-rdv in the Flow Builder and the trigger
flow runs as expected. You can keep the href unchanged so the link still works for
anyone who has the chat widget disabled or blocked.
Solution B — match the href instead
Change the trigger selector to target the link by its href
Open the trigger flow in the Flow Builder and replace the selector with an attribute selector:
a[href$="#prendre-rdv"]
This matches any <a> tag whose href ends with
#prendre-rdv — no HTML changes needed on the host page. Useful when the link
is generated by a page builder, a CMS, or third-party content you cannot edit.
You can broaden or narrow this pattern:
a[href$="#prendre-rdv"]— ends with that hash (recommended)a[href*="#prendre-rdv"]— contains the hash anywhere in the URLa[href="https://www.example.com/#prendre-rdv"]— exact full URL match
Verify the trigger fires
Once you’ve applied one of the fixes:
- Open the page with the chatbot widget in a normal browser tab (not preview).
- Click the link or button that should open the flow.
- The chat panel should open and the first step of your trigger flow should appear immediately.
If you’re comfortable with the browser console, you can also confirm the selector is correct by typing this:
document.querySelector('#prendre-rdv')
// or for Solution B:
document.querySelector('a[href$="#prendre-rdv"]')
If the console returns the element, the selector is good. If it returns null, the
selector still doesn’t match anything on the page and the trigger won’t fire.
Tips & Best Practices
Test the selector in your browser console before publishing the trigger. One
document.querySelector(yourSelector) call tells you whether anything on the page
will ever match.
Prefer a class or a dedicated id (.book-cta, #open-chatbot) over
fragile selectors that depend on layout, like div > div > a. If your site
changes, the layout-based selector breaks silently.
Keep the original href on your link working too. Visitors with the widget
blocked, or robots indexing the page, should still get a sensible destination.