Some test text!

menu
Walkthroughkeyboard_arrow_down

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.

Left panel data element

linkCreate a walkthrough

linkInstall

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.

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

linkDefine 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
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.

linkInitialize 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
WebViewer(
  {
    ...
  },
  viewerElement
).then((instance) => {
  const { start, exit } = initializeWalkthrough(
    viewerElement,
    steps,
    () => {
      console.log('tutorial complete...');
    },
  );

linkStart the walkthrough

The initializeWalkthrough resolves to 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.

start();

linkCustomizing the steps

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

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

start();

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat
close