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

For Web Spotlight to work correctly, your app must be deployed and accessible via a public URL. You can use many different services to deploy your app, such as Microsoft Azure, Amazon AWS, Vercel, Netlify, or Surge.sh.Combined with the content preview, it’s crucial that your web app keeps the sensitive information on the server side and doesn’t reveal it on the client side.

Check 1. Content preview

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

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

import { createDeliveryClient } from "@kontent-ai/delivery-sdk";

export const deliveryClient = createDeliveryClient({
    environmentId: process.env.KONTENT_AI_ENVIRONMENT_ID || '',
    previewApiKey: process.env.KONTENT_AI_PREVIEW_API_KEY,
    defaultQueryConfig: {
        usePreviewMode: true
    }
})

// This example uses generated models. See https://kontent.ai/learn/strongly-typed-models
const [landingPage, setLandingPage] = useState<LandingPage | null>(null);

// Retrieves the Website root item and saves the linked Landing page
useEffect(() => {
  deliveryClient.item<WebSpotlightRoot>('website_root')
    .toPromise()
    .then(
      response => (
        // Website root uses the 'Content' element to link the Landing page
        setLandingPage(response.data.item.elements.content.linkedItems[0])
      )
    )
}, [])

<img
  src={landingPage.elements.image.value[0]?.url}
  // If the asset doesn't have an alt text description, use its file name
  alt={landingPage.elements.image.value[0]?.description ||
    landingPage.elements.image.value[0]?.name}
  height={landingPage.elements.image.value[0]?.height || 200}
  width={landingPage.elements.image.value[0]?.width || 300} />
<h1>{landingPage.elements.title.value}</h1>
<div dangerouslySetInnerHTML={{ __html: landingPage.elements.body.value }}></div>

import KontentSmartLink from '@kontent-ai/smart-link';

const kontentSmartLink = KontentSmartLink.initialize({
  defaultDataAttributes: {
    projectId: process.env.KONTENT_AI_ENVIRONMENT_ID,
    languageCodename: "default"
  },
  queryParam: "preview"
});

// Specify content item ID
<div className="App-header" data-kontent-item-id={landingPage.system.id}>
  <img
    // Specify element codename using a strongly typed model
    data-kontent-element-codename={contentTypes.landing_page.elements.image.codename}
    className="App-logo"
    src={landingPage.elements.image.value[0]?.url}
    // If asset doesn't have alt text description, use its file name
    alt={landingPage.elements.image.value[0]?.description ||
      landingPage.elements.image.value[0]?.name}
    height={landingPage.elements.image.value[0]?.height || 200}
    width={landingPage.elements.image.value[0]?.width || 300} 
  />
  <h1
    data-kontent-element-codename={contentTypes.landing_page.elements.title.codename}>
    {landingPage.elements.title.value}
  </h1>
  <div
    data-kontent-element-codename={contentTypes.landing_page.elements.body.codename}
    dangerouslySetInnerHTML={{ __html: landingPage.elements.body.value }}>
  </div>
</div>

Review the checks or explore a simple appThe code samples in this lesson are taken from a simple React app. Choose whether you want to go through the checks or explore the source code

of the React app. The app is complementary to this path and only displays the landing page in Web Spotlight.

Production vs. previewYou can create multiple delivery clients in your app for different purposes. For example, one client can preview the latest content while another can retrieve published content. Based on the specified environment variables, your app would choose the right client for your production or preview deployment environments.