> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/guides/ui-customization-walkthrough.md).

# Adding walkthrough or product tour in WebViewer

Enhance user experience with WebViewer Walkthrough. Learn how to create interactive product tours or tutorials seamlessly within WebViewer using step-by-step guidance. Optimize user engagement and nav

[WebViewer Walkthrough](https://www.npmjs.com/package/@pdftron/webviewer-walkthrough/) is a package that allows you to create step-by-step walkthroughs or tutorials in WebViewer.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-b487672c9f82afc868d0e055775a2f2f8292de7e%2Fc7bb683924523763946aceb59cb8dd8fd7b464a3-2126x1228.png?alt=media)

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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

### 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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

To find the correct `dataElement` please refer to the [guide about how to show/hide elements](/web/ui-customization/hiding-elements.md).

### 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](https://docs.apryse.com)

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

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

{% endcode %}
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
start();
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Customizing the steps

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

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

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

start();
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/web/get-started/guides/ui-customization-walkthrough.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.