Adjust your app for Web Spotlight
Is this page helpful?
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.
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>