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
View original
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.
+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 sergey@archive.ai. 🙏🏼
+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? 
Already have an account? Login
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
