Answered

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

  • 9 July 2021
  • 5 replies
  • 502 views
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

icon

Best answer by Roy 10 July 2021, 20:02

View original

5 replies

S
Badge +1

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

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
Rank
Userlevel 1
Badge

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
Badge +1

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

D

Thank you for including the video!

Reply


Terms & ConditionsCookie settings