Answered

Use same data-intercom-target label in different components/elements

  • 23 June 2023
  • 2 replies
  • 236 views
H

I’m creating a Design System/UI Kit where I also want to add the data-intercom-target to each element/component of the DS/UI Kit, to make it easy for other colleagues to create Product Tours in our app but selecting a specific element in the page, instead of using a CSS class (which is a bit hard atm).

Since I’m considering keeping the data-intercom-target generic for each element/component (i.e. every Primary button will have a <button data-intercom-target="primary-button" ...>, I want to know if this is possible or if will cause any constrains.

Namely, if a page has several elements with the same data-intercom-target (like, 10 Secondary buttons), if I select one on my product tour, will all of them be selected? Or will the product tour break, since it finds 9 other with the same data target? Or will Intercom just select a specific “secondary button” (that happens to have the same data target as the other buttons) and ignore the other?

Thanks in advance!

 

TL;DR: Can I use same data-intercom-target labels on elements on the same page without breaking the product tour? Or each data target label should be unique?

icon

Best answer by Racheal 27 June 2023, 02:52

View original

2 replies

Racheal
Userlevel 4
Badge +5

Hey @Hugo Figueira Racheal from the support engineer team here👋 

 

It's not possible to highlight multiple of the same selector, so they will not all be targeted here. In a scenario where there are multiple identical selectors elements that match, the Tour will highlight the one that appears first in your sites code. Since it is likely to cause issues we do typically suggest using IDs or classes that are not being repeated (at least on the same page)- but totally understand this isn’t ideal for your use-case of making things easier for the team. 😓

H

Hello @Racheal! Thank you very much for your reply.

Although, my question was slightly different. I want to use the same label for the data-intercom-target, but highlight just one of them (the one I select on the product tour when creating it), not all of them at once.

Would that be possible, or will Intercom only highlight the first that appears with that name in the DOM?

Thanks!

Reply


Terms & ConditionsCookie settings