Skip to main content

We have SaaS product built using React.

The issue is when the components gets re-rendered (it disappears and appears in just milliseconds, not visible in naked eye ofcourse) it breaks the product tour and it points to the top left corner and literally pointing to nothing.

 

What I think is happening is that, the component disappeared then since the Product tour couldn't find the element it will just point to the top left corner, but that's just in milliseconds.

 

Stopping the elements from re-rendering could be tough job for us but possible, so I'm asking if this is possible to fix or any workaround.

Hey @user1588​ Racheal from the support engineer team here👋 

 

Ah, I think your assumption is correct- we likely can't find the element, which breaks the Tour. Is it an option for your team to put a Post type step in place before the Pointer? Since the Post doesn't need to point at any specific element it can serve as an in between step while the page finishes rendering.


Hello @racheal​ , sorry for the late reply. No, that won't work. First of all, All elements were initially rendered properly before even the Product tours started. The issue is, we are using React front-end framework which has re-rendering capabilities (the target element is re-created but has the same ID attribute and same position) to update some elements. Re-rendering is usually very quick just in milliseconds and it seems Intercom couldn't properly supported that yet.


Hey @user1588​ Ah, yes I see you have been working with the team on this for a bit. I was able to get more context after taking a look and getting caught up on issue from your Conversations. At the moment, unfortunately, there doesn't look to be a workaround here. Your team will need to stop the elements from re-rendering. However, I can assure you that my teammate has reported all of your teams feedback internally and we really appreciate you bringing these pain points to surface for us!

 

For future viewers- this is currently an expected limitation with the react based projects. When the elements get re-rendered you need to make sure that the pointed element remains in the same location and with the same attribute name. This way the pointer will keep pointing to the right location on the page, or you will need to stop re-rendering the elements, so then the tour steps will remain pointing the right location.

 


When the elements get re-rendered you need to make sure that the pointed element remains in the same location and with the same attribute name.

@racheal​ can you verify if this is really supported? Because the pointed element is in fact in the same location and has the same attributes.


Hey @user1588​ Just to confirm, has your team implemented the changes to stop the re-rendering of elements?


Reply