Chatbot documentation

Implementation with page head access

1. Put this line between the <head> en de </head>:
<script src=”https://cdn.helpr.ai/latest/helprchat.min.js”></script>

2. zet tussen de <body> en de </body> de onderstaande regels:
<script>
  helprAPI.start({learning_id:”XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”}
</script>


If you want or need to specify the user on your client side you can pass a user id as parameter
<script>
  helprAPI.start({learning_id:”XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”, user_id:”XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”}
</script>

Note: All user id’s are UUID-4

Implementation without page head access

1. Put this line between the <body> en de </body> or your custom HTML block (WordPress):
<script>
    var script = document.createElement(“script”);
   script.src =” https://cdn.helpr.ai/latest/helprchat.min.js“;
    script.onload=function () {
      helprAPI.start( {learning_id:”XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”});
   };
   document.head.appendChild(script);</script>
</script>

If you want or need to specify the user on your client side you can pass a user id as parameter as follows: 
helprAPI.start({learning_id:”XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”, user_id:”XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX”}

Note: All user id’s are UUID-4

Embed the bot in a frame

If you rather use your own frame or position of the chatbot with size and position follow these steps:

1. Do ether the implementation with or without <head> access
2. Make a <div class=”helpr-chatbot”> at the place where you want the chatbot to be
3. Style the <div class=”helpr-chatbot”> To fit the size and position you want. 

That’s it. The bot will check for that element and position itself within it. Just don’t forget to check if it works as you want to and if it works good on mobile for your use case. 

Chatbot API control

Once implemented, the chatbot can be controlled by other JavaScript commands to do various things.
Functions start with helprAPI. followed by the command so all functions can be used like this  helprAPI.maximize();
Below a list of functions and what they do. 

start();
start the Chatbot.


close();

Closes the chatbot and clears up.


restart();
Restarts the chatbot.


maximize();
Shows the chatbot.

minimize();
Hides the chatbot and shows the icon to reopen the chatbot.

show();
Shows the chatbot.

hide();
Hides the chatbot and shows the icon to reopen the chatbot.

debugMode();
Toggle the chatbot (ON/OFF) in Debug mode.

Google Tag Manger notice

Google Tag Manager can be used to implement a chatbot but can cause interference with adblockers! 
For this reason we do NOT recommend the use of google tag manager.

Common problems

Bot doesn’t load 
– Is Helpr.ai blocked by a network firewall on the page or you’re website?
– Is the learning_id correct (you can check this in the console of your browser)?
– If you use internet explorer the bot refuses to load due to safety concerns. If you do need internet explorer please contact support. 

Still having trouble?
No worries, we are here to help.
Please contact us
here and we will help you get it fixed.