search

Build interactions between your site and your bot


Add buttons or links to your web page that open your FAQ Bot and ask a question or send an event.

This can help direct support traffic to your chatbot, and means customers don’t need to type at all and get their answer more quickly - without leaving the page. How good!

What can FAQ Bot buttons/links be used for?

  • Provide contextual help right there on the page
  • Intercept common questions that come through to your support team - have your FAQ Bot answer them, immediately and in situ
  • Use a conversational form experience to capture leads
  • Add a special button to product pages that ask your chatbot “how much does shipping cost?”
  • Engage prospects in chat around a potential sale, eg a “Talk to us” button starts live chat

Try out some page to bot interactions

Click the buttons on our scenarios page to see what happens. 

How to add FAQ Bot buttons/links to your site

Creating buttons is easy, although you will need some basic HTML and JavaScript knowledge.

  • First, make sure FAQ Bot is loaded on your site (see website integration).
  • Then add the relevant code snippet just above the </body> tag.

Add a button that opens the chatbot and asks it a question

1. Use this version if you are already using JQuery on your site:

<script>
$(".faqbot-btn").click(function() {
  var question = $(this).attr("data-question");
  window.faqbot.open();
  window.faqbot.askQuestion(question)
})
</script>

2. If you prefer to use vanilla JS use the following code:

 <script>
function askQuestion(event) {
var question = event.target.getAttribute("data-question");
 if (window.faqbot) {
   window.faqbot.open();
   window.faqbot.askQuestion(question);
 }
}
document.addEventListener('click',function (event) {
  if (event.target.closest('.faqbot-btn')) {
    askQuestion(event);
  }
})
</script>

3. Create your question button or link

To create a button (or a link) that asks a question, add the “faqbot-btn” custom CSS class to them and a custom attribute “data-question” together with the question text you want to ask, eg:

<a data-question="this is my question" href="#" class="faqbot-btn"><div>Ask a question</div></a>

The code above will look for these buttons/links on the page, and will open FAQ Bot and pass the question through when the button is clicked.

 

Add a button that opens the chatbot and initiates an engagement

The code snippets are very similar if you want to trigger an engagement from a button (or link) on your site.

1. Use this version if you are already using JQuery on your site:

<script>
$(".faqbot-btn").click(function() {
  var eventName = $(this).attr("data-event-name");
  window.faqbot.open();
  window.faqbot.triggerEngagementEvent(eventName);
})
</script>

2. If you prefer to use vanilla JS use the following code:

<script>
function triggerEngagementEvent(event) {
 var eventName = event.target.getAttribute("data-event-name");
 if (window.faqbot) {
   window.faqbot.open();
   window.faqbot.triggerEngagementEvent(eventName);
 }
}
document.addEventListener('click',function (event) {
  if (event.target.closest('.faqbot-btn')) {
    triggerEngagementEvent(event);
  }
})
</script>

 

3. Create your engagement button or link

To create a button (or a link) that triggers an engagement, add the “faqbot-btn” custom CSS class to them and a custom attribute “data-event-name” together with the button text you want to show the user, eg:

<a data-event-name="myEventName" href="#" class="faqbot-btn"><div>Button text</div></a>

The code above will look for these buttons/links on the page and will open FAQ Bot and pass the engagement through when the button is clicked.


Helpful?