Building WebViewer's UI is a challenge because it goes inside so many other products serving different industries and verticals. WebViewer powers apps used by surgeons to collaborate around medical images and patient records, by lawyers redacting documents for use in legal proceedings, and by construction teams 'to get on the same page'. The same UI will not work out of the box for everyone. Developers integrating WebViewer may need to tweak the toolbar or make more significant changes, such as alterations to how particular components look and behave.

For this very reason, we offer both easy-to-use customization APIs and complete WebViewer UI source code on our GitHub. Regardless of the use case or workflow, we manage to deliver a great user experience, thanks to your feedback and our amazing designers.

However, WebViewer's very flexibility, plus access to hundreds of unique and instantly drop-in-able document SDK features, works as a potential double-edged sword, when updates are made too often and without notifying users. Indeed, think back to the many tools, web apps, and services you use today. As a solution engineer, I use many tools as part of my daily work routine, and it becomes muscle memory remembering where everything is. What happens if one of my goto applications rolls out with a new feature or a UI refresh? If developers sneak in changes and hope I figure them out -- they might be disappointed.

To ensure your UI updates go smoothly without ruining anyone's day, it's a smart idea to walk users through any new changes or additions. This is why I put together WebViewer Walkthrough, an npm package that works alongside WebViewer to let you create professional step-by-step walkthroughs in minutes.

Creating a WebViewer Walkthrough

Here are a few useful walkthrough tips to get you started before you dive into creating your very first WebViewer walkthrough.

  • First, do not create obvious steps that offer no more value than the tooltip already provides. For example, it makes zero sense to add a step on the annotate button like "press here to annotate."
  • Next, as you design steps, think back to where the user just navigated from and what is expected of them next. Be sure to connect the walkthrough to the overall user workflow. For example, users fulfilling Freedom of Information (FoI) requests with the viewer would benefit from a walkthrough of how to leverage WebViewer features to automatically detect and remove personally identifiable information in their documents. To showcase this capability, you could add a step on the comments button that highlights sensitive keywords or strings and then asks the user to select whether to remove said information from the document.
  • Lastly, keep your walkthrough simple and drip steps only 2-3 at a time, showing each one only as the user completes their previous task. In contrast, if you overwhelm with many instructions at once, users are likely to skip or forget a step.

We designed the API for walkthrough creation to be as flexible as possible, just like our WebViewer UI. You can customize the walkthrough colors and appearance to match your application's overall look and feel. You can place optional headers or text. And most importantly, you can end walkthroughs early when users click 'X' or by calling the exit function programmatically. (There is nothing more annoying than not being able to escape a product tour!)

To create a walkthrough, initialize webviewer-walkthrough with the steps you want to make. Next, grab the 'dataElement' property from the button, div, or any other element you want to focus the user on. (You can find these properties by inspecting the DOM.) Next, pass the viewerElement of the div where you mounted WebViewer. And that's it!

import React, { useRef, useEffect } from 'react';
import WebViewer from '@pdftron/webviewer';
import { initializeWalkthrough } from '@pdftron/webviewer-walkthrough';

const App = () => {
  const viewer = useRef(null);

  useEffect(() => {
    WebViewer(
      {
        path: '/webviewer/lib',
        initialDoc: '/files/PDFTRON_about.pdf',
      },
      viewer.current
    ).then((instance) => {
      const { start, exit } = initializeWalkthrough(
        viewer.current,
        [
          {
            dataElement: 'leftPanelButton',
            header: 'Page Thumbnails',
            text: 'You can see all of the page thumbnails here.'
          },
          {
            dataElement: 'pageNavOverlay',
            text: 'Navigate pages'
          },
          {
            dataElement: 'toolbarGroup-Annotate',
            header: 'Annotate',
            text: 'In here you can find all the different tools you need to work with document.'
          },
          {
            dataElement: 'toggleNotesButton',
            text: 'Here you can see all of the comments on the document.'
          },
        ],
        () => {
          console.log('tutorial complete...');
        }
      );

      start();
    });
  }, []);

  return (
    <div className="App">
      <div className="webviewer" ref={viewer}></div>
    </div>
  );
};

export default App;

After the walkthrough ends, either by completing all the steps or the user exiting, the callback function onComplete will be called.

We're always striving to improve our user experience. So don't hesitate to contact me with any suggestions or questions, or just to chat about your experience. I'd be interested in knowing what you create with WebViewer Walkthrough to make our next iteration of it even better!