How to add Hablo to your website

This guide will take you through the steps to add the necessary script to your website for Hablo to work.

You will need to sign up for an account first to complete the installation.

Get your unique chat script

  1. Log in to your Hablo account.
  2. Click on your website name in the menu and then select Widget from the dropdown menu.
  3. There will be a box on the Widget page with the script in it.
  4. Copy all of the text in the box, including the <script> the ending </script> bits.

Add the chat script to your DNN website

  1. Log in to DNN and click on Modules > Add New Module.
  2. Drag and drop the HTML Module onto the page. In our example we have added it as close to the footer as possible. DNN how to add an HTML module
  3. Open the module settings by clicking on the cog icon and selecting settings. how to open dnn module settings
  4. Under Basic Settings remove any content from the Module Title textbox.
  5. Under Advanced Settings check the Display Module On All Pages box and then paste your chat script into the Header textbox. Adding chat tracking script to DNN Module settings
  6. You should remove the default DNN content added to the HTML Module. To Do this click on the pencil icon and select Edit Content. How to edit DNN Html module content
  7. Now make sure you are in HTML Mode then remove any text within the editor and click Save. how to clear content from DNN HTML Module

Check your script

  1. In order for the chat widget to show, there needs to be an agent ready. Log in to your account and set your status to Ready.
  2. Now go to your website and refresh the page. Your Hablo chat box should now appear on the page.
  3. Now that you have the basics setup, you can customize the look of your widget and change some of the default options.
    Important! You will not have to reinstall the script again for changes to take effect.
  4. Please see our customization guide for more details.