# 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="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2FH7SxHjFq6RbOsR7eZ3Ud%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-20%20%D0%B2%2009.54.54.png?alt=media&#x26;token=414c89e5-59b5-4b82-9e63-22468cc8a281" 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="https://2081186865-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3bxOHURMvdKLuPQqvCkT%2Fuploads%2FeabkrFVkwekaPgnNVsg7%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202023-10-20%20%D0%B2%2009.56.52.png?alt=media&#x26;token=64a8e01c-f501-4975-90be-c09809076881" 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();
```