What is a Smart Button?

A Smart Button allows organizations to add contextual help to any website. A Smart Button can be placed on any clickable element on a screen and it will deliver content to the user/customer without leaving the screen. A Smart Button can deliver either an Article or a Form to the customer. This digital on-page delivery is made possible by Messenger.

Smart Button Use Cases

Smart Buttons can be used in a varieny of situations to deliver better and more contextual experiences to customers. Here are a few examples

1. Add a Smart Button on a field instead of tooltip when more robust help information is needed
2. Prompt a user to complete a survey form without needing to navigate to a different page
3. If a user is stuck and hasn't passed a specific step in 20 seconds or has failed a validation multiple times, you can launch a help Article on the same page
4. Place additional help buttons in a critical workflow of a journey to allow customer to self-help without leaving a specific workflow

Types of Smart Buttons

Today we have two types of Smart Buttons - Article and Form. Article Smart Buttons deep link customers to specific Knowledge Articles and Form Smart Buttons deep link customers to specific Forms.

Adding an Article Smart Button

An Article Smart Button allows organizations to add contextual help to any website. An Article Smart Button can be placed on any clickable element on a screen and it will deliver a Knowledge Article to the user/customer without leaving the screen.

To turn any element on the page into a Knowledge Article Smart Button, add the data-sb-article attribute:

data-sb-article="[article url]"

Example snippet: 

<button data-sb-article="https://mykb.goboomtown.com/kb/Help-Article">
Click Here for Help
</button>

Additional Information:

1. This can be added to any type of element (not just <button>)
2. You can also use the global API to launch an Article
   1. OvationMessenger.openArticle('article url') 
   2. Attach an onclick handler to any element, or call programmatically anywhere in your application. For example, if a user hasn’t progressed past a step in a flow after 20 seconds, or has failed a form validation 5 times, load a help article to assist with that step. Here's a samle code snippet using the onclick handler:

<button onclick=”window.OvationMessenger.openArticle(‘https://mykb.goboomtown.com/kb/Help-Article’)”>
Click Here for Help
</button>

Adding a Form Smart Button

A Form Smart Button allows organizations to add data capture to any website. A Form Smart Button can be placed on any clickable element on a screen and it will deliver a Form to the user/customer without leaving the screen.

To turn any element on the page into a Form Smart Button, add the data-sb-form attribute:

data-sb-form="[form url]"

Example code:

<button data-sb-form="https://f.goboomtown.com/screens/forms/ABC123">
Click Here to Submit Feedback
</button>

Additional Information:

You can also use the Messengert global API to launch a Form Smart Button using the OvationMessenger.openForm(formURL) API. Here's an example:

<span onclick="window.OvationMessenger.openForm('https://f.goboomtown.com/screens/forms/ABC123')">
Click Here to tell us how we did!
</span>