---
title: "Installing Lighthouse"
description: "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."
url: "https://support.helpdocs.io/article/6ksp87dzaj-installing-lighthouse"
category: "Lighthouse"
updated_at: "2021-01-29T00:01:11Z"
---

# 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.

[Embedded iframe](https://player.vimeo.com/video/260185483)

### 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](https://helpdocs.io/pricing)
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](https://my.helpdocs.io/app/settings?tab=lighthouse)) 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](/article/cgz4k4miyd-understanding-lighthouse#contact_form_live_chat_button), 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** &gt; **Code** &gt; **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](/article/ykv7l5jthy-lighthouse-widget-api) and start adjusting the config values and/or using the methods provided. Have fun!