Element Highlighted yet unable to interact with the element

[saravananselvamohan]

Describe the bug
We testing a Guidechimp in a custom site. With the site we able to have element highlighted as per tour steps yet unable to interact with the element.
I checked we didn't disabled interaction layer from the tour options. May I know the checks I am missing. I tested with other sites and Guidechimp flow working perfect. The issue is with my custom site

Expected behavior
Able to interact with the element in DOM

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20
• Browser Chrome
• Version 85

[r-brown]

Hi @saravananselvamohan would you mind to provide us with the website DOM and GuideChimp tour definition, so we can reproduce this behaviour.

Possibly CodePen would be used here to provide HTML, CSS, JS code

[r-brown]

That's would be OK (as we do have access to SF dev/prod).
In this case, may I ask you to provide more context:

• which SF component you are trying to interact with
• your tour definition

If privacy is a concern here - you can send this data directly to guidechimp@labs64.com

[r-brown]

Hello @saravananselvamohan you are just in time :)
Day before yesterday we kick-started this issue Create browser extension to allow guided tours on any 3pp website #28
... where we going to create a new Chrome extension for the same purpose.

[r-brown]

In regards to loading external tours on the websites with the same-origin policy enabled (e.g. Salesforce) - we need to investigate on the permissions available in the extension.

[saravananselvamohan]

@r-brown . Is there any sample documentation for onBeforeChange(), onAfterChange() as how to be used in Javascript object. It would help newcomers. If you guide me I would like to add that in documentation too,please

[r-brown]

Hello @saravananselvamohan

• docu extended - https://github.com/Labs64/GuideChimp/wiki/Configure#events
• new sample added (JS events / onBeforeChange) - https://github.com/Labs64/GuideChimp/wiki/Examples (playground: https://codepen.io/netlicensing/full/BazaXYo)

[saravananselvamohan]

@r-brown . Thanks for the ton of help. Is there any way we can prevent tour from moving to previous steps from a particular step.

[r-brown]

@saravananselvamohan you can use the same onBeforeChange event here:

guideChimp.on('onBeforeChange', (to, from)=>{
  if ( to < from ) {
    return false;
  }
});

[saravananselvamohan]

Describe the bug
We testing a Guidechimp in a custom site. With the site we able to have element highlighted as per tour steps yet unable to interact with the element.
I checked we didn't disabled interaction layer from the tour options. May I know the checks I am missing. I tested with other sites and Guidechimp flow working perfect. The issue is with my custom site

Expected behavior
Able to interact with the element in DOM

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 20
• Browser Chrome
• Version 85

@r-brown . The issue is closely related to z-index value.

[r-brown]

@saravananselvamohan we tested this issue on our side and changing z-index didn't have any effect. Very complex DOM / CSS structure at SalesForce forces this.

Did you manage to fix this behaviour by changing z-index?

[saravananselvamohan]

@saravananselvamohan we tested this issue on our side and changing z-index didn't have any effect. Very complex DOM / CSS structure at SalesForce forces this.

Did you manage to fix this behaviour by changing z-index?

We able to remove the z -index does removes overlay too. So we can interact with element. But Ideally we need to have highlighter that's still an issue

[saravananselvamohan]

@saravananselvamohan we tested this issue on our side and changing z-index didn't have any effect. Very complex DOM / CSS structure at SalesForce forces this.

Did you manage to fix this behaviour by changing z-index?

Is there any way, we can able to highlight the element removing overlay and interaction layer

[r-brown]

@saravananselvamohan you can always add/override your own CSS styles to fix specific layouts (such as SF) - https://github.com/Labs64/GuideChimp/wiki/Configure#styling

[saravananselvamohan]

@saravananselvamohan you can always add/override your own CSS styles to fix specific layouts (such as SF) - https://github.com/Labs64/GuideChimp/wiki/Configure#styling

Will able to resolve those issue by custom css options. Thanks for the help @r-brown. Would like to close the issue

[r-brown]

Hello @saravananselvamohan ,

Coming back to the above discussion I wanted to inform you that we released and published first version of GuideChimp Chrome Extension.

With this extension your guided tour can be enabled on any website with no-coding effort.
The tour definitions for public websites and web apps can be published through the Pull Request at Labs64/GuideChimp-tours