Web Spotlight lets you create web pages and see them right in your web app, providing immediate visual feedback. Your web editors can produce and update content in the context of your website. Request activation of the Web Spotlight and find what it brings to your project.
Get Web Spotlight
Activate Web Spotlight
Once you have Web Spotlight enabled for your subscription, you can activate it for individual projects.
Open the project environment you want to set up as a website.
Go to Environment settings > General.
In the Web Spotlight card, click Activate Web Spotlight.
Web Spotlight is now active for your current environment. Now’s the time to set it up with spaces.Spaces enable you to run multiple websites in one project. To use Web Spotlight, you need to select or create a root item in each space you want to manage as a website.
In Environment settings > General > Web Spotlight card, click Go to spaces.
Click on the particular space you’re setting up as a website.
Under Root item, create a new or add an existing root item.
Click Save.
Your setup is done for this space. Go to Web Spotlight to start creating content in Web Spotlight. To set Web Spotlight up in another space, repeat steps 2–4 in the other space.The initial setup creates new content types and items in your project. It doesn’t affect any of your existing content.
What happens after Web Spotlight activation?
Once set up, Web Spotlight creates several things:
Web Spotlight rootcontent type is a core part of Web Spotlight that you can edit but not delete while Web Spotlight is active.
Subpages content type element is a core part of Web Spotlight, which you need to use in your content model to create the page tree.
Page content type is an optional part of Web Spotlight, which you can use for creating web pages.
Root item in Web Spotlight
The root item in Web Spotlight is the top-level content item that defines the root of your website hierarchy.The Web Spotlight root content type defines the following elements:
Title element – specifies the name of the root item.
Subpages element – specifies your website’s home subpages, for example, the top-level navigation. By default, this element is limited to pages.
Content element– specifies a content item to use for the root of your website.
You can extend your root item with other content elements if needed. While Web Spotlight is active, the Web Spotlight root type and the item based on it cannot be deleted.
Subpages in Web Spotlight
The Subpages element is a means of creating your website hierarchy, commonly known as a page tree. You can use subpages with the predefined page content type or add them to your own content types.
Page in Web Spotlight
The Page content type in Web Spotlight defines a page within your website. Pages represent the locations in your page tree. They are connected to items with specific content, such as articles or blog posts.The Page type defines the following elements:
Title – specifies the name of the page.
URL – specifies the URL slug of the page. By default, auto-generated from Title.
Show in navigation – determines whether the page should be visible in the page tree.
Subpages – specifies the subpages of the current page, for example, several pages within a section of your website. By default, this element is limited to Page items.
Content – specifies a content item to use for this page.
Retrieve the website tree via API
Web Spotlight brings back terms from traditional CMSs – the root item, pages, and subpages. When Web Spotlight is activated in your project, it models website navigation within your content model. The new content types serve for the page tree navigation on your website. They are also freely editable, so you can use your navigation to keep other related data.Based on the content model, namely the Spotlight’s Subpages element, Web Spotlight creates the page tree visible in Kontent.ai. The navigation can then be easily retrieved via the API. It uses the existing functionality for linked items elements. This way, developers don’t need to write two separate logics for linked items and for navigation.To retrieve the actual content of your page, access your published content via the API and display it on your website the same way as you do with projects without Web Spotlight.
Web Spotlight uses the existing permission model. If a user is allowed to change content items of a given content type, they can do that in Web Spotlight as well. Content that the user doesn’t have permission for is greyed out and displayed as unavailable.
Environmentshave Web Spotlight activated automatically upon their creation.
Cloned projects have it deactivated in the new project. The Subpages element will be converted to the Linked items element in this case. If you activate Web Spotlight for the project, the element will be converted back to the Subpages element and everything will work as expected.
Manage your page tree
The page tree represents your website navigation and consists of pages. The actual page content (such as articles, blog posts, or landing pages) lives in separate content items. See how to manage website content.
Add pages
To create a new page under the root item:
In Web Spotlight, hover over the root item and click .
Click Create new page.
If collections are available to you, select one for the new page.
Choose the Page content type.
Provide a name and title for the new page.
Now you can start adding content to your page. Use the same approach to add pages anywhere in the page tree.If you want to move the page to another collection, open the page you've just created and select a different collection. You can also do that for published pages without creating a new version.
Remove pages
If you want to remove a page from your page tree but keep it in the project, remove it from the Subpages element.
In Web Spotlight, select the page you want to remove.
Switch to the Editor tab.
In the Content details panel, look at Used in to find out where the page is used.
Open the parent page from Used in.
In Subpages, click for the page you want to remove.
If you don’t see Subpages, you might need to look for a different name, depending on how your project manager set up your project.
If you don't want to keep the page in your project anymore, delete it.
In Web Spotlight, select the page you want to delete.
Switch to the Editor tab.
Select More actions > Delete.
If the page had any items linked to it, for example, in the Content or Subpages elements, these items will remain in your project without change.
Reorder pages
To change the order of pages in the page tree:
In Web Spotlight, select a page with subpages you want to reorder.
Switch to the Editor tab.
Find the Subpages element.
If you don’t see Subpages, you might need to look for a different name, depending on how your project manager set up your project.
Drag and drop the page items to reorder them.
The new order is immediately updated in the page tree, and you'll see it on the preview shortly.
Manage the content of your pages
Your page content relies on linking. For each page, you specify an item that represents the content of the page. By default, pages don’t contain any content on their own, they only link to it. Find more about the concept of linking content together.
Add content through the Editor tab
To attach existing content to your web page:
In Web Spotlight, select a page.
Switch to the Editor tab.
In Content, specify a content item you want to be displayed on this page.
For example, the content item you choose can represent a landing page, article, or blog post.
Use the same approach for replacing content items linked to other pages.
Add content directly from the preview
To insert a content item or a component to a specific place on your web page:
In Web Spotlight, select a page.
Switch to the Preview tab.
In the top right, select Actions > Show editable elements.
(Optional) Select Actions > Autorefresh to get the preview refreshed automatically as you edit.
Find the place where you want to add content to the page.
Click and then select one of the options.
This opens the in-context editor with a content item that will hold the new content.
After you make the change, wait for the preview to refresh automatically or click Actions and then Refresh manually.
The new component or a linked item will be added to a specific element within the content item, depending on where the button is located.
Preview and edit page content
In Web Spotlight, select the page you want to view.
Switch to the Preview tab.
In the top right, select Actions > Show editable elements.
(Optional) Select Actions > Autorefresh to get the preview refreshed automatically as you edit.
Find editable parts (with the pencil icon ).
Click the part of the page you want to change.
This opens the in-context editor. It doesn’t support certain actions, like adding a note. To open the full editor, click Open in editor.
After you make the change, wait for the preview to refresh automatically or click Actions and then Refresh manually.
See the preview in various resolutions
In Web Spotlight preview, you can change the preview resolution to test what your pages look like on various devices.
In Web Spotlight, select the page you want to view.
Switch to the Preview tab.
In the top left, open the dropdown menu with resolution options.
There are a couple of presets to get you started:
Desktop
Tablet
Mobile
Use the Fit screen option to reset the view back to default.
Customize the preview resolution
You have two options:
Type the exact dimensions into the Resolution fields at the top.
Drag the right or bottom edges of the preview frame.
When you type in the resolution, Kontent.ai scales the preview frame to fit your screen. Use the Scale menu to set a custom scale.To reset the resolution and scale to default, click .
Rotate the screen
To see your pages both in portrait and landscape modes, click .Rotating the preview resets the scale to fit the screen. Use the Scale menu to set a custom scale.
Share the preview with colleagues
You can share a link to the particular preview setup with your colleagues.
At the top-right, click Actions.
Select Share preview.
Click .
Anyone with access to your project and the page you share the preview of can use the link.
Edit a parent page to change the order of its child pages.
Multiresolution toolbar in Web Spotlight
The preview resize handles
Web Spotlight is included in all enterprise plans. To use it, enable Web Spotlight for projects you want to use as a website. If you’re on a lower plan, contact us to purchase Web Spotlight using at the bottom right or click the button below.
Any project manager with access to the default language can activate Web Spotlight for the project.
Converting existing projects to Web SpotlightIf you have an already existing and working project, you can adjust it to use Web Spotlight. We have a tutorial focusing on this specific scenario.
What if you deactivate Web Spotlight?Your content stays as-is, including the content items and content types created during activation. Nothing will be changed or deleted from your project.
The instructions below apply to the default Web Spotlight settings. You might need to look for different types or elements, depending on how your project admins set up your project.
Need to hide certain pages from your page tree?For time-limited campaigns and short-term content, you can hide pages from your website. To hide specific pages, set their Show in navigation element to No. You can also schedule hiding the pages.If you don’t want a page in the page tree at all, see how to remove pages.
Tip: You can archive the pages you remove from the page tree. This makes it clear they're not in use anymore.
The instructions below apply to the default Web Spotlight settings. You might need to look for different types or elements, depending on how your project admins set up your project.
Preview doesn't refresh automatically?If your preview doesn't refresh automatically after you make a change, first make sure the Autorefresh option under Actions is selected. If this option is disabled for you, ask your developers to set up automatic refresh in Web Spotlight.
Missing edit icons?If you don't see any editable elements, your developers first need to set up your website's preview so that it tells Kontent.ai what's on the displayed page.
The share option grayed out?Your developers need to update the Smartlink SDK to version 3.1.0 or newer to make sharing preview links available.
Environment settings > General.
on the particular space you’re setting up as a website.
Web Spotlight to start creating content in Web Spotlight. To set Web Spotlight up in another space, repeat steps 2–4 in the other space.
The initial setup creates new content types and items in your project. It doesn’t affect any of your existing content.
Add buttons and edit links on preview. This enables your content creators to live-edit the content directly from Kontent.ai.
.
Create new page.
Content details panel, look at Used in to find out where the page is used.
for the page you want to remove.
More actions > 
Delete.
Show editable elements.
Refresh manually.
Desktop
Tablet
Mobile
Fit screen option to reset the view back to default.
.
Rotating the preview resets the scale to fit the screen. Use the Scale menu to set a custom scale.
Share preview.
.
at the bottom right or click the button below.