Table of Contents

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.

River Sloane
Updated by River Sloane

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 a specific 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. Hit Save, and 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>
If you want to use Lighthouse with one of our supported live chat providers, you'll need to include that live chat snippet before the Lighthouse snippet on the page.
Wanna use Lighthouse on your HelpDocs account? You can paste your Javascript snippet in Settings > Code > Javascript πŸ‘©β€πŸ’»

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?

Integrating Lighthouse with Live Chat Providers

Adding Lighthouse Trigger Buttons to Webflow

Get in touch

This site is protected by hCaptcha and its Privacy Policy and Terms of Service apply.