Installing Lighthouse

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?