Can I select CSS classes within an iframe when designing a Product Tour?

  • 12 March 2021
  • 4 replies

When designing a product tour using Intercom, I have found that CSS classes and ID's for elements contained within an iframe are not visible to the tour bot. I have tried using the advanced css ID callout in the product tour but to no avail. Please help!


Best answer by Eric Fitz 16 March 2021, 14:05

View original

4 replies

Userlevel 1

Hey @anneliese​! This is expected behaviour, I'm afraid.


The Intercom Messenger and all Messenger-based features like tours don't support being used with/on iframes.


Specifically, an iframe on a website acts like a self-contained, separate webpage, so if the Messenger is not installed in the same iframe, there will be issues trying to recognise and use the tour with stuff inside the iframe.

Userlevel 4
Badge +5

@anneliese​ as @eric f11​ said already, this is not possible and to be honest, many other similar solutions have the same issue when it comes to this (actually, I know only one solution that has a feature to handle the elements in the iframe, I will not market them here).


Is that iframe something you own? I'm just thinking out loud what would happen if you add Intercom script to that frame (with messenger set to be invisible and making sure no other content pops up there)? I doubt it would work, and you might cause more issues than making a solution (as there will be two instances of Intercom initiated at the same time).

@user382​ could you please say what's solution can work with iframe? if you don't want to highlight it here, would you send me an email please to 🙏🏼

Userlevel 4
Badge +5

@user136​ sorry for the late reply.

I found this not to be consistent - and all I was trying so far is to influence CSS of the messenger, not the ballons of product tours.


I was able to influence some elements but not all of them that I needed in my cases...


I think it is about time to give us some styling options @Product Wishlist​ don't you think? 🙂