Team Showcase: How to get a link to specific member

[Max]

By default, the Team Showcase widget doesn’t support direct links to specific members.

Good news — our devs came up with a custom solutionю It makes the member’s name appear in the URL, so you can share a link that opens the widget with that person already selected

How to set it up

---

Go to the Settings tab in your widget editor and add the following code to the Custom JS field:

const MEMBER_KEY = 'member';
const TAB_KEY = 'tab';

const GRID = '.eapp-team-showcase-grid-component';
const TAB = '.eapp-team-showcase-tabs-tabsCategory';
const TAB_TEXT = '.eapp-team-showcase-tabs-tabsCategoryText';
const CARD = '.eapp-team-showcase-member-card-component';
const NAME = '.eapp-team-showcase-member-card-info-name';
const POPUP_NAME = `.eapp-team-showcase-popup-item-container ${NAME}`;

function text(node) {
  return (node?.textContent || '').replace(/\s+/g, ' ').trim();
}

function findByText(selector, value, container = document) {
  if (value) {
    return Array.from(container.querySelectorAll(selector)).find(
      (node) => text(node) === value.trim()
    );
  }
}

function waitFor(getTarget, callback, timeout = 5000) {
  const target = getTarget();
  if (target) {
    return callback(target);
  }

  let timer;
  const observer = new MutationObserver(() => {
    const node = getTarget();
    if (node) {
      observer.disconnect();
      clearTimeout(timer);
      callback(node);
    }
  });
  timer = setTimeout(() => observer.disconnect(), timeout);
  observer.observe(document.body, { childList: true, subtree: true });
}

function updateParams(key, value) {
  const url = new URL(location.href);
  if (value) {
    url.searchParams.set(key, value);
  } else {
    url.searchParams.delete(key);
  }
  if (url.href !== location.href) {
    history.pushState({}, '', url);
  }
}

waitFor(
  () => document.querySelector(GRID),
  (layout) => {
    const params = new URL(location.href).searchParams;
    const member = params.get(MEMBER_KEY);
    let opened = '';

    findByText(TAB_TEXT, params.get(TAB_KEY))?.click();

    if (member) {
      waitFor(
        () => findByText(NAME, member, layout),
        (name) => (name.closest(CARD) || name).click()
      );
    }

    document.addEventListener(
      'click',
      ({ target }) => {
        const tab = target.closest?.(TAB);
        if (tab) {
          updateParams(TAB_KEY, text(tab));
        }
      },
      true
    );

    const observer = new MutationObserver(() => {
      const name = text(document.querySelector(POPUP_NAME));
      if (name !== opened) {
        opened = name;
        updateParams(MEMBER_KEY, name);
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
);

Once it’s added, opening a member will update the URL with their name. You can then copy that URL and share it — anyone following the link will land on the same member

Heads-up: Custom JS doesn’t work in preview mode. To test the setup, open the widget on your live website or use the Share Link.

Give it a try and let us know how it works for you