Usage

Embedding the user-guiding-script into your project

To embed the user-guiding-script into your project, follow the steps below:

1. Include the following script and CSS link in your HTML file. Make sure to place these lines in the end body tag.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js?token=<WEBSITE_TOKEN>"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/index.min.css"
/>

2. After that, you must initialize the tour connection by using initTourConnection function attached to global window object. This function must be inputted the id of the root element where your Application is mounted (in Acciona linked-site application is root). Example:

<script>
  window.initTourConnection("root");
</script>

That's it! You have successfully embedded the user-guiding-script into your project.

Showing tour in your project

To check whether user has started tour or not, please give us the userId of current user login into the system with the syntax below:

window.dispatchEvent(
  new CustomEvent("store-user-id", {
    detail: { userId: "{{current user id}}" },
  })
);

By default, if user hasn't started before, we will auto trigger to show the tour. But in the remaining cases, if you want to manually trigger tour, please use the syntax below:

window.dispatchEvent(new CustomEvent("show-personal-modal"));

Note

Out tours need certain time to setup for each url, so please only triggers show tour after you received ready-for-touring message.

Example

Below is an example usage with react library:

const [isReadyForTouring, setIsReadyForTouring] = useState<boolean>(false)
const location = useLocation()

useEffect(() => {
  function toggleStateOfTourButton() {
    setIsReadyForTouring(true)
  }
  window.addEventListener('ready-for-touring' as keyof WindowEventMap, toggleStateOfTourButton)

  return () => {
    window.removeEventListener('ready-for-touring' as keyof WindowEventMap, toggleStateOfTourButton)
  }
}, [])

const handleShowPersonaModal = () => {
  window.dispatchEvent(new CustomEvent('show-personal-modal'))
}

return (
  <MenuItem onClick={handleShowPersonaModal} disabled={!isReadyForTouring}>
    <span>Walk Through</span>
  </MenuItem>
)