{"versionId":"d8b8bee7-eeb0-4b10-a5c7-08dce67f4e26","articleId":"4b167fc0-98a8-438c-4c4f-08db14571314","title":"Build interactions between your site and your bot","tags":["engagements","integrations","All articles"],"content":"
\n

Table of Contents

\n\n
\n

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

\n

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!

\n

What can Helpfruit buttons/links be used for?

\n\n

 

\n

\n

How to add Helpfruit buttons/links to your site

\n

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

\n\n

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

\n

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

\n

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

\n

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

\n

 <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>

\n

3. Create your question button or link

\n

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:

\n

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

\n

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.

\n

 

\n

Add a button that opens the chatbot and initiates an engagement

\n

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

\n

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

\n

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

\n

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

\n

<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>

\n

3. Create your engagement button or link

\n

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:

\n

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

\n

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.

\n

Using URLs to interact with the chatbot

\n

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.

\n

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.

\n

Step one: Create the URL

\n

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

\n

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:

\n\n

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.

\n

Step two: Add the script to your page

\n

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

\n
(function () {\n    var hf = window.faqbot;\n\n    function getQueryParams() {\n        var params = {};\n        var queryString = window.location.search;\n        var urlParams = new URLSearchParams(queryString);\n    \n        // Loop through all parameters and add to params object\n        urlParams.forEach(function (value, key) {\n            params[key] = value;\n        });\n    \n        return params;\n    }\n\n    function onFaqBotReady() {\n        window.removeEventListener(\"faqbotready\", onFaqBotReady);\n        return hf && hf.open();\n    }\n\n    function openFaqBot() {\n        if (hf && hf.open) {\n            hf.open();\n        } else {\n            window.addEventListener(\"faqbotready\", onFaqBotReady);\n        }\n    }\n    \n    // Check if 'hf-open' parameter exists and its value is '1'\n    var queryParams = getQueryParams();\n    if (queryParams[\"hf-open\"] === \"1\") {\n        openFaqBot();\n    }\n\n    // Check if 'hf-question' parameter exists and its value is not empty\n    // If so, ask the question when ready\n    function onFaqBotReadyAskQuestion() {\n        var question = queryParams[\"hf-question\"];\n        var hf = hf;\n        hf.askQuestion(question);\n        window.removeEventListener(\"faqbotready\", onFaqBotReadyAskQuestion);\n    }\n\n    function askQuestion(question) {\n        if (hf && hf.askQuestion) {\n            hf.askQuestion(question);\n        } else {\n            window.addEventListener(\"faqbotready\", onFaqBotReadyAskQuestion);\n        }\n    }\n\n    var question = queryParams[\"hf-question\"] || \"\";\n    if (question !== \"\") {\n        askQuestion(question);\n    }\n})();
\n

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.

","description":"","isMarkdown":false,"publishedOnUtc":"2024-10-15T00:43:38.6882479","modifiedOnUtc":"2023-03-05T22:10:54.1092679"}