“”

Configuring Smart Buttons

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 it can trigger an experience specific to that use case. In this guide we'll cover how to configure smart buttons on your website, including:

  1. Create an HTML Button
  2. Have your smart button trigger a specific experience
  3. 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 guide we'll use a simple button example.

We want to place a smart button on our website product page that says "Talk to Us Live" and we want that button to take an action to either open an experience running on the site (for example, live chat), or to trigger a specific experience with custom logic (for example, route to a specific team or book a meeting)

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 that we'll use for this guide:

<a href="#" class="my-smart-button">
      TALK TO US LIVE
</a>
A standard HTML button with your desired CSS
An example of what a button might look like on your site

Have Your Button Trigger a Specific Experience

Whether or not you already have an experience running on the page, you can have your smart button 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.

  1. Create a new Experience in Qualified by going to Settings > Experiences > Manually Triggered Experiences
Manually triggered experiences in Qualified.

2. Create the experience you want to trigger

3. Copy the experience ID

Copying the experience ID to place into your HTML smart button.

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:

Testing a smart button live on your website
Testing a smart button live on your website

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 it can trigger an experience specific to that use case. In this guide we've covered how to configure smart buttons on your website, including:

  1. Create an HTML Button
  2. Have your smart button trigger a specific experience
  3. Test your smart button

Next Steps

As a next step in your education, you might find the following guides useful

Request a live demo

See Qualified in action on your website. Request a live demo and one of our reps will contact you immediately, or talk to us right now.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Free custom demo
Live on your site