Adding walkthrough or product tour in WebViewer

WebViewer Walkthrough is a package that allows you to create step-by-step walkthroughs or tutorials in WebViewer.

To create the walkthrough, ensure that you also have @pdftron/webviewer-walkthrough installed by running npm i @pdftron/webviewer-walkthrough. Then import the package and destructure the initializeWalkthrough function.

1import WebViewer from '@pdftron/webviewer';
2import { initializeWalkthrough } from '@pdftron/webviewer-walkthrough';

Create an array of Step objects that contain the follow keys:

• dataElement: The UI element where you want to get the user's attention
• header (optional): The header text that is rendered in the pop-up
• text: The descriptive text that is rendered in the pop-up

1const steps = [
2  {
3    dataElement: 'leftPanelButton',
4    header: 'Page Thumbnails',
5    text: 'You can see all of the page thumbnails here.'
6  },
7  {
8    dataElement: 'pageNavOverlay',
9    text: 'Navigate pages'
10  }
11]

To find the correct dataElement please refer to the guide about how to show/hide elements.

Once you have an array of Step objects defined, call initializeWalkthrough function with the following parameters:

• viewerElement: The same element that WebViewer is mounted on (i.e. the second argument to the WebViewer constructor)
• steps: The array of Step objects defined above
• callback: An onComplete callback function that is invoked upon completion of all the steps
• options: An object that customizes the pop-up, see the section Customizing the steps

1WebViewer(
2  {
3    ...
4  },
5  viewerElement
6).then((instance) => {
7  const { start, exit } = initializeWalkthrough(
8    viewerElement,
9    steps,
10    () => {
11      console.log('tutorial complete...');
12    },
13  );

The initializeWalkthrough returns an object containing two functions: start and exit. start function begins the walkthrough and exit ends the walkthrough when invoked. The walkthrough can also be terminated by the user via the X button in the top-right corner of any pop-up.

1start();

You can customize the appearance of the card as well, by passing options object containing colors:

1const options = {
2  focusColor: '#FA4E32',
3  backgroundColor: '#FA4E32',
4  headerColor: '#36110B',
5  textColor: '#1F0D06',
6  iconColor: '#fff'
7};
8const { start, exit } = initializeWalkthrough(
9  // First 3 arguments
10  options,
11);
12
13start();