📟Custom Widget (HTML widget)

Pitch supports adding custom HTML Widget inside sidebar. That custom widget will show up both inside sidebar on Home page and inside Posts with sidebar.

To add Custom Widget:

1. Go to Settings > Design & branding from the admin menu

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

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;
    top: 100px;
    animation: fadeIn 1s ease-in-out;
    transition: top 0.45s ease;
}

.gh-sidebar-custom-widget.with-big-header {
    top: 180px;
}

.gh-sidebar-custom-widget.moved {
    top: 28px;
}

.gh-sidebar-custom-widget.inside-post {
    padding-bottom: 104px;
}

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