Skip to main content
Answered

Issue with tour pointer

  • June 28, 2023
  • 1 reply
  • 148 views

I’m designing a product tour to allow users to add information. We currently have an add new button at the top of the table, and one underneath. The top button works fine, but when I add the step to click on the bottom button, everything seems okay until I go in to preview it. The step scrolls to the bottom, but the box with the step description gets stuck at the middle of the page and doesn’t point to the other button. I’ve tried having it point to the CSS selector in the advanced, but can’t seem to get it to work. Please see attached screenshot. you can see the 5 of 5 for the box in the tour at the top, and the add new button at the bottom. I’ve also tried this with a unique button at the bottom of the page and I still get the same issue.

 

Best answer by cameron.gumley

Hi@Kason McCaskill -- Cam from the Intercom Support Engineering team here 👋

This type of behaviour can occur within Tour steps when the element thats been selected uses a position: relative property in it's CSS. Could you check if this is the case here, and if so try removing/changing the property and see if that does the trick?

After doing that, if this still happens then I’d recommend annotating the HTML of the button element to add the special Intercom attribute data-intercom-target="exampleattribute" and using this to identify the element within the Tour builder - directions on how to set this up here. This will allow the Tour to more effectively/efficiently identify and target the element on the page - something it may be struggling to do at the moment. 

image.png

Let me know how you go!

View original
Did this topic help you find an answer to your question?

1 reply

Forum|alt.badge.img+4
  • Intercom Team
  • 109 replies
  • Answer
  • June 29, 2023

Hi@Kason McCaskill -- Cam from the Intercom Support Engineering team here 👋

This type of behaviour can occur within Tour steps when the element thats been selected uses a position: relative property in it's CSS. Could you check if this is the case here, and if so try removing/changing the property and see if that does the trick?

After doing that, if this still happens then I’d recommend annotating the HTML of the button element to add the special Intercom attribute data-intercom-target="exampleattribute" and using this to identify the element within the Tour builder - directions on how to set this up here. This will allow the Tour to more effectively/efficiently identify and target the element on the page - something it may be struggling to do at the moment. 

image.png

Let me know how you go!


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