Clicking on CTA buttons should open links in a new tab

Wishlist Audio Player
1

Audio player - Apple music, Spotify, youtube music link cta buttons need to open in a new window on desktop.

They open in the same tab and take the user off-site.

No option to “open songs in a new window” :frowning:

2

Hi there, @user20399 :waving_hand:

Nice idea, thanks for sharing! We’ll have it in mind and see for more feedback from other users.

In the meantime, our devs will be happy to provide a custom solution for you. Do you want to open links in a new window on desktop only, or on mobile as well?

3

Desktop a new tab for sure, mobile should open in a new tab as well, unless the app is installed on the device.

(Ex: for example Spotify or Apple Music / iTunes - it already does that on mobile, so we’re good on that part)

Thanks guys

5

Hi there, @user20399 :waving_hand:

We’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:

(() => {
  const LINK_SELECTOR =
    '[class*="Buttons__StyledButtonContainer"] a[href][role="button"]';

  const apply = () => {
    util.findAllElements(LINK_SELECTOR).forEach((link) => {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'nofollow noreferrer noopener');
    });
  };

  new MutationObserver((mutations) => {
    if (mutations.some((mutation) => mutation.addedNodes.length)) {
      requestAnimationFrame(apply);
    }
  }).observe(document.body, {
    childList: true,
    subtree: true
  });

  util.waitForElement(LINK_SELECTOR).then(apply);
})();

Check it out and let us know how it works :slightly_smiling_face: