Set up preview for Web Spotlight

Jan Cerman

5 minutes

Web Spotlight

Download PDF

0% complete

You can already use Web Spotlight to manage page trees and their content. When you add content preview to the mix, content creators gain in-context editing directly in the Web Spotlight preview.

Web Spotlight requirements for preview

Compared to previewing your content directly in your app, Web Spotlight preview comes with specific security requirements.

Add a preview URL

Preview URLs are tied to content types and tell Kontent.ai which URLs to use for your content preview.

Let’s start with adding the domain for the Website space you created earlier. If you deployed your app using Surge.sh in the previous lesson, you can use the domain of your deployed app.

In Kontent.ai, go to Environment settings > Preview URLs.
On the Space domains tab, provide the domain for the Website space. For example, learn-hello-web-spotlight.surge.sh without the protocol.
Click Save changes.

Now, you can specify a preview URL for the Web Spotlight root content type and use the {Space} macro.

In Environment settings > Preview URLs, select the Preview URLs for content types tab.
Click Set up preview for a content type.
1. From the list of content types, select Web spotlight root.
2. In Used in spaces, select Website.
3. In Preview URL, enter https://{Space}/.
4. Click Confirm.
Click Save changes.

Congrats! You're done with the setup.

Enjoy content editing in Web Spotlight

With the preview URLs set up, you can now tweak your content directly in Web Spotlight. After you make a change, the preview in Web Spotlight refreshes itself in a few seconds.

What’s next?

Now that you have smart links in Web Spotlight working and you can edit your content in the context of your website, you might ask, what else is there?

Think through your routing and URL strategy. Your app should be able to resolve a URL for any page in the page tree. But there are multiple ways to go about it, depending on your needs and requirements.
If you need to work with multiple websites in Web Spotlight, add more spaces.
Check the documentation for Smart Link SDK to ensure you’re using it to the fullest. Apart from editable elements shown in an earlier lesson, you can specify buttons for creating new content, use a partial content refresh for better performance, and adjust the look and feel of components.
Explore our multi-site sample project to see Web Spotlight with three websites, each serving different content for a different company brand.

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!