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 expereince 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 open the messenger
  3. Have your smart button trigger a specific experience
  4. Test your smart button

Create an HTML Button

To get started with smart buttons, simply create a button that you would want to display on your website. 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

Option A - Have Your Button Open the Messenger

If you have an experience already running on the page where the the smart button lives, you can have the button click simply open the messenger. This is often useful for making it more apparent that live chat is available on your site and that a website visitor can immediately speak to someone on your sales team. For experiences that route to sales immediately, a smart button can increase the level of engagement with sales.

Simply add the data-qualified-action="open" attribute to your button to have it open the Qualified messenger, as shown here:

<a href="#" class="my-smart-button"
      data-qualified-action="open">
      TALK TO US LIVE
</a>

Option B - 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.

First, you must create the experience you want to trigger as a Manually-Triggered Experience in the Qualified experience builder, and copy the experience ID. Then 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>

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 open the messenger
  3. Have your smart button trigger a specific experience
  4. Test your smart button

Next Steps

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

Request a Live Demo

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.