Kontent.ai
Copyright © 2023 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Documentation
  • API reference
  • Product updates
Kontent.ai Learn
  • Plan
  • Set up
  • Model
  • Develop
  • Create

First steps with Web Spotlight

Is this page helpful?
Complete and continue
  • Sign in
    • Jan Cerman
    4 minutes
    Web Spotlight
    Time to set up your project for Web Spotlight! You’ll get to know what Web Spotlight looks like, how to activate it, and how to create a page tree.

    Why Web Spotlight?

    Content creators and marketers can manage their website content visually without leaving Kontent.ai. With Web Spotlight, you can quickly and easily add pages and edit the content displayed on your website. At the end of this learning path, you’ll have a simple web app that displays an interactive content preview in Web Spotlight. Take a look at the deployed sample web app.

    Activate Web Spotlight

    Let’s start with activating Web Spotlight for your project.
    1. Using the two drop-downs at the top, open the project environment you want to set up as a website.
    2. Go to  Environment settings > General > Web Spotlight.
    3. Click Activate Web Spotlight.
    Once Web Spotlight is activated, it brings a few new things to your project:
    • In the left menu, you’ll see Web Spotlight.
    • In Content model > Content types, you’ll get two new content types, Page and Web spotlight root.
    • When editing content types, you’ll see the Subpages element.
    You’ll explore each of these newcomers in more detail soon. Your next step is to specify the root of your website.

    Give your page tree a space to grow

    Your Kontent.ai projects can contain content for multiple websites and web applications. To differentiate between them, you need to create spaces. This way, you can have a different Web Spotlight page tree for each website.
    1. In  Environment settings, select Spaces.
    2. Click Create new space.
    3. In General > Space name, type Website.
    4. In Web Spotlight > Root item, click Create new root item.
      1. Name the root item Website root.
      2. Click Create.
    5. Click Save.
    That’s it! You now have the bare minimum needed to use Web Spotlight in Kontent.ai. Let’s see your new website root item in Web Spotlight! In the left menu, click Web Spotlight and switch to the Editor tab.
    In the next lesson, you’ll take a closer look at the way navigation in Web Spotlight works.
    What's next?
    Navigation and content in Web Spotlight
    Web Spotlight separates the page tree information from your content. Discover why this is a good thing and how the approach works in practice!
    • Develop with Kontent.ai
    • Hello World
    • Hello Web Spotlight
    • Run a sample app
    • Build apps
    • Decide navigation and URLs
    • Environments
    • Get Developer Certification
    This is what you’re going to build. Interactive preview for the root page in Web Spotlight using a simple React app.
    Your page tree with the newly created Website root item is on the left. The content editor is on the right.
    • First steps
    • Navigation and content
    • Adjust your app
    • Preview in Web Spotlight
  • Why Web Spotlight?
  • Activate Web Spotlight
  • Give your page tree a space to grow