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 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 , or a URL can be entered in the interface for each preview.Preview mode can be directly accessed through the Storefront API 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.
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.
