Embedding Helpjuice in a web page

5217a53eb06396a4f9289ae6941cef62

Written by Guilherme de Andrade Arantes

Last published at: April 22nd, 2019

Installing Helpjuice is really easy. It takes just a few minutes to connect Helpjuice with your website. Check all the ways you can install Helpjuice here.


Embed Helpjuice Via Our Javascript Embed Code

Please note: If you'd like to use Helpjuice, behind an "authenticated wall" (i.e.: make sure people have to be logged in to view your knowledge base, the Javascript Embed Option is great, as it allows you to turn off access to your knowledge base, unless people visit it via the javascript embed)

You can use Helpjuice as a widget on your website. All you would need to do is copy-paste this code below anywhere on your website.

Best practice when using iframe code is to put it inside div with some class, so you can position it easier on your website. Embed code is below.

<div id="helpjuice_js_widget_content">
 <img src='https://helpjuice.com/images/cube-theme/loading.gif' class="helpjuice-loading-spinner" />
</div>
<script>
 var helpjuice_account_url = "https://YOUR_SUBDOMAIN.helpjuice.com";
</script>
<script src="https://s3.amazonaws.com/assets.helpjuice.com/helpjuice.min.js"></script>


Helpjuice Javascript Embed for 1-page apps (hash based)

The following only applies for 1-page, hash based, apps.

In case you are using a single page application, such as Ember or Angular, it's important to define a variable, where your knowledge base hash is living on.

 
The Helpjuice_preset_hash This would be the "base" of your helpjuice URL prefix, where Helpjuice is loaded.

For example, if Hj is running on #settings/help, you would type settings/help as the helpjuice_preset_hash value. 

<div id="helpjuice_js_widget_content">
 <img src='https://helpjuice.com/images/cube-theme/loading.gif' class="helpjuice-loading-spinner" />
</div>
<script>
 var helpjuice_account_url = "https://YOUR_SUBDOMAIN.helpjuice.com";
 var helpjuice_preset_hash = ""; 
</script>
<script src="https://s3.amazonaws.com/assets.helpjuice.com/helpjuice.min.js"></script>