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.

Create a walkthrough

Install

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.

JavaScript

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

Define steps

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

JavaScript

const steps = [
  {
    dataElement: 'leftPanelButton',
    header: 'Page Thumbnails',
    text: 'You can see all of the page thumbnails here.'
  },
  {
    dataElement: 'pageNavOverlay',
    text: 'Navigate pages'
  }
]

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

Initialize the walkthrough

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

JavaScript

WebViewer(
  {
    ...
  },
  viewerElement
).then((instance) => {
  const { start, exit } = initializeWalkthrough(
    viewerElement,
    steps,
    () => {
      console.log('tutorial complete...');
    },
  );

Start the walkthrough

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.

JavaScript

start();

Customizing the steps

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

JavaScript

const options = {
  focusColor: '#FA4E32',
  backgroundColor: '#FA4E32',
  headerColor: '#36110B',
  textColor: '#1F0D06',
  iconColor: '#fff'
};
const { start, exit } = initializeWalkthrough(
  // First 3 arguments
  options,
);

start();