Back to Help

Website integration

Learn how to add FAQ Bot to your website with just 2 lines of code or with Google Tag Manager, and create interactions between your website and your chatbot.

Integrating FAQ Bot into your website

Adding the FAQ Bot chat widget to your website is as easy as adding something like Google Analytics. If you’re familiar with adding similar scripts to a web page or content management system like Webflow it’s no more than a 5 minute job ⚡️

Google Tag Manager is another option, allowing more advanced control over the display of your FAQ Bot at a page level, and allowing you to delay the chatbot loading, which can help improve the perceived performance(especially on mobile).

You can also build interactions (eg via button or link) between your site and your chatbot. This can be a great way to provide on-page help, initiate live chat, or use a conversational form experience to capture leads.

In this help article we’ll show you how -  from basic bot integration to more advanced interactions.

Basic integration of FAQ Bot on your website

For a simple setup all you need to do is add two lines to your website on all pages you want the bot to appear.  

The first line is an HTML DIV element which is added inside the <body> tag. Just above the closing </body> tag is a good spot.  The second line is a link to a JavaScript file. This is added straight below the div (also inside the <body> tag).

Most content management systems will let you add code like this in one place, which will reflect across all pages.  

Here is an example:

<html>
   <body>
       <!-- rest of your page content>
       <div id='bot-id-xxxx'></div>
       <script src='https://portal.faqbot.nz/api/v1/scripts/xxxx/js/corejs' async></script>
   </body>
</html>

The bot subscription key (xxxx above) is specific to your account, and can be found on the Widget Setup tab in the FAQ Bot portal.

You can change the colours of the chat widget and other styling options from within the FAQ Bot portal too. That’s all you need to do!  

How to install an FAQ Bot chatbot on Webflow

Webflow is a widely used content management system, and installing FAQ Bot on Webflow is straightforward.

First grab your DIV and Script code lines from the FAQ Bot portal – see above - and then open your project in Webflow.

Head to the Project Settings area and go to the “Custom Code” tab:

Then in the footer section add the code into the “before </body> tag” section.  

Save your changes and publish the site. You can also use Google Tag Manager ⬇️

Installing FAQ Bot with Google Tag Manager

Google Tag Manager is a common way to manage all the scripts like ad conversion trackers and other things that load on a website. Google Tag Manager makes it easy to add your chatbot to all pages on your site, just some pages, or control other aspects such as delaying the load.  If you don’t know how to use GTM then first start with their getting started information.

How to add FAQ Bot to your site using Google Tag Manager

  1. Open your workspace and add a new Tag
  2. Name it “FAQ Bot load”
  3. Click “Choose a tag type” and select “CustomHTML” from the list
  4. Copy the DIV and Script tag information from theFAQ Bot portal (see first section above) and paste this into the custom html area
  5. In the Trigger section, click ‘choose a trigger’ and select your trigger that fires on all pages. Normally you will have created one of these already for other scripts. If not, select ‘+’ from the top right, add a new ‘page view’ type trigger, select “All Pages views” as the option and save it with a clear name like “All Pages”.

Your tag should look something like this (with real IDs not XXXX):

Save and publish your new tag.

How to ensure your FAQ Bot is only displayed on certain pages of your website

Instead of using an “All Pages” trigger, you can make other trigger variations that only load the bot on some page urls or exclude certain pages urls. Google has good help on setting up triggers.

Delaying the chat widget load using Google Tag Manager

Any script added to your website will slow it down a little and that’s also the case for FAQ Bot. We cache and minimise the code to make it load fast, but there is a limit to how quickly any chat widget will load – including ours. The good news is that you can use Google Tag Manager to delay loading the chat widget until after the page has loaded by completing these three steps:

  1. Make a new tag that has a little bit of code in it. This code creates an ‘event’ that is fired a few seconds after the page has finished loading.  
  2. Make a new trigger that listens for this event
  3. Update the FAQ Bot tag so that it uses this event trigger instead of a page view trigger.

For instructions on how to create these tags, including the code you need to add, see the “Delay Tags” section of this blog post.  

Experiment with the delay – you may find increasing the delay to 3 seconds will improve Page Speed scores. There is a trade-off as delaying the widget load by too much means users can’t start chatting immediately.

Adding question buttons or links to your website 

Build interactions between your site and your bot

FAQ Bot has a unique feature that allows you to make buttons or links on your webpage to open the chatbot and ask a question or send an event. This means customers don’t need to type at all and get their answer more quickly - without leaving the page.

This can be a great way to provide contextual help or use a conversational form experience to capture leads.

You could add a special button to product pages that ask your chatbot “how much does shipping cost?”.  This is super handy, especially when you want to intercept common questions that come through to your support team – or you want to engage people 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 do you make buttons that open the chatbot and ask it a question?

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

First, make sure FAQ Bot is loaded on your site (using one of the methods above). Then add one of the following code snippets just above the </body> tag:

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

<script>
$(".faqbot-btn").click(function() {
  varquestion = $(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>
functionaskQuestion(event) {
varquestion = 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>

Now 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 myquestion" 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.