Configuring Smart Buttons

Smart Buttons are buttons on your website that only display when certain conditions are met. For example, a smart button that says "Talk to an Expert" can be displayed to qualified leads only, but is hidden for unqualified leads. In this guide we'll cover how to configure smart buttons on your website, and we'll cover the following:

  1. Options for displaying smart buttons
  2. Create an HTML Button
  3. Turn your button in a smart button
  4. Make your smart button actionable
  5. Make a minor addition to your CSS
  6. Test your smart button

1) Options for Displaying Smart Buttons

Smart buttons can optionally display on your website when visitors are qualified/qualified and reps are online/offline. Therefore, you can optionally display a smart button when any combination of the following conditions are met:

Smart buttons can be configured to meet any of the above scenarios
Smart button display options

2) Create an HTML Button

To get started with smart buttons, simply create a button that you would want to display on your website. For the purposes of this guide we'll use a simple 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 show up when a lead is qualified and anyone from our sales team is online. In the graphic above this would amount the lop left quadrant.

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've created for this guide:

A standard HTML button with your desired CSS
A standard HTML button with your desired CSS
A standard HTML button with your desired CSS

3) Turn Your Button into a Smart Button

Now that you understand all of the options for displaying a smart button, let's dive into the syntax. By adding the following data attributes to your smart button, you can determine when the button displays on your website. There are 2 data attributes you'll want to be aware of. One for optionally displaying the button when the lead is qualified, and another for displaying only when your sales reps are available (online). Each attribute can have one of 2 values, true or false. Using combinations of "true" and "false" for these 2 attributes you can accomplish any display permutation in the quadrant diagram above. For example, this syntax will display the button ONLY when the visitor is qualified and reps are available.

Adding data attributes to determine when your smart button displays
Adding data attributes to determine when your smart button displays

4) Make Your Smart Button Actionable

It's time to make the button actionable. Currently there is only one supported action, which is to open the messenger for communication to your reps and chat bots.

Adding an action to have your smart button launch the Qualified messenger
Adding an action to have your smart button launch the Qualified messenger

5) Make a Minor Addition to Your CSS

Finally, make a small addition to your CSS which will tell the button to load on the page as hidden (display:none) and after the page loads the Javascript snippet on the page will determine dynamically when and how the button is displayed.

A tweak to your CSS initially hides the button on page load
A tweak to your CSS initially hides the button on page load

6) 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 for qualified leads when your sales team is available.

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 only display when certain conditions are met. For example, a smart button that says "Talk to an Expert" can be displayed to qualified leads only, but is hidden for unqualified leads. In this guide we've covered how to configure smart buttons on your website and reviewed the following steps for creating a smart button

  1. Options for displaying smart buttons
  2. Create an HTML Button
  3. Turn your button in a smart button
  4. Make your smart button actionable
  5. Make a minor addition to your CSS
  6. 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.