Skip to main content

We would like to end the product tour with a step pointing to the chatbot. Is there a way to do that?

@Gavin Wilson  Unfortunately I think it’s not possible right now because when you load the builder -- in my experience the Intercom Builder somehow removes the Intercom Help Chat Bubble from the page. 

I do think this is a great way to end a tour just letting people know how to reach out for help, so maybe it could be added to the ideas or the suggestion could be relayed to the team that even the Intercom Chat Bubble be possible to select to add to the tour. 

You may be able to just select the location where the help bubble is but not sure if it would perform correctly since it won’t be able to detect the element. 
 


Hey @Gavin Wilson 

 

As @Nathan Sudds also mentioned, you won't be able to target the launcher directly.

 

The reason for that is Intercom is unable to read/see elements that are installed on a page in an iframe, and the Messenger itself happens to be installed on a page via an iframe. Essentially, it's unable to see itself, so can't create a tour that points to itself.

 

But as a workaround, you can technically create an invisible element on your site which you can place right where your launcher is located. Then you can target that invisible element by using your product tour.

 

If you create a "hidden" div element and place in the same location as your Messenger Launcher, you will be able to target the same location as your launcher. Though, this method will work if you are only using the next/done button and not "click on element".

 

Example:

 

1- Create a div element

 

2- Place it in the right location based on where your messenger is located. In my case it is located bottom-right as standard. Your CSS might need to be configured differently depending on your site structure. Your front-end web developers will be able to achieve this easily.

 

 

3- Now target that div elelement with your product tour step.

 

 

Result:

 

(I set the background colour of the div to Red, just to show you where the div will be located. But you should not use any background colour.)

If you choose the "click on element", this workaround won't be fully suitable. This is because you will be expected to click on the div element and not the messenger launcher. So when you click on the Messenger launcher, you will still be stuck at the same step.

 

Hope this gives you some ideas :)


+1 to make it clicable 🙂 We also would like to indicate the Intercom Messenger and give our users a chance to click on it.


Reply