> ## Documentation Index
> Fetch the complete documentation index at: https://product-discovery.developer.voyado.com/llms.txt
> Use this file to discover all available pages before exploring further.

# App preview integration

> How to implement app preview mode in a Voyado Elevate site integration.

The Elevate App offers an extended on-site feature set for merchandisers when fully integrated.

Several features in the [Experience app](https://help.elevate.voyado.com/hc/en-gb/articles/27611266063132-Settings#preview-and-publish-settings) <Icon icon="external-link" size={12} /> include a preview function. This allows a user to change and test settings, product selections, and more before publishing them to a live site. To preview something from the apps, a preview URL is required. For the apps, base URLs can be set in the [Admin app](https://help.elevate.voyado.com/hc/en-gb/articles/28013347219356-The-Admin-tab) <Icon icon="external-link" size={12} />, or a URL can be entered in the interface for each preview.

Preview mode can be directly accessed through the [Storefront API](/elevate/docs/api/storefront/overview) by the aid of a `viewId` parameter. All page queries accept a `viewId` parameter, which can take two different values: `production` and `preview`. The `viewId` defaults to `production` if it is omitted in a page query, so in practice the parameter should only be used for previewing purposes, that is, when in preview mode.

When clicking a Preview link in the Apps, a new browser tab is opened with the URL that is to be previewed. The URL is also appended with `?PREVIEW=true`.

## Implementation

Preview mode with the API should be implemented so that it is compatible with the app preview actions.

* Whenever `?PREVIEW=true` is encountered in the URL, requests to Elevate should be sent with `viewId=preview`.
* **Recommended.** Persist the `viewId` parameter with the value `preview` when in preview mode to enable a user to navigate pages and still see everything with preview content.
* **Recommended.** Implement a visual indicator to show the user that preview mode is active. For reference, see the image below.
* **Recommended.** Implement a toggle that allows the user to manually exit preview mode. For reference, see the image below.
* **Optional.** Restrict access to preview mode with, for example, a custom login that only enables functionality for certain levels of user access when logged in.

<img src="https://mintcdn.com/elevatedocs/q1sOaE-c8wYA2WNw/elevate/img/integration/preview-mode-1514x735.jpg?fit=max&auto=format&n=q1sOaE-c8wYA2WNw&q=85&s=f3a7cc9c7dba60c4c3ac6fbe53bfdd34" alt="Visual indicator in preview mode" width="1514" height="735" data-path="elevate/img/integration/preview-mode-1514x735.jpg" />
