Option Open in the New/Same tab

Wishlist Social Media Icons
1

Hello,

We would like to have the option “Open in new tab" for the social media icons, similar to how it’s implemented for buttons.

We also use the social media icons to link to pages within the same site. It’s a bit confusing for visitors when a new tab opens for an internal link.

Thank you in advance
André

1 Like
3

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

Thanks for sharing your idea with us!

We agree that it would be awesome to have this option in the settings. If more users upvote this request, we’ll try to think it over in the future updates.

As for now, our devs prepared a special script to open links in the same tab:

const waitForElement = (selector, root = document, maxAttempts = 500) =>
  new Promise((resolve) => {
    let attempts = 0;
    const check = () => {
      const element = root.querySelector(selector);
      if (element) {
        resolve(element);
      } else if (attempts < maxAttempts) {
        attempts++;
        setTimeout(check, 100);
      }
    };
    check();
  });

function processSocialIcons(container) {
  container.querySelectorAll('a').forEach((link) => {
    if (link.getAttribute('target') === '_blank') {
      link.setAttribute('target', '_self');
    }
  });
}

function observeNewIcons() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(({ addedNodes }) => {
      addedNodes.forEach((node) => {
        if (node.nodeType !== Node.ELEMENT_NODE) return;
        if (node.matches && node.matches('.eapps-social-icons')) {
          processSocialIcons(node);
        } else {
          const nested = node.querySelector && node.querySelector('.eapps-social-icons');
          if (nested) {
            processSocialIcons(nested);
          }
        }
      });
    });
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}

waitForElement('.eapps-social-icons').then(() => {
  document.querySelectorAll('.eapps-social-icons').forEach(processSocialIcons);
  observeNewIcons();
});

This script should be added to the Custom JS field on the Style tab of your widget’s settings :slightly_smiling_face:

1 Like