Skip navigation

Hello Web Spotlight

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 Kentico Kontent 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 for your project, you will get Homepage 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 on the homepage.

    1. In , 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 .

    Landing page content type

    Create content for your homepage

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

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

    Now that your landing page content's in place, go back to your homepage.

    Publish your content

    To publish your homepage 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 homepage and its content is publicly available via the Delivery API.

    Access your content

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

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

    1. Replace <YOUR_PROJECT_ID> with the ID of your project:
      1. In , click API keys.
      2. In the Delivery API card, click .
    2. Replace <PAGE_CODENAME> with the codename of your page:
      1. In , choose Homepage.
      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/homepage

    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": "homepage", "language": "en-US", "type": "homepage", "sitemap_locations": [], "last_modified": "2020-09-08T11:43:50.5941437Z" }, "elements": { "title": { "type": "text", "name": "Title", "value": "Homepage" }, "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 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. 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": "homepage", "language": "en-US", "type": "homepage", "sitemap_locations": [], "last_modified": "2020-09-08T11:43:50.5941437Z" }, "elements": { "title": { "type": "text", "name": "Title", "value": "Homepage" }, "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 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. 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.

    Inside of 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://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.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 Kentico Kontent 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://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@kentico/kontent-delivery/_bundles/kontent-delivery.browser.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 Kentico Kontent 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 from your project. The headline whose value is "Hello Web Spotlight!" will go into the <h1> element, the body_text whose value is the paragraph below the logo will go into the <p> element, and picture whose value is 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 Kk = 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 Kk.DeliveryClient({ projectId: '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.item.body.value; const headline = response.item.heading.value; const picture = response.item.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 Kk = 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 Kk.DeliveryClient({ projectId: '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.item.body.value; const headline = response.item.heading.value; const picture = response.item.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 can get something similar to the picture below.

    A simple website built using Web Spotlight

    Check the JS and HTML tabs in the codepen example below:

    You can also view the final result at webspotlight.surge.shOpens in a new window, or tweak the source code in the codepen repositoryOpens in a new window.

    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.

    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 SDKReact sample application, and more.