Previewing and Publishing an In-Page Experience
In this topic you will learn how to preview and publish an in-page experience.
An in-page experience can be previewed at any time during design to see how it will appear on different device types. The publishing dialog provides the ability to publish changes made to an experience and also generates the embed code that you will add to your web page.
Previewing an in-page experience
Previewing an in-page experience lets you see how the experience is going display without having to view it inside the Gallery interface.
- To preview an in-page experience, edit the experience and then click Preview.
- A desktop preview will open in a new browser tab.
Note: When using an in-page experience, player styling is only reflected while a video is playing. Player styling will not be seen in the BEFORE PLAY or AFTER PLAY states.
- The dropdown lists in the upper left corner can be used to preview the experience on different device types and also during different experience states.
Publishing an in-page experience
Whenever changes are made to an in-page experience, the changes must published so they appear on your site. If you make changes to an experience and don't publish them, the changes will not appear on the production site.
Note: The Shareable URL and the Embed Code in the publishing dialog will not be available until after the in-page experience is published for the first time.
Note: Any changes made to an in-page experience may take up to 5 minutes to appear on published pages.
To publish an in-page experience, follow these steps:
- Click Publish & Embed at the top of the page. The publishing dialog will open.
- Click Publish Changes. The Publishing Status will change to "Publishing in progress…".
- When the publish has completed, check the Publishing Status. The status should be This experience is up to date.
As changes are made to the experience, you must republish the experience.
Copying the embed code
The Embed Code is required to display the in-page experience on your site. The first time the experience is published, the Embed Code can be copied and inserted into your site. As changes to the experience are made and published, those changes will appear in your site.
Note: Changes to an in-page experience do not require that any existing embed code be replaced UNLESS you change the layout size from a fixed size to responsive or vice versa.
There are two types of Embed Code:
- Recommended - Recommended in most cases. The in-page experience will be displayed inside of a
<div>tag on your page. Recommended is required to allow the experience to resize itself and behave in a responsive way on the page.
<iframe>tag on your page. Typically this would be done when you are embedding the experience into a CMS or other platform that doesn't allow
To copy the embed code, click Copy Embed Code.
For an in-page experience to scale correctly on mobile devices, it is recommended to add a
viewport meta tag to the surrounding site. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For information on the
viewport tag, see this document.
Using dynamic video overrides
There may be times when you want to change the videos in an in-page experience. For example, maybe the videos in an experience need to change based upon the area of the site where the experience is embedded. Instead of creating new in-page experiences, each with a different set of videos, it is possible to create one experience and then modify the embed code to dynamically assign the appropriate videos to an experience. For information on using dynamic video overrides, see Using Dynamic Video Overrides in an In-Page Experience.