Option to only show the open greeting message on large screens

Ask the Community Customization
1

It would be nice to have the option to only display the greeting open on larger screens but closed on smaller mobile screens, as it can take up too much of the screen.

2 Likes
2

Hi there and welcome to the Community, @Sean_Ryan :waving_hand:

Could you please specify the minimum screen width at which the greeting should be open by default?

1 Like
3

I was thinking of just mobile phone screens. I would base the minimum on the larger phones such as an iPhone 17 Max, which is about 430px wide. I don’t see this as an issue on smaller tablets.

1 Like
4

Got it, thanks! Please try to add this script to the Custom JS section on the General tab of your widget’s settings and let me know if it helped :wink:

const waitForElement = (selector, root = document) =>
  new Promise((res) => {
    const observer = new MutationObserver(() => {
      const element = root.querySelector(selector);
      if (element) {
        res(element);
        observer.disconnect();
      }
    });

    observer.observe(root, {
      childList: true,
      subtree: true,
    });
  });

const isMobile = () => window.innerWidth <= 768;

waitForElement("[class*='welcome-window__Container-sc'] button").then((closeBtn) => {
  if (isMobile()) {
    closeBtn.click();
  }
});
2 Likes
5

Thanks for your help. I will give this a go.

1 Like