Installing Lighthouse

Updated 2 months ago by Jarratt Isted

Lighthouse is a widget that helps you assist your users within your app whenever they get stuck. This means your users can help themselves without ever leaving your site and you'll reduce repetitive support tickets.

The Lighthouse widget is highly customizable with a variety of options to make it look and act the way you want.

Before you start 🚀

To get started with Lighthouse, you'll need:

  1. A HelpDocs account
    1. You'll need to be on the 14 day free trial or on the Pro/Growth plan
  2. A technical team member who is able to paste code within your app

Finding the code snippet 🔍

You can find the JavaScript code snippet by heading to Settings > Lighthouse (or click here) and tick Enable Lighthouse. In the snippet on that page, we'll insert your widget_key for you.

Alternatively you can copy and paste the code below into your, making sure you replace WIDGET_KEY with your widget key.

<script type="text/javascript">
            window.hdlh = {
              widget_key: "WIDGET_KEY"
            };
            (function(h,d){var s=d.createElement("script");s.type='text/javascript';s.async=true;s.src=h+"?t="+new Date().getTime();d.head.appendChild(s);})("https://lighthouse.helpdocs.io/load",document);
          </script>

Placing the code snippet 🏗

When inserting Lighthouse into your app, you'll need to paste the code snippet before the closing </body> tag on every page you'd like to display the widget. Here's an example:

<!DOCTYPE html>
          <html>
          <body>
              <h1>Hello World</h1>
              // HelpDocs Lighthouse
              <script type="text/javascript">
              window.hdlh = {
              widget_key: "WIDGET_KEY"
            };
            (function(h,d){var s=d.createElement("script");s.type='text/javascript';s.async=true;s.src=h+"?t="+new Date().getTime();d.head.appendChild(s);})("https://lighthouse.helpdocs.io/load",document);
              </script>
          </body>
          </html>
          

Customizing Lighthouse 🎨

Now you've installed the widget within your app, it's time to make it your own. To start customizing head to the Widget API and start adjusting the config values and/or using the methods provided. Have fun!


What did you think of this doc?