---
title: "Adding Lighthouse Trigger Buttons to Webflow"
description: "Using Webflow for your site but want to open up an article or category when clicking on an element with HelpDocs Lighthouse? You'll need to implement some custom code to get it working properly. This…"
url: "https://support.helpdocs.io/article/rmklv9u39d-adding-lighthouse-to-webflow"
category: "Lighthouse"
updated_at: "2019-12-09T21:36:39Z"
---

# Adding Lighthouse Trigger Buttons to Webflow

Using Webflow for your site but want to open up an article or category when clicking on an element with HelpDocs Lighthouse? You'll need to implement some custom code to get it working properly.

This is what you should end up with:

![](https://files.helpdocs.io/Ytt2uahFxY/articles/rmklv9u39d/1575926910781/finalresult.gif)

Before starting, you'll wanna make sure you've added the [Lighthouse Widget snippet](/article/6ksp87dzaj-installing-lighthouse) to your [Webflow Custom Code](https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site).

### Adding Lighthouse Data Attributes to Triggers

1. First of all you'll want to have an icon ready you'd like to use. A help icon should do the trick. If you don't have one handy, feel free to use ours by downloading ours [here](https://files.helpdocs.io/Ytt2uahFxY/other/1575925635320/help-icon.svg).
   
   We can't help with the placing or making of Webflow elements.
2. You'll want to wrap the image in a link block. It should look something like this (we've added the `Lighthouse Link` class to our link block):
   
   ![](https://files.helpdocs.io/Ytt2uahFxY/articles/rmklv9u39d/1575925739416/screenshot-2019-12-09-22-06-05.png)
3. Select the Link Block, then on the right hand panel select the Element Settings (or cog icon):
   
   ![](https://files.helpdocs.io/Ytt2uahFxY/articles/rmklv9u39d/1575925824141/screenshot-2019-12-09-22-09-55.png)
4. Add a Custom Attribute and name the class `data-lighthouse`
   
   1. Want to open up an article? Use `article-ARTICLEIDHERE`
   2. Want to open up a category? Use `category-CATEGORYIDHERE`

### Making the Triggers Work with Lighthouse

To make the data attributes work properly, you'll want to paste in some custom code. We recommend placing it in your Webflow Website Footer. You can find that in the [Custom Code section](https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site) of your Webflow account.

Replace the `dataAttribute` value if you'd like to use a different name 💃

```javascript
// You can replace the data attribute name herevar dataAttribute = 'data-lighthouse';// Get all elements on the page with the data attributevar dataEls = document.querySelectorAll(`[${dataAttribute}]`);try {  if (!dataEls) throw 'No data-lighthouse found on this page';  Array.prototype.forEach.call(dataEls, dEl => {    var data = dEl.getAttribute(dataAttribute);    if (!data) throw 'Could\'nt find data attribute';    data = data.split('-');    if (data.length !== 2) throw 'You need to include a method and content ID';    dEl.setAttribute('onclick', `Lighthouse.navigate('${data[0]}','${data[1]}')`);  });} catch (e) {  console.log(e);}
```