📟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 Customize

2. Click Site-wide in the Design settings sidebar on the right

3. Find HTML WIDGET text input

4. Paste HTML code, prepared for your widget and click Save

5. To add CSS-styles, go to Settings > Code Injection

6. Paste your CSS code inside Site header text input (Your CSS code should be inside HTML tag <style></style>)

   
7. To add JavaScript code, go to Settings > Code Injection

8. Paste your JavaScript code inside Site footer text input (Your JavaScript code should be inside HTML tag <script></script>)

   

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:

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

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();