Skip navigation

Hello Web Spotlight

Martina Farkasova
5 min read
Download PDF

Learn the basics of creating, publishing, and displaying your content with Web Spotlight. In this introductory tutorial, you will build a simple website powered by Kontent.ai from start to finish.

Table of contents

    Don't have Web Spotlight yet?

    If you don't have Web Spotlight activated for your project, first see how to set up Web Spotlight.

    After activating Web Spotlight, you will get Web Spotlight root and Page content types already prepared to build your page tree. In Web Spotlight, your website content is separate from the navigation. This means you need to create appropriate content types to hold your content.

    Create a content type

    In this example, you will create a landing page to store content shown in the root item.

    1. In Content model, click Create new.
    2. In Content type name, type Landing page.
      1. Drag in a Text element and name it Headline.
      2. Drag in a Rich text element and name it Body.
      3. Drag in an Asset element and name it Image.
    3. Click Save.

    That’s it, your content type is now ready to use.

    To see all your content types, select Content model.

    Assembled Landing page content type for Hello Web Spotlight

    Create content for your root item

    You can now create content based on the new Landing page content type.

    1. In  Web Spotlight, select Web Spotlight root.
    2. Switch to the Editor tab.
    3. In Content, click Create new item.
    4. If collections are available to you, select one for the new content item.
    5. Select Landing page as the content type.
    6. In Content item name, type Hello Web Spotlight!.
    7. Fill in the Headline and Body text elements.
    8. Upload an image to the Image asset element. If you like, you can use our Web Spotlight logo.

    Now that your landing page content is in place, go back to the root item.

    Publish your content

    To publish your root item together with the landing page, switch to the Editor tab and click Publish at the top of the screen.

    A short time after publishing, your root item and its content are publicly available via the Delivery API.

    Access your content

    Each page (including the root item) can be accessed at a specific URL similar to this one:

    https://deliver.kontent.ai/<YOUR_ENVIRONMENT_ID>/items/<PAGE_CODENAME>

    1. Replace <YOUR_ENVIRONMENT_ID> with the ID of your environment:
      1. In Environment settings, click General.
      2. In the Environment ID card, click .
    2. Replace <PAGE_CODENAME> with the codename of your page:
      1. In  Web Spotlight, select Web Spotlight root.
      2. Switch to the Editor tab.
      3. Click the More actions button in the top-right corner.
      4. Click on Codename at the bottom of the list.
      5. Click .
    3. Open the URL in your browser.

    For example, the URL can look like this:

    https://deliver.kontent.ai/8d20758c-d74c-4f59-ae04-ee928c0816b7/items/web_spotlight_root_item

    The API will return your content item as a structured JSON object that is easy to parse by any programming language.

    • JSON
    {
    "item": {
        "system": {
            "id": "51927a9b-b170-4d6b-b51f-72b6cae37411",
            "name": "Hello Web Spotlight!",
            "codename": "web_spotlight_root_item",
            "language": "en-US",
            "type": "web_spotlight_root",
            "sitemap_locations": [],
            "last_modified": "2020-09-08T11:43:50.5941437Z"
        },
        "elements": {
            "title": {
                "type": "text",
                "name": "Title",
                "value": "Web Spotlight root"
            },
            "subpages": {
                "type": "modular_content",
                "name": "Subpages",
                "value": [
                    "set_up_web_spotlight_for_your_project",
                    "manage_your_website_with_web_spotlight"
                ]
            },
            "content": {
                "type": "modular_content",
                "name": "Content",
                "value": [
                    "hello_ws_landing_page"
                ]
            }
        }
    },
    "modular_content": {
        "hello_ws_landing_page": {
            "system": {
                "id": "60ee6cbe-cc1c-4eb8-9b16-44f11313402d",
                "name": "Hello WS landing page",
                "codename": "hello_ws_landing_page",
                "language": "en-US",
                "type": "landing_page",
                "sitemap_locations": [],
                "last_modified": "2020-09-08T11:36:18.5124723Z"
            },
            "elements": {
                "title": {
                    "type": "text",
                    "name": "Title",
                    "value": "Hello Web Spotlight!"
                },
                "body": {
                    "type": "rich_text",
                    "name": "Body",
                    "images": {},
                    "links": {},
                    "modular_content": [],
                    "value": "<p>Web Spotlight is an additional feature for Kontent.ai focusing on website management. It adds a visible page tree of the website. From the page tree, you can create new pages as well as preview your changes directly in Kontent.ai. This makes the authoring a much smoother experience for website content creators.</p>"
                }
            }
        },
        "...": "...more pages omitted for brevity"
    }
}
    {
    "item": {
        "system": {
            "id": "51927a9b-b170-4d6b-b51f-72b6cae37411",
            "name": "Hello Web Spotlight!",
            "codename": "web_spotlight_root_item",
            "language": "en-US",
            "type": "web_spotlight_root",
            "sitemap_locations": [],
            "last_modified": "2020-09-08T11:43:50.5941437Z"
        },
        "elements": {
            "title": {
                "type": "text",
                "name": "Title",
                "value": "Web Spotlight root"
            },
            "subpages": {
                "type": "modular_content",
                "name": "Subpages",
                "value": [
                    "set_up_web_spotlight_for_your_project",
                    "manage_your_website_with_web_spotlight"
                ]
            },
            "content": {
                "type": "modular_content",
                "name": "Content",
                "value": [
                    "hello_ws_landing_page"
                ]
            }
        }
    },
    "modular_content": {
        "hello_ws_landing_page": {
            "system": {
                "id": "60ee6cbe-cc1c-4eb8-9b16-44f11313402d",
                "name": "Hello WS landing page",
                "codename": "hello_ws_landing_page",
                "language": "en-US",
                "type": "landing_page",
                "sitemap_locations": [],
                "last_modified": "2020-09-08T11:36:18.5124723Z"
            },
            "elements": {
                "title": {
                    "type": "text",
                    "name": "Title",
                    "value": "Hello Web Spotlight!"
                },
                "body": {
                    "type": "rich_text",
                    "name": "Body",
                    "images": {},
                    "links": {},
                    "modular_content": [],
                    "value": "<p>Web Spotlight is an additional feature for Kontent.ai focusing on website management. It adds a visible page tree of the website. From the page tree, you can create new pages as well as preview your changes directly in Kontent.ai. This makes the authoring a much smoother experience for website content creators.</p>"
                }
            }
        },
        "...": "...more pages omitted for brevity"
    }
}

    Display your content on a website

    In this part of the tutorial, you will learn how to use JavaScript to display the content of your landing page. The JSON response contains the three elements as objects which are specified by their codenames: headline, body_text, and picture.

    Adding HTML

    First, you will create an HTML file and declare which HTML elements you want to populate. The order of elements in the HTML file is the order in which the content will appear on the website. Create a new, blank text file and name it index.html.

    Into the HTML file, insert the following code:

    • HTML
    <!DOCTYPE html>
<head>
<title>Hello Web Spotlight</title>
    <!-- Include the Delivery SDK and its dependency -->
    <script src="https://cdn.jsdelivr.net/npm/@kontent-ai/delivery-sdk@latest/dist/bundles/kontent-delivery.umd.min.js"></script>
    <!-- Points to an external JavaScript file that will be added in the next step -->
    <script src="main.js" async defer></script>
</head>
<body>
     <!-- The HTML elements themselves have no value. Using JavaScript, you'll pull the content from your Kontent.ai project into the elements -->
    <img id="banner">
    <h1 id="headline"></h1>
    <p id="bodytext"></p>
</body>
</html>
    <!DOCTYPE html>
<head>
<title>Hello Web Spotlight</title>
    <!-- Include the Delivery SDK and its dependency -->
    <script src="https://cdn.jsdelivr.net/npm/@kontent-ai/delivery-sdk@latest/dist/bundles/kontent-delivery.umd.min.js"></script>
    <!-- Points to an external JavaScript file that will be added in the next step -->
    <script src="main.js" async defer></script>
</head>
<body>
     <!-- The HTML elements themselves have no value. Using JavaScript, you'll pull the content from your Kontent.ai project into the elements -->
    <img id="banner">
    <h1 id="headline"></h1>
    <p id="bodytext"></p>
</body>
</html>

    Adding JavaScript

    Let’s populate the <h1>, <img>, and <p> elements from the HTML file with content. The headline with the value “Hello Web Spotlight!” will go into the <h1> element. The body_text with the value of the paragraph below the logo will go into the <p> element, and the picture with the URL will show in the <img> element. Now, create a file named main.js and insert the following code:

    • JavaScript
    // Initializes the Delivery JS SDK
const KontentDelivery = window['kontentDelivery'];

// Tip: Change the project ID of the API call to yours to display your own content. Make sure the codenames still match.
const deliveryClient = new KontentDelivery.createDeliveryClient({
  environmentId: '8d20758c-d74c-4f59-ae04-ee928c0816b7',
});

// Retrieves the landing page from your project
deliveryClient
  .item('hello_ws_landing_page')
  .elementsParameter(['heading', 'body', 'image'])
  .toPromise()
  .then(response => processData(response));

// Processes the retrieved data and displays it on the page.
function processData(response) {
  const bodyText = response.data.item.elements.body.value;
  const headline = response.data.item.elements.heading.value;
  const picture = response.data.item.elements.image.value[0].url;

  document.getElementById("bodytext").innerHTML = bodyText;
  document.getElementById("headline").append(headline);
  document.getElementById("banner").src = picture;
}
    // Initializes the Delivery JS SDK
const KontentDelivery = window['kontentDelivery'];

// Tip: Change the project ID of the API call to yours to display your own content. Make sure the codenames still match.
const deliveryClient = new KontentDelivery.createDeliveryClient({
  environmentId: '8d20758c-d74c-4f59-ae04-ee928c0816b7',
});

// Retrieves the landing page from your project
deliveryClient
  .item('hello_ws_landing_page')
  .elementsParameter(['heading', 'body', 'image'])
  .toPromise()
  .then(response => processData(response));

// Processes the retrieved data and displays it on the page.
function processData(response) {
  const bodyText = response.data.item.elements.body.value;
  const headline = response.data.item.elements.heading.value;
  const picture = response.data.item.elements.image.value[0].url;

  document.getElementById("bodytext").innerHTML = bodyText;
  document.getElementById("headline").append(headline);
  document.getElementById("banner").src = picture;
}

    Finishing touches

    When you combine the two code samples and introduce a small amount of CSS, you get what you see in the Codepen example below.

    What's next?

    To make the most out of Web Spotlight, make sure to set up preview for your website and implement smart links. These two steps let you quickly edit content directly in Kontent.ai.

    Working directly with the API interface is fine for small tasks and simple websites. The API reference is your friend. For more complex projects, however, you will want to use a platform-specific SDK or write your own.

    We have a JavaScript/TypeScript SDK for the Delivery REST API, React sample application, and more.