Preview function in Contentstack

The preview function in Contentstack

The preview function in Contentstack helps to quickly see changes you make in a web page or a content block of a web page without publishing it to UAT. This makes the handling easier and quicker especially because the preview will not have a cache.

The workaround to use the Preview function

1 – Open a web page in Contenstack (or create a new one first, including a content block).

2 – Click on the Preview button on the right side. It is named “Live Preview”.

Open

Open

The button on the right side

3 – The Live Preview will open next to “Web page”

4 – Click on “Settings” to select your local UAT you are working on. It will offer all Locales in UAT which you have admin rights for.

5 – The web page will appear in the selected UAT environment next to the “Web page”
Do not continue working from here, but proceed with the next steps.

6 – Click on the icon “Open in New tab” in order to do so

7 – You will now see two tabs indicated as “Contentstack”.
Do not continue working from here, but proceed with the next steps

8 – Copy the Preview link from the new tab into a third tab (Tab 3)
This is the actual workaround. You should never forget to do so, because Tab2 will automatically close when you continue with step 11.

9 – Now you can start working in the Backend to make your modifications in the Web page.

1. Make a change

2. SAVE it, but don’t publish

3. Go to Tab3

4. Reload the page to see your saved changes in the preview
   
   

   
   
   

10 – To make changes in the referenced Content block, please proceed in the Backend as usual.

11 – As soon as you click on “Edit” to open the Content Block, Tab2 will close.
That’s why it is so important to never forget step 8.

12 – Now you can start working in the Backend to make your modifications in the Content block. The procedure is the same as for the Web page (step 9)

1. Make a change

2. SAVE it, but don’t publish

3. Go to Tab3

4. Reload the page top see your saved changes in the preview
   
   Example:

   
   
   

   
   
   
   

13 – As soon as you are happy with the preview you Save and Publish the changes as usual.

Please always publish to both environments, UAT and Prod, even if you don't need UAT for testing. We need to have both environments consistent for future developments.