Integrating Helpfruit into your website

Adding the Helpfruit 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 chatbot 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: add Helpfruit chatbot to 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:

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

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

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

How to install a Helpfruit chatbot on Webflow

Webflow is a widely used content management system, and installing your chatbot on Webflow is straightforward.

First grab your DIV and Script code lines from the Helpfruit 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 a Helpfruit chatbot 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 your chatbot to your site using Google Tag Manager

Open your workspace and add a new Tag
Name it “FAQ Bot load”
Click “Choose a tag type” and select “CustomHTML” from the list
Copy the DIV and Script tag information from the Helpfruit portal (see first section above) and paste this into the custom html area
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 chatbot 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:

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.
Make a new trigger that listens for this event
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.

Add buttons or links to your webpage

You can also add buttons or links to your website that will open your chatbot and ask a question or trigger an engagement. Learn how.

Table of Contents