How to get the CSS selector for Chatflow triggers
Learn how to find the CSS selector for triggering chatflows when users hover over or click on specific elements on your webpage. This guide provides a step-by-step method using browser inspection tools
When setting up chatflows in Customerly, you might want to trigger messages based on user interactions, such as hovering over or clicking on specific elements.
To do this, you'll need the CSS selector of the element. Here’s how you can easily find it using your browser’s developer tools.
What is a CSS Selector?
A CSS selector is a way to target HTML elements on your webpage. It allows you to specify which element should trigger a particular action in your chatflow. This can be useful for targeting buttons, sections, images, or any interactive parts of your site.
How to Find a CSS Selector
Follow these steps to identify the correct CSS selector for an element you wish to target.
Open the Webpage:
Go to the webpage that contains the element you want to target with the trigger.
Right-Click and Inspect:
Right-click on the element (e.g., a button or section) that you want to target.
Select the ‘Inspect’ option from the context menu. This action opens the developer tools and highlights the element in the Elements tab.
Locate the CSS Selector:
In the Elements tab, you'll see the HTML code of the element you selected.
Right-click on the highlighted element code.
Hover over ‘Copy’ and select ‘Copy selector’ from the dropdown menu.
Paste and Use the Selector:
The CSS selector is now copied to your clipboard.
Paste it into the appropriate field in your Customerly Chatflow trigger settings (e.g., the field where you define the element that activates the chatflow).
Test the Trigger:
After setting up the CSS selector, test the chatflow on your webpage to ensure it activates when the specified element is clicked or hovered over.
Example Use Case
For instance, if you want the chatflow to appear when a user clicks on a "Subscribe" button, right-click on the button, choose ‘Inspect’, copy the CSS selector, and use it in your Customerly chatflow settings.
By following these steps, you ensure that your chat messages appear precisely when and where you want them to, creating a more engaging user experience. Happy chatting with your customers!
Did this answer your question?