Skip to content

App Integration

There are features in the eSales Apps that work out of the box when utilising the Web components. If these features are desired to be fully used with the Web API, additional integration actions may be required.

Preview mode

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 with the Web API and page queries 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, i.e. 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 appended with ?PREVIEW=true, triggering the preview mode for the components.


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

  • Whenever ?PREVIEW=true is encountered in the URL, requests to eSales 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, see Component reference.
  • Recommended Implement a toggle that allows the user to manually exit preview mode, see Component reference.
  • 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.

Component reference

As a reference when implementing a Web API based preview mode, the preview functionality built into the Web components is described below:

  • Whenever ?PREVIEW=true is encountered in the URL, the preview mode is activated. This is stored in SessionStorage and will last when a page is reloaded, until the preview mode is manually exited, or until the browser is restarted.
  • When the preview mode is active, eSales Lifestyle will automatically append a new <esales-preview> component to the document.body when the document has finished parsing.
  • When the preview mode is active the viewId is automatically set to preview instead of production.
  • Clicking Exit Preview will end the preview mode, remove the <esales-preview> component and set the viewId to production.

Preview mode component

Last update: June 11, 2021

This online publication is intellectual property of Apptus Technologies. Its contents can be duplicated in part or whole, provided that a copyright label is visibly located on each copy and the copy is used in conjunction with the product described within this document.

All information found in these documents has been compiled with utmost attention to detail. However, this does not guarantee complete accuracy. Neither Apptus Technologies nor the authors shall be held liable for possible errors or the consequences thereof.

Software and hardware descriptions cited in these documents might be registered trademarks. All trade names are subject to copyright restrictions and may be registered trademarks. Apptus Technologies essentially adheres to the manufacturer’s spelling. Names of products and trademarks appearing in this document, with or without specific notation, are likewise subject to trademark and trade protection laws and may thus fall under copyright restrictions.