Skip navigation

Set up editing content directly from the preview

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.

Table of contents

    Use the Smart link SDK in the preview environment for your web apps to automatically create clickable regions on your pages.

    Clicking the regions will open a specific content item in Kontent. These regions will look similar to what you see in the Codepen example below.

    These regions are based on annotations in your HTML code. For them to work, you need to annotate the HTML with data attributes so that the Smart link SDK knows where the content comes from.

    To create an edit link to a content item in Kontent, the Smart link SDK needs to know several things such as your project ID, language, and content item ID. In your HTML code, you can also provide details about specific elements within content items.

    For example, you can annotate your HTML code like so:

    1. In your website's <body>, specify the project ID using data-kontent-project-id="1d50a0f7-9033-48f3-a96e-7771c73f9683" and language using data-kontent-language-codename="en-US".
    2. In a <div>, specify the content item ID using data-kontent-item-id="af858748-f48a-4169-9b35-b10c9d3984ef".
    3. In a <p>, specify the codename of an element using data-kontent-element-codename="body".

    When you initialize the Smart link SDK, it looks at these data attributes and uses them to create a URL such as 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 Kontent components so that your content creators can enjoy even better editing experience.

    For more specific steps and examples, check out the Smart link SDK usage instructionsOpens in a new window.

    Make sure you render the data attributes and edit links only in preview environment. In most cases, you want to display the edit links only in a preview environment that your editors can access. You can also use them in production – it's up to you to limit their visibility according to your needs.

    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.

    To create edit links for specific content items, construct URLs with the following structure.

    • HTML
    # Pattern https://app.kontent.ai/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID> # Example https://app.kontent.ai/goto/edit-item/project/8d20758c-d74c-4f59-ae04-ee928c0816b7/variant-codename/en-US/item/4d4dc14d-8c7c-471f-b797-c6694c604964
    # Pattern https://app.kontent.ai/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID> # Example https://app.kontent.ai/goto/edit-item/project/8d20758c-d74c-4f59-ae04-ee928c0816b7/variant-codename/en-US/item/4d4dc14d-8c7c-471f-b797-c6694c604964

    To create edit links to specific elements within items, extend URL to a content item above with information about the specific element.

    • HTML
    # Pattern https://app.kontent.ai/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<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
    # Pattern https://app.kontent.ai/goto/edit-item/project/<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<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

    When users click the edit links, Kontent checks if the user has access to the specified content item and element.

    Interactive example

    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 in the breadcrumbs for easy navigation.

    • HTML
    # Pattern https://app.kontent.ai/goto/edit-item/project/<YOUR_PROJECT_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/body
    # Pattern https://app.kontent.ai/goto/edit-item/project/<YOUR_PROJECT_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/body

    No edit links for Kontent components

    You can't link directly to elements nested in Kontent components. You can only link to the highest-level rich text element in which the component is nested.

    What's next?