This guide will help you install the Helpfuel help bar (copy/pasting the two lines of Helpfuel install code) into your WordPress website. There are a few approaches when placing code into a WordPress site, and this guide will run through one of those options. Keep in mind that besides what we list here, there are other approaches that achieve the same result, including editing your code directly, so feel free to use whatever method you feel most comfortable with.

Not on WordPress, or feel comfortable making direct code edits (or know someone who is)? Jump to the How To Install Helpfuel on Your Site guide for more general install instructions.

Before proceeding:

PART 1: Using A Plugin To Place The First Line Of Helpfuel (JavaScript) Install Code In Your Header

If you're familiar enough with posting on WordPress, you probably have used the content box for whatever content you wanted to appear on your site. Because this content box doesn't render javascript, you cannot use it for the first code snippet needed for Helpfuel.

One option to get javascript loaded onto your site, and pages, is to use a plugin so you can place code, including javascript, into your header or footer. The benefit of this, and for the first Helpfuel code snippet, which is javascript, is that you can place it once in your header, and have it repeated on every page. This first code snippet only "activates" when it detects the second Helpfuel code snippet described in the PART 2, so you don't have to worry about any issues.

TECHNICAL NOTE: We use a "defer" attribute for this javascript, so Helpfuel only loads AFTER your page loads, as not to slow down or interfere with the normal operation and loading of your site.

You may already have a similar plugin installed, but if not, the one that we have used in this example is called Insert Headers and Footers. Other options can be used, as well, if you prefer another header/footer plugin.

Here are the steps to follow for placing the first Helpfuel install code in WordPress:

  1. Install and activate the Insert Headers and Footers plugin, or a different header/footer plugin that you prefer. If you already have a similar plugin installed, move onto the next step below.

2. After the plugin is installed and activated, Go to the left sidebar in WordPress and select Settings > Insert Headers and Footers

3. Once there, you should see something like this:

4. Retrieve the first Helpfuel install code snippet from your Helpfuel account. If you need help finding this, see this guide on retrieving your site's install code. The code should look similar to this:

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

5. Copy that first Helpfuel install code and paste it into the "Scripts In Header" input box.

6. Click the "Save" button at the bottom of the screen. Now that you're all done with PART 1 of installing Helpfuel, you can move onto PART 2.

PART 2: Place The Second Line Of Helpfuel Install Code Wherever You Want

Once you have PART 1 completed, PART 2 becomes a simple matter of copying and pasting the second Helpfuel code snippet wherever you want the Helpfuel help bar to appear on your site.

You can retrieve the second Helpfuel install code snippet from your Helpfuel account. If you need help finding the second code snippet, see this guide on retrieving your site's install code. The second code snippet should look similar to this:

<div class="helpfuel" data-id="abc123xyz456"></div>
Example code. Placed wherever you want the Helpfuel help bar to appear

Once you have this snippet of code handy, you can copy and paste it wherever you want the Helpfuel help bar to appear. If you're capable of editing code directly (or know someone who is, that can help you), you can place this code directly in any of the WordPress template files (single.php, page.php, etc.) and that way you can easily have Helpfuel appear on all your pages, post types, etc., without having to enter it into each individual post.

But, if you'd rather place it directly in the WordPress content box, or find that easier to do, you can do that as well, since the second Helpfuel code snippet is just HTML, and can be placed directly into the code editor (not the visual editor) of any post. Just keep in mind that Helpfuel will only appear on the posts where you have pasted this code into... so if you'd like it to appear on all pages/posts, you'll have to copy/paste it into every post's code editor content box (this is why it's easier to place it directly into the template if you want it on every page/post).

Accessing code editor may vary based on your version of WordPress

As an example, which you can see in the screenshot below, we have copy/pasted the second Helpfuel install code snippet within the code editor of the content box within a WordPress post titled "Welcome To My Site". The code editor is a default part of WordPress that you can alternatively select instead of visual editor, and allows you to add/edit HTML directly.

As seen on WordPress 5.5.1

For more information on the WordPress editors, and how to get to the code editor, see more here: WordPress editors.

After publishing, the post will now include the Helpfuel help bar to users that visit this page on your site, which will show up similar to what we have at the bottom of this page. That's it! You should be all set with Helpfuel, and can go back to your account to start adding frequently asked questions and answers.

Having problems with installation? Need help or have questions, ask us here: