Adjust your app for Web Spotlight

Check 1. Content preview

Use Delivery SDK in your app to preview content. We recommend using environment variables to avoid storing sensitive information directly in your code, such as your environment ID and API key. For example, this is how you can set up a client for Delivery API to preview content. With the delivery client for content preview prepared, you can retrieve the latest versions of your content. For example, this is how you can retrieve the Website root and return the landing page it links to. The following code shows the delivery client used in React. To see it in context, check the complete application code.

Check 2: Displaying a content item

Once your app can retrieve content items, it’s time to display their content. For example, this is how you can map your landing page elements to HTML elements. Use strongly typed models in your app for a better developer experience and easier maintenance.

Check 3: Smart Link SDK

To enable in-context editing in Web Spotlight, use the Kontent.ai Smart Link SDK in your app. Make sure to initialize the SDK with basic information about your project’s environment. To make smart links work, the Smart Link SDK requires specific data attributes in your web app’s HTML markup. There are several types of smart links that work in Web Spotlight. The following code shows how to annotate your HTML markup using the data-kontent-item-id and data-kontent-element-codename data attributes to add smart links for specific content elements. You can add the Smart Link data attributes for each visual element that takes its content from Kontent.ai to make the element editable.

Check 4: App deployment