Set up content preview for your Kontent.ai projects so that your content creators can preview unpublished content and review it with confidence.Â
Start by teaching your app how to fetch the latest versions of your content. This means making requests to Delivery Preview API. Every request to the API must be authenticated with a Delivery API key. Remember that server-side technology is required to keep your API keys secret.
To create Delivery API keys for previewing content, you need to be a Project manager.Here’s an example of how you can get the latest version of a My article content item:
from a Kontent.ai project, the next step is to prepare your app for previewing unpublished content.
We recommend using Delivery SDKs to make all this easier.
To follow the best practices and avoid using your production app for fetching non-production data (preview), you need two separate instances of your app:
Production instance: Fetches published content via Delivery API. This instance serves content via example.org URL, for example.
Preview instance: Fetches the latest version of your content, even if it's not published yet, via Delivery Preview API. This instance serves content via preview.example.org URL, for example.
You can distinguish the instances by providing or omitting the Preview API key. If the key’s present, your app will run the preview instance, if it’s not, that’s a sign to run the production instance.Â
To preview your content, you need to set up preview URLs for your content types. The URLs may be different for each combination of space and content type.
In Environment settings > Preview URLs > Preview URLs for content types, click Set up preview for a content type.
Select a content type.
In Used in spaces, select a space you’re setting the URL for.
If you don’t use spaces, select All spaces. Similarly, use All spaces for a preview URL that’s universal across all your spaces.
Type in the preview URL.
The preview URLs must be:
Absolute paths in the format https://domain/path
Shorter than 1024 characters
If you’re setting up URLs that need to be dynamic, there are a few macros you can use:
You can create SEO-friendly URLs using the URL slug element with the {URLslug} macro: https://preview.example.org/articles/{URLslug}. Alternatively, you can use the {Codename} or {ItemId} macros to identify the content items in your preview URLs.
In multi-regional projects, use the {Lang} macro to get the currently selected language codename, such as en-us or ja-jp.
You can combine the macros. A preview URL https://preview.example.org/{Lang}/articles/{URLslug} would resolve to https://preview.example.org/en-ca/articles/previewing-content-items, for example.
Your home page, for instance, doesn’t need a dynamic preview URL, because it's static (it's unique and in one location).
For example, a home page’s preview URL for an app running at https://preview.example.org would be https://preview.example.org or https://{Space}.
The live preview provides an in-context visual of your content across your channels while editing in real time without switching tabs.
Once activated, the appears at the top of a content item.Â
To properly configure live preview, refer to the security requirements below.
To structure your website in live preview or Web Spotlight's preview, each space needs a root item.Â
For Web Spotlight, you can use the default item based on the Web Spotlight root content type or assign any other content item as the root. The rest of the tree is under this top-level item.
Setting up a preview for live preview or Web Spotlight with multiple spaces is no different from setting it up for only a single space. Configure the preview for the root item’s content type and for any other types under it. You can specify different preview URLs for different combinations of spaces and content types.
Once you have a preview working in both your app and Kontent.ai project, it’s a good idea to add edit buttons to your application. They can look like what you see below.
For content creators, this small addition means they can go straight to editing in Kontent.ai just by clicking the button. This will help them in case they need to fix minor errors or typos right after they spot them when previewing their content.
If your editors have problems opening items through the edit links, verify their user roles.
Because your app will be loaded and sandboxed in an <iframe> within Kontent.ai, you need to ensure a few things:
Always use a secured connection (HTTPS) for your URLs, such as https://preview.example.org.
Allow your app to load within Kontent.ai using the Content-Security-Policy header and the frame-ancestors directive: frame-ancestors https://app.kontent.ai.
To enable opening external links from your app, such as PDFs stored as assets in Kontent.ai, you need to set sandbox directives using the Content-Security-Policy header. For example, the directive allow-popups-to-escape-sandbox
allows opening external links,
allow-forms
allows submitting forms,
allow-downloads
allows downloads after users click a link, and so on.
If you first want to test your implementation locally, you need to generate a self-signed HTTPS certificate.
C#
// Tip: Find more about .NET SDKs at https://kontent.ai/learn/netusing Kontent.Ai.Delivery;// Tip: Use DI to create Delivery client https://kontent.ai/learn/net-register-clientIDeliveryClient client = DeliveryClientBuilder .WithOptions(builder => builder .WithEnvironmentId("975bf280-fd91-488c-994c-2f04416e5ee3") .UsePreviewApi("KONTENT_AI_PREVIEW_API_KEY") .Build()) .Build();// Gets the latest version of a content item// Tip: Create strongly typed models according to https://kontent.ai/learn/net-strong-typesIDeliveryItemResponse<Article> response = await client.GetItemAsync<Article>("my_article");Article item = response.Item;
Preview configuration | Kontent.ai Learn
Explore your path to mastery
Reap the benefits of preview when setting up your website.
Secure your unpublished contentWe highly recommend implementing an authentication system for your preview URLs to secure unpublished content. You can use single sign-on (SSO), password protection, or any other form of authentication. This important step ensures the confidentiality of your unpublished content, which only authorized individuals can access before the content gets published.Â
Use a secure connectionPreview URLs require the https:// protocol and URLs accessible to Kontent.ai. Without a valid SSL certificate, Kontent.ai responds with secure connection errors.When developing apps locally, you can serve pages over HTTPS in combination with ngrok's forwarded address.
Multiple content items can have the same URL slugKontent.ai doesn't check if a URL slug value is unique across your project. This means you can have multiple items with the same URL slug. However, if you need unique URL slugs, you have several options to ensure that you don't end up with multiple same URL slugs. Check out your options to achieve unique URL slugs.
Web Spotlight is being replaced by live previewStarting on April 29, 2025, new subscriptions will not include Web Spotlight.Web Spotlight will be replaced by live preview on March 26, 2026. If you’re already using Web Spotlight, you can activate live preview without making any changes to your configurations—they will continue to work after activation.
Jan Cerman, David Klement
12 minutes
Preview
appears at the top of a content item. 
. All rights reserved.