Smart buttons are buttons on your website that can interact with the Qualified messenger. For example, a smart button that says "Talk to an Expert" can open the messenger for interactive live chat or trigger an experience specific to that use case. In this article, we'll cover how to configure smart buttons on your website, including:
- Create an HTML button
- Have your smart button trigger a specific experience
- Test your smart button
Getting Started
To get started with smart buttons, simply create a button that you would want to display on your website or identify one that is already there.
If you are a web developer, please note that this technique can work for buttons, links, divs, or any element on your website. For the purposes of this article, we'll use a simple button example.
Let's say we want to place a smart button on our website product page that says "Talk to Us Live" and use that button to initiate an experience, like live chat or routing to a specific team.
First, start by creating an HTML button as you normally would, either by writing the HTML and CSS manually or using your web development tool of choice. Here is an example of a button:
<a href="#" class="my-smart-button">
TALK TO US LIVE
</a>
Have Your Button Trigger a Specific Experience
Whether or not you already have an experience running on the page, your smart button can automatically trigger another experience. This is commonly used when you have a chatbot flow on your page, but the click on a button results in an immediate route to the sales team or a separate set of questions altogether.
- Create a new Experience in Qualified by going to Settings > Experiences > Manually Triggered Experiences.
2. Create the experience you want to trigger.
3. Copy the experience ID.
4. Go back into your HTML and add the attributes data-qualified-action="showExperience" and data-qualified-arg="YOUR_EXPERIENCE_ID" to your smart button, as shown here:
<a href="#" class="my-smart-button"
data-qualified-action="showExperience"
data-qualified-arg="experience-1234567890123">
TALK TO US LIVE
</a>
Unable to edit your website HTML? No worries! Hop on over to our CSS Smart Selector documentation to learn how to trigger an experience just by creating a unique link or using an existing style applied to your button or website image.
Test Your Smart Button
OK, let's give it a try. Place your smart button exactly where you want it to display on your website and give it a shot! In our example, here is how the smart button will appear and act when directed to open the messenger:
Summary
Smart buttons are buttons on your website that can interact with the Qualified messenger. For example, a smart button that says "Talk to an Expert" can open the messenger for interactive live chat or trigger an experience specific to that use case. In this article, we've covered how to configure smart buttons on your website, including:
- Create an HTML button
- Have your smart button trigger a specific experience
- Test your smart button
.svg)
