Build interactions between your site and your bot

Add buttons or links to your web page that open your chatbot 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 Helpfruit 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 chatbot 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

How to add Helpfruit buttons/links to your site

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

• First, make sure the Helpfruit chatbot 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 your chatbot 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.