This guide will help you install the Helpfuel help bar into your website. This guide assumes you have direct access to your site's code and feel comfortable with making these simple copy/paste updates (or know of someone who is, and can help you).

Are you on WordPress? If so, jump to the How To Install Helpfuel on WordPress guide.

Before proceeding:

The Helpfuel help bar is quick and easy to install. There's just two short lines of code that handle everything. All you need to do is copy and paste the two lines of code into your site, and you'll be all set.

NOTE: We recommend that you should be familiar enough with how to add/edit/save code to your site, or know someone who is, that can help you.

Where To Place Your Helpfuel Install Code

There are two short snippets of code that need to be installed on your site to start using the Helpfuel help bar. If you don't know where your specific install code is, check out our How To Find Your Helpfuel Install Code guide.

1) The first line of code, which can be found in your Helpfuel account, looks like this:

<script src="//iframe.helpfuel.co/load.js" defer></script>
Example code

We recommend installing this code before the closing </head> tag of your site. By "install", all we mean is copying the line of code, and then pasting it into the code of your site, and right before the ending </head> tag.

The reason we recommend putting it before the closing </head> tag, is usually your "head" code is found in a header file that is repeated throughout the site - doing this means this first install code is repeated on every page and you no longer have to worry about including it with the second code snippet found in Step 2 below (or accidentally including it twice which can cause issues).

Since Helpfuel only initiates and works when both code snippets are on the same page, there are no drawbacks in including this first piece of code in your "head" and having it load site-wide, even with pages that don't have the second code snippet present. There are no performance drawbacks, or slower load times, especially because we use a "defer" attribute which ensures that anything related to Helpfuel only loads AFTER the rest of your HTML has loaded - including the Helpfuel help bar generated from the second code snippet (which you'll place in Step 2).

Usually, after copying/pasting this first snippet of code, your final "head" code should look something like:

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//iframe.helpfuel.co/load.js" defer></script>
</head>
Example code

2) The second line of code, which is also found in your Helpfuel account, looks like this:

<div class="helpfuel" data-id="abc123xyz456"></div>
Example code. You'll have to use your specific install code for your site found in your account

Assuming you've already placed the first snippet of code before your closing </head> tag, and that it's now found on every page of your site, all you need to do is copy/paste this second snippet of code wherever you want the Helpfuel help bar to appear. For example, if you have an ecommerce site and want to add Helpfuel below the add to cart button, your final code may look something like this:

<input name="quantity" />
<button>Add To Cart</button>
<div class="helpfuel" data-id="abc123xyz456"></div>
</form>
Example code

That's it. Once the two code snippets are copy/pasted and uploaded onto your site, just load those page in a browser, and you should see the Helpfuel help bar wherever you placed the second code snippet.

Once you see the Helpfuel help bar in your site, you can now go back to your account and start adding some frequently asked questions and answers.

Need help or have questions, ask us here: