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 (step 1/2) 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.

Using URLs to interact with the chatbot

It's also possible to provide a link to your website - eg in a newsletter or displayed QR code - that will then open your chatbot. It could even ask a question of the chatbot or trigger an engagement - all from that one link.

To achieve this you need to add a script to your webpage - either via a tool like google tag manager or directly with your web development team.

Step one: Create the URL

First, you need to create a URL that provides enough information that the script can then achieve your goals, eg https://mysite.com?hf-open=1&hf-question=who%20are%20you

The part after the "?" is called the query parameter part. It contains a series of key value pairs, each separated by an "&" character.  In example above we have:

• hf-open=1
• hf-question=who%20are%20you

The "%20" characters in the hf-question parameter are used to replace spaces in the question. "%20" is an example of URL encoding - required as URLs cannot contain spaces (and some other special characters).  Your browser will automatically replace these characters with the correct character when it is time to use them.

Step two: Add the script to your page

Secondly, you need to add a script to your page that can retrieve these parameter values and then take action:

(function () {
    var hf = window.faqbot;

    function getQueryParams() {
        var params = {};
        var queryString = window.location.search;
        var urlParams = new URLSearchParams(queryString);
    
        // Loop through all parameters and add to params object
        urlParams.forEach(function (value, key) {
            params[key] = value;
        });
    
        return params;
    }

    function onFaqBotReady() {
        window.removeEventListener("faqbotready", onFaqBotReady);
        return hf && hf.open();
    }

    function openFaqBot() {
        if (hf && hf.open) {
            hf.open();
        } else {
            window.addEventListener("faqbotready", onFaqBotReady);
        }
    }
    
    // Check if 'hf-open' parameter exists and its value is '1'
    var queryParams = getQueryParams();
    if (queryParams["hf-open"] === "1") {
        openFaqBot();
    }

    // Check if 'hf-question' parameter exists and its value is not empty
    // If so, ask the question when ready
    function onFaqBotReadyAskQuestion() {
        var question = queryParams["hf-question"];
        var hf = hf;
        hf.askQuestion(question);
        window.removeEventListener("faqbotready", onFaqBotReadyAskQuestion);
    }

    function askQuestion(question) {
        if (hf && hf.askQuestion) {
            hf.askQuestion(question);
        } else {
            window.addEventListener("faqbotready", onFaqBotReadyAskQuestion);
        }
    }

    var question = queryParams["hf-question"] || "";
    if (question !== "") {
        askQuestion(question);
    }
})();

Loading this script on a page will look for query parameters "hf-open" and/or "hf-question". If detected, the script will open the bot and ask a question respectively.