Manage and preview content in Web Spotlight

Martina Farkasova
9 minutes
Web Spotlight
With Web Spotlight, you can seamlessly link, edit, and preview your web content in real-time, ensuring that your content is both engaging and optimized for various devices.

Pages vs content in Web Spotlight

In Web Spotlight, 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.
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.

Add content through the Editor tab

To attach existing content to your web page:
  1. In Web Spotlight, select a page.
  2. Switch to the Editor tab.
  3. 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:
    1. In Web Spotlight, select a page.
    2. Switch to the Preview tab.
    3. In the top right, select  Actions > Show editable elements.
    4. (Optional) Select Actions > Autorefresh to get the preview refreshed automatically as you edit.
    5. Find the place where you want to add content to the page.
    6. Click and then select one of the options.
      • This opens the in-context editor with a content item that will hold the new content.
      • The options can differ depending on whether you're adding content to a rich text element or a linked items element.
    7. 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 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.

Preview and edit page content

  1. In Web Spotlight, select the page you want to view.
  2. Switch to the Preview tab.
  3. In the top right, select  Actions > Show editable elements.
  4. (Optional) Select Actions > Autorefresh to get the preview refreshed automatically as you edit.
  5. Find editable parts (with the pencil icon ).
  6. 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.
  7. After you make the change, wait for the preview to refresh automatically or click  Actions and then Refresh manually.
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.

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.
  1. In  Web Spotlight, select the page you want to view.
  2. Switch to the Preview tab.
  3. 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.
  1. At the top-right, click  Actions.
  2. Select  Share preview.
  3. Click .
Anyone with access to your project and the page you share the preview of can use the link.
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.