> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/the-reporter-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/the-reporter-user-documentation/custom-widget-html-widget.md).

# Custom Widget (HTML Widget)

**The Reporter** supports adding custom **HTML Widget**. That custom widget will show up  inside sidebar on Posts with sidebar pages. 

### To add **Custom Widget:**

1. Go to **Settings > Design & branding** from the admin menu and click <mark style="color:green;">**Customize**</mark>
2. Click **Site-wide** in the **Design** settings sidebar on the right
3. Find **HTML WIDGET** text input
4. **Paste** <mark style="color:green;">**HTML**</mark> **code**, prepared for your widget and click **Save**
5. **To add&#x20;**<mark style="color:green;">**CSS**</mark>**-styles,** go to **Settings** > **Code Injection**&#x20;
6. **Paste** your <mark style="color:green;">**CSS**</mark> code inside **Site header** text input (Your **CSS** code should be inside [**HTML tag \<style>\</style>**](https://www.w3schools.com/tags/tag_style.asp))

   <figure><img src="/files/klV8Us1uU3gFcolkdxjU" alt=""><figcaption></figcaption></figure>
7. **To add&#x20;**<mark style="color:orange;">**JavaScript**</mark>**&#x20;code,** go to **Settings** > **Code Injection**
8. **Paste** your <mark style="color:orange;">**JavaScript**</mark> code inside **Site footer** text input (Your **JavaScript** code should be inside [**HTML tag \<script>\</script>**](https://www.w3schools.com/tags/tag_script.asp))&#x20;

   <figure><img src="/files/8py1MWxNfAcUlnR1sYYE" alt=""><figcaption></figcaption></figure>

## TO ADD 'STICKY' EFFECT:

To add "sticky" effect to this widget (so It will stick to the screen when you will scroll page down) you can take this **CSS** and **Javascript** code:

#### CSS:

```css
.gh-sidebar-custom-widget {
    position: sticky;
    animation: fadeIn 1s ease-in-out;
    transition: top 0.45s ease;
}
.gh-sidebar-custom-widget.with-big-header {
    top: 152px;
}
.gh-sidebar-custom-widget.with-small-header {
    top: 60px;
}
.gh-sidebar-custom-widget.moved {
    top: 32px;
}
```

#### JavaScript:

```javascript
const moveWidget = () => {
  const widget = document.querySelector('#sidebar-custom-widget');
  let lastScrollTop = 0;

  const widgetScrollHandler = () => {
    const scrollTop = window.scrollY;
    const windowWidth = window.innerWidth;
  
    if (windowWidth > 1100) {
      if (scrollTop > 200) {
        if (scrollTop > lastScrollTop) {
          widget.classList.add('moved');
        } else {
          widget.classList.remove('moved');
        }
      }
  
      lastScrollTop = scrollTop;
    }
  };

  if (widget) {
    window.addEventListener('scroll', widgetScrollHandler);
  }
};

moveWidget();
```