Skip to main content
Answered

How to handle product tours when the page has modals that pop-up if a user clicks something.

D

I have a product tour which encourages users to click 'Create a Tag'. Once the user clicks 'Create a Tag' a Bootstrap modal pops us with the next step. After the user creates a tag, a second tour tells the user how to delete or edit the tag.

 

If a user goes to the page and immediately clicks 'Create a Tag', before the tour appeared, then the tour appears with popup modal, which looks weird.

 

If a user creates a tag and then quickly creates a second tag, the second tour appears when the modal is open. This is very confusing for the user.

 

And idea how to prevent the tour from appearing if the user clicks on a modal or scrolls pass the location of the tour?bad tour 

See the screenshots.

Where product tour should appear

Best answer by Roy

Hello @denna​ 👋,

 

I'm suggesting to delay the product tour launching or add some time (3-4 sec) until that button will be active for users.

 

Delaying the product tour allows you to launch them in the fully loaded application (Just for 2-3 Sec's). How to do that?

delaytour 

Now about second workaround, which I think more helpful in your case: You can make certain buttons non clickable for certain kind of time. Like until page is fully loaded or until the product tour will be started (For 3-4 Seconds). Intercom using this workaround, like if you go to Outbound -> Chats or Posts - You can see that New button is not clickable for certain kind of time (3-4 Sec).

 

You can check following video to better understand the use case:

https://youtu.be/KO3okd5RICs

 

If you can look at the following video, you can find that New button is not clickable for some time. I think following solution will be so helpful in your case and it's requires less development.

 

Let me know if you have any question about this topic, Always happy to help.

View original

S
Forum|alt.badge.img+1
  • Sam
  • Active User
  • July 9, 2021

There's not a wait to resolve this natively with Intercom I'm afraid. There two solutions you could take:

  • Change the ID of the button when the modal is open, thus preventing the tour from starting
  • Use Javascript API to invoke the tour at just the right time.

The tours product is not currently able to make assessments based on the state of your app, so this is something you have to bear in mind when creating your tours. 😃

D
  • Denna
  • New Participant
  • July 9, 2021

Thank you for the details. I am using the Intercom Tour feature so I can keep my engineering team focused on other issues. If I need to involve engineering I might as well have my engineers create the whole tour and reduce my spend on Intercom.

R
Top Expert ✨
Forum|alt.badge.img+5
  • Roy
  • Expert User
  • July 10, 2021

Hello @denna​ 👋,

 

I'm suggesting to delay the product tour launching or add some time (3-4 sec) until that button will be active for users.

 

Delaying the product tour allows you to launch them in the fully loaded application (Just for 2-3 Sec's). How to do that?

delaytour 

Now about second workaround, which I think more helpful in your case: You can make certain buttons non clickable for certain kind of time. Like until page is fully loaded or until the product tour will be started (For 3-4 Seconds). Intercom using this workaround, like if you go to Outbound -> Chats or Posts - You can see that New button is not clickable for certain kind of time (3-4 Sec).

 

You can check following video to better understand the use case:

https://youtu.be/KO3okd5RICs

 

If you can look at the following video, you can find that New button is not clickable for some time. I think following solution will be so helpful in your case and it's requires less development.

 

Let me know if you have any question about this topic, Always happy to help.

S
Forum|alt.badge.img+1
  • Sam
  • Active User
  • July 10, 2021

It's not really possible without tweaking it at the engineering level- as Roy has pointed out.

D
  • Denna
  • New Participant
  • July 12, 2021

Thank you for including the video!

M
Forum|alt.badge.img+1

I run into a similar issue when a modal on our page is obscuring the element focused by the Product Tour.

I just wanted to let you know that the workaround “Change the ID of the button when the modal is open, thus preventing the tour from starting” does not work. When there is no element matching the selector, Intercom displays the tour anyway. It just does not highlight any element. 😔

The “Time on current page” workaround also does not work reliably in our situation. It makes it even worse because user has more time to open the modal.

Opening the tour using JavaScript API is a no-go for us too. We have a dedicated person that creates the tours. She creates multiple tours per day and we do not have the capacity to release new JavaScript triggers (duplicating the logic she would otherwise specify in the configuration of the tour) every time a new tour is added just to prevent displaying them when modal is open.

Making elements not clickable for certain time is also a no-go in this situation. The modal is opened when user wants to browse a gallery of photos on the page. We do not want prevent users from browsing the gallery in first few seconds after the page loads just because there could be a Product Tour targeted on them.

 

It would be great if there was one of the following settings in the Intercom Product Tour:

  1. Do not display the tour step until element matching the selector is present on page.
    • We could then specify the selector as: `body:not[class*=”Modal--open”] .element-triggering-tour`
  2. Do not display the tour step while element matching the selector is obscured by another element.
    • This would fix the problem universally even for apps that do not have special CSS class on body element when modal is open.

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings