Edit links
Content creators sometimes need to correct errors or typos when they see them on preview of your website or app. Add edit buttons to your app to let your content creators quickly edit content in Kontent.ai.To make the authoring experience even better, set up automatic refresh for preview to see the latest changes without any hassle.
Automatically create edit links in web apps
Use the Smart Link SDK
in your preview environment so that your web apps automatically create clickable regions on your pages.
Clicking the regions will open a specific content item in Kontent.ai. These regions are based on annotations in your HTML code. You need to annotate the HTML with data attributes so the Smart Link SDK knows where the content comes from.
Set up your web app for smart links
To create a smart edit link to a content item in Kontent.ai, the Smart link SDK needs to know several things, such as your environment ID (formerly called project ID), language, and content item ID. You can also provide details about specific elements or components within a content item in your HTML code. For example, you can annotate your HTML code like so:- In your website’s
<body>, specify the environment ID usingdata-kontent-project-id="1d50a0f7-9033-48f3-a96e-7771c73f9683"and language usingdata-kontent-language-codename="en-US". - In a
<div>, specify the content item ID usingdata-kontent-item-id="af858748-f48a-4169-9b35-b10c9d3984ef". - (Optional) In a
<p>, specify the codename of an element usingdata-kontent-element-codename="body".
https://app.kontent.ai/goto/edit-item/project/1d50a0f7-9033-48f3-a96e-7771c73f9683/variant-codename/default/item/af858748-f48a-4169-9b35-b10c9d3984ef/element/body.
You can also specify identifiers for content components using data-kontent-component-id so that your content creators can enjoy an even better editing experience.
For more specific steps and examples, check out the Smart Link SDK usage instructions.
Set up your web app for Add buttons
The
Add buttons in Web Spotlight can be set up in a similar way to smart links:
- Provide your environment ID, language, and content item ID.
- Specify the element, either a rich text or a linked items element, by using
data-kontent-element-codename. - Use
data-kontent-add-buttonto allow rendering of the Add button. - (Optional) Use
data-kontent-add-button-render-positionto specify the exact location of the Add button on preview. - Define where to add the new content.
- For a fixed position within the element, use
data-kontent-add-button-insert-position=start|end. - For a relative position, use
data-kontent-add-button-insert-position=before|afteraccompanied bydata-kontent-item-idordata-kontent-component-idthat specifies a linked item or a component before or after which you want to add new content.
- For a fixed position within the element, use
.
Manually create edit links in native apps
In native apps that don't return HTML, you need to construct the edit links manually. The edit links are based on a pattern with variables that you fill in based on what content your app displays on preview.Create links to content items
To create edit links for specific content items, construct your links using the following URL pattern.- URL pattern:
https://app.kontent.ai/goto/edit-item/project/<YOUR_ENVIRONMENT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>- Replace YOUR_ENVIRONMENT_ID, LANGUAGE_CODENAME, and ITEM_ID with the actual values from your project.
- Example URL:
https://app.kontent.ai/goto/edit-item/project/8d20758c-d74c-4f59-ae04-ee928c0816b7/variant-codename/en-US/item/4d4dc14d-8c7c-471f-b797-c6694c604964
Create links to elements in content items
To create edit links to specific elements within items, extend the URL pattern for a content item above with information about the specific element.- URL pattern:
https://app.kontent.ai/goto/edit-item/project/<YOUR_ENVIRONMENT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>/element/<ELEMENT_CODENAME>- Replace YOUR_ENVIRONMENT_ID, LANGUAGE_CODENAME, ITEM_ID, and ELEMENT_CODENAME with the actual values from your project.
- Example URL:
https://app.kontent.ai/goto/edit-item/project/8d20758c-d74c-4f59-ae04-ee928c0816b7/variant-codename/en-US/item/4d4dc14d-8c7c-471f-b797-c6694c604964/element/related_articles
Interactive example
Create links to nested content items
You can also link to a content item nested in a linked items or rich text element in another item. The structure of the linked relationship will be reflected in Kontent.ai in the breadcrumbs for easy navigation.# Pattern
https://app.kontent.ai/goto/edit-item/project/<YOUR_ENVIRONMENT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>/element/<ELEMENT_CODENAME>/item/<NESTED_ITEM_ID>/element/<ELEMENT_CODENAME>
# Example
https://app.kontent.ai/goto/edit-item/project/8d20758c-d74c-4f59-ae04-ee928c0816b7/variant-codename/en-US/item/4d4dc14d-8c7c-471f-b797-c6694c604964/element/related_articles/item/29b82988-fb9e-4327-a34b-b568cfaa39e9/bodyAutomatically refresh preview in Web Spotlight
Automatic refresh in Web Spotlight makes live editing easier for content creators. Whenever a content change is propagated to Delivery Preview API, you can have the Smart Link SDK update the content preview for you. For your web apps to support automatic refresh for content preview, make sure that your preview environment:- Uses the Smart Link SDK version 2.2.0 or newer.
- Sets the
X-KC-Wait-For-Loading-New-Contentheader totruewhen fetching data from the Delivery Preview API.
Implement a custom refresh handler
In some cases, refreshing the page might not be enough. For example, if you use a static site generator for your preview, you need to trigger the rebuild of the page before refreshing it. Or maybe you don’t want to refresh the entire page when a single item has been updated and would rather re-render only the affected place in the UI. That's why the Smart Link SDK supports the custom refresh handler, which allows you to specify how your web page reacts to refresh events received from Web Spotlight.// Tip: Find more about JS/TS SDKs at https://kontent.ai/learn/javascript
import KontentSmartLink, { KontentSmartLinkEvent } from '@kontent-ai/smart-link';
const sdk = KontentSmartLink.initialize({ ... });
sdk.on(
KontentSmartLinkEvent.Refresh,
(data, metadata, originalRefresh) => {
// Custom refresh logic goes here
// ...
originalRefresh(); // If you want to refresh the page at the end
}
);
Instant content preview in Web Spotlight
With Web Spotlight live preview, you can set up your app so that it instantly reacts to content changes. This real-time feedback leads to a better editing experience for content creators.- Uses the Smart Link SDK version 3.2.0 or newer.
- Contains custom logic to perform content updates based on messages from iframe communication. You need to define how your app responds to the update messages. Learn how to set up the live preview with Smart Link SDK.
