Creating content previews
A content preview app provides a way to see what your website, app or other channel will look like at a specified time in the future. Your preview app can be as simple or as complex as you like, from previewing a single page to your entire website. You can also deploy multiple preview apps, for example one for your website and another to open your app in a web based Android simulator, and the user can choose which preview to open.
On this page we'll walk through the structure of a very simple preview app that renders the content of a single slot containing one content type. The structure of our example preview is very similar to the visualization and consuming content and shows the key concepts you'll need to know when writing a preview app.
Setting up the preview app settings
The preview app URL is added to the preview settings dialog, available by choosing "Preview settings" from the "Settings" menu in either the production or planning views.
In the case of our example, the preview is just a one page web app, but for more complex previews you might write a Node.JS app, for example. You can add more than one preview app and allow the user to choose which one they want to use.
The preview app templated URI
A preview app is specified as a templated URI, including a parameter that will contain the virtual staging environment(VSE) domain. Much like a visualization this domain is used in place of the production domain to retrieve unpublished content.
Here's the templated URI for the preview app example:
- the VSE domain sent as a parameter to the app contains a timestamp
- no slotIDs are sent in the parameters, so you choose which slots to render. That might be all the slots on your website. The IDs of these slots won't often change, unless you restructure the website, just the content of the slots will.
An example of the VSE domain that is sent to our preview app is shown below:
The timestamp included in the domain refers to the date from which the user chose to view the preview, which in this case is 1/5/2018. The domain is then used to build up the query to retrieve content.
If we want to retrieve the contents of the home page banner slot used in the Consuming content example, we know that this slot item has an ID of
8025a730-4394-4a22-8e4b-d3b9d35c766e. To retrieve the contents of this slot at the specified time, we can use the following code:
This query will return the contents of the slot as it is scheduled to be on 1/5/18. So, for example, if we've created an edition that updates the content in this slot and it's scheduled to go live on 30/4, then the query will return the content that is scheduled as part of that edition.
As in the consuming content example, content is returned to the preview app in JSON-LD format. The steps to render the content will then be the same:
- convert the JSON-LD content into a content tree
- combine it with handlebars (or other template) to generate the HTML
- render the content
Download the complete example preview app, including the code shown on this page.
Using the preview app example
Expand the section below to see the preview app in action.
We've scheduled an edition called "May promotion sales teaser edition" to which we've added the home page banner slot and we've added a banner to this slot. The edition is then scheduled to go live on 30/4.
Back in the planning calendar, we right-click at the top of a date and choose "Preview content". A dialog is displayed allowing us to choose the date and time from which to view the preview. We'll choose 1/5, since we know that the edition is scheduled to be live then.
The preview app is launched and the preview is displayed in a new tab. The banner image of the model in a white shirt is displayed, the banner that we scheduled to be live on that date.
Next we'll create another edition, add the home page banner slot to it and add some content to this slot. This time it's a banner for the free shipping promotion. The edition is scheduled to go live on 3/5.
We'll choose to view the content preview on that date.
The content scheduled from the edition we created is now displayed.