Get a link for the specific member

Wishlist Team Showcase
1

I have “Projects” and “Services” at my company. On our website we want to have a contact person for each of these Projects and Services. Ideally we could have a contact link to the person’s profile that could be embedded on those “Projects” and “Services” pages.

3

Hi there and welcome to the Community, @user689 :wave:

Just to make things clear: you’d like to get a link to a specific member (contact person) and add this link to the popup of other members’ cards, right?

If yes, do you want to open this link in a new tab or the second popup (with the card of the contact person) should be opened on the link click?

4

You say " add this link to the popup of other members’ cards, right?" — No, not exactly. I’d like to get a link to a specific member which can be referenced in other areas of our website.

5

Got it, thanks!

I’ve discussed your question with the devs, and, unfortunately, it’s impossible to get a link to a specific member at the moment. I am really sorry!

If more users show their interest in this feature, we’ll try to consider this opportunity in the future. We’ll update you here in case of any news :slightly_smiling_face:

7

Hello! Our school would benefit greatly from having this link that user689 asked for. We mention our leadership names across several pages on our website and it would be ideal for viewers to learn more about them with a direct link by person/name versus having to go to the Staff/Faculty page to scroll and find them.

8

Welcome to the Community, @Tanya1 :wave:

I completely got your case, thanks for upvoting the idea! Let’s see if this gets more support from others, and, perhaps, it might be considered in the future updates :slightly_smiling_face:

9

I agree with the other posters. Having a direct link to each “team member” is needed for many scenarios. We are considering using this widget for speakers’ bios for a conference. Being able to link to a speaker’s bio from their session page is necessary. I could see this also being useful if team members were showcased in other areas of a site (e.g., blog, portfolio, news) and the organization wanted to link to the team member’s bio.

10

Hi there, @user28891 and welcome aboard :waving_hand:

Many thanks for sharing your use case with us! We’ll have this idea in mind and see for more feedback from the community :slightly_smiling_face:

11

Hi there, I would like to have this option as well. Is there any update on this? I know this option is available on the calendar widget.

Max 12

Hey everyone!

Although this feature hasn’t been released yet, our devs came up with a custom solution that adds a custom URL param to each member card when opening it in a popup.

To implement it, just add the script below to the Custom JS field on the Style tab of your widget’s settings:

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