What does your web app need to do to display interactive pages in Web Spotlight? Review a short checklist with code samples to see if your app is ready.
Use Delivery SDK (the JS version or the .NET version) 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.
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.
in your app for a better developer experience and easier maintenance.
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.
The Smart Link SDK requires specific data attributes in your web app’s HTML markup to make smart links work. Several types of smart links 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.
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.
Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
// This example uses generated models. See https://kontent.ai/learn/strongly-typed-modelsconst [landingPage, setLandingPage] = useState<LandingPage | null>(null);// Retrieves the Website root item and saves the linked Landing pageuseEffect(() => { 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]), );}, []);
TypeScript
<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>
// 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>;
Adjust your app for Web Spotlight | Kontent.ai Learn
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.
Jan Cerman
7 minutes
Web Spotlight
or the .NET version