Skip navigation

Set up editing content directly from the preview

Content contributors sometimes need to fix minor errors or typos right away when they see them on your website or app. You can add an Edit button to the preview environment of your application, which redirects users straight to the particular item or even element in Kentico Kontent.

Table of contents

    This way, your editors don't have to spend time looking for the right content in Kentico Kontent. This approach is similar to setting up content preview, just in the opposite direction: Instead of navigating from Kentico Kontent to a preview of the item, you navigate from content inside the preview to the corresponding content item in Kentico Kontent.

    To navigate to a specific item in Kentico Kontent, construct a link with the following structure:<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>

    To navigate to a specific content element in Kentico Kontent, add the element's codename to the link:<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ITEM_ID>/element/<ELEMENT_CODENAME>

    We check if your user role has access to the specified content item.

    Navigating to nested elements

    You can also link to an item nested in a linked items or rich text element in another item. The structure of the relationship will be reflected in the breadcrumbs inside the app for easy navigation.

    For example, a link like this<YOUR_PROJECT_ID>/variant-codename/<LANGUAGE_CODENAME>/item/<ON_ROASTS_ITEM_ID>/element/related_articles/ item/<ORIGINS_OF_ARABICA_BOURBON_ITEM_ID/element/body_copy

    will send you to the following screen:

    Where you can see your item in the app.

    Currently, you can't directly access elements nested in content components. You can only link to the highest-level Rich text element in which the component is nested.

    Simple example

    Below is a simple TypeScript application which uses the TypeScript Delivery SDKOpens in a new window to retrieve a specific content item. Then, it uses the and item.system.language metadata properties of the item to display an Edit link for it.

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

    Advanced example

    Have a look at a more complex example of an Edit button in our .NET Sample applicationOpens in a new window. The application uses helper methods in our Management SDKOpens in a new window to construct the edit links more easily.

    How the edit buttons look in the app.

    What's next?