BeeGuide
BeeGuide features
Easy to use
It is very easy to create product tours, and integrate those tours
End-to-end product tours
For different pages/views/flows we can create different tours, so no features are left
Not so expensive
For simple tours lot of in market existing solutions charge hefty charges and subscription fees which is not justified, this tool costs for just a fraction of that price
Responsive accross all browsers and screen sizes
If you have an app that adapts as per the users screen view-port, no worries our tours can adapt to different user screens and their screen sizes, so you create one tour that is responsize across
Programmatic access to trigger tours/guides
The integration script exposes few apis that can be used in order that you can call these functions to invoke product tours through code
How to install?
Choose any of the below installation option
How to create tours?
- Download and install the extention
- Generate your unique token by going to generateToken page
- Launch the extention, go to settings tab and insert your unique token
- A new screen ui will popup, choose the overlay color, arrow type, fill title, subtitle and other details
- Click lower case `c` on keyboard
- Hover over the element which you want to highlight
- After correct element is hovered and you are satisfied with the hovered selection of element then click lower case `d` on keyboard to capture the hovered element
How to integrate created tours in my app?
- Go to Genrate Token page Signup/Sign in with your IBMid then a token will be generated for you
- Place this token in below script and to integrate tours just copy paste below tag in your root index.html or js file
- To initialise particular tour on particular web page/ route, call
window.BeeGuide.beeTour({ tourId : <tourId>, strategy: "local" })
Here strategy can have 2 options- session - The tour once skipped will be shown only when browser/tab is closed
- local - The tour once skipped will be shown only when browser/site cache is cleared
- Call to show hotspot for a feature.
- Call to clear/reset all the tours that are visible on screen, should be called every time before the page/url/location change happens or your component is unmounted/unloaded
Note: please call the above functions after ensuring whether
the functions are registered in window or not
<script
id="beeguide-tools"
src="https://ssmui-beeguide.saashub.us-south.containers.appdomain.cloud/beeguide-tools.js"
data-token="YOUR TOKEN GOES HERE"> </script>const script = document.createElement("script");
script.src = "https://ssmui-beeguide.saashub.us-south.containers.appdomain.cloud/beeguide-tools.js";
script.async = true;
script.dataset.token = "YOUR TOKEN GOES HERE";
script.id = "beeguide-tools"
document.body.appendChild(script);
import Script from "next/script";
<Script
id="beeguide-tools"
src={"https://ssmui-beeguide.saashub.us-south.containers.appdomain.cloud/beeguide-tools.js"}
data-token={"YOUR TOKEN GOES HERE"} />