> 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.