You can extend Kontent.ai by implementing extra features you need for your project, such as a 3rd-party video service. These extensions are called custom elements. Custom elements help you expand the built-in functionality of Kontent.ai and take the authoring experience to next level.
Custom elements are small HTML apps that exist in a sandboxed <iframe> in Kontent.ai and interact with Kontent.ai through the Custom Elements API. They enable you to extend the default content type elements
to include the functionality you need.
Have a look at a few examples of extending Kontent.ai capabilities using custom elements:
Enable selecting assets from a 3rd-party digital asset management system (DAM), such as using a Bynder custom element.
Custom elements are HTML applications loaded in an <iframe>. They need to be hosted so the browser can fetch the file.
You need to host your custom element yourself or use a service like Netlify.
If you decide to host your custom element on your own servers, you need to:
Set up the appropriate domain certificate for the server.
Make sure the server sends the X-frame-options (or Content-Security-Policy) header to specify an allowed origin, in this case, https://app.kontent.ai. For more details, see the MDN Web Docs.
If you’d like to test your custom element locally, use a secure tunnel to your localhost. You can use a service like ngrok that connects to your local application and provides a secure public URL for access from Kontent.ai.
Your custom element is separated from the rest of Kontent.ai through the sandbox attribute on the <iframe>. The following sandbox flags are enabled:
allow-forms – allows form submission
allow-scripts – allows JavaScript to run inside the <iframe>
allow-popups – allows popups
allow-downloads – allows downloading files from within the custom element
allow-same-origin – allows the document to maintain its origin
allow-modals – allows modal dialogs
allow-storage-access-by-user-activation – allows storage access (e.g. cookies or local storage)
Keep in mind that this is a 3rd party context. You need to
To have your custom element appear in content items, you need to add it to the content type of the items.
In Content model, open a content type for editing.
Click Custom element on the right to add a new custom element.
Name the element.
In Hosted code URL (HTTPS), paste the URL where you host your custom element.
If you set the custom element as required, Kontent.ai checks if the element contains any value. Any other value than null is considered valid and won't prevent an item from getting published.
The JSON parameters enable you to configure your element and reuse it in various contexts. In some cases, you may want different settings for different projects, content types, or even elements.Â
For example, a custom element that provides a WYSIWYG editor might be configured to accept JSON parameters for activating and deactivating spellcheck and tools like inserting images. This way, you would enable spellcheck or images only in places where it makes sense.
You might also change the custom editor's HTML so that all its features can be activated and deactivated via JSON parameters. That way, each custom element can have a different feature set.
You can use the JSON parameters to set a default value for your custom element.
For example, you can add {"default_value": "Enter your text here"} to the JSON parameters. When you initialize your element, check whether there's already some value in the element. If there isn't, use the value from the JSON parameters.
"markdown_editor": { "type": "custom", "name": "Markdown editor", "value": "## Hello world\nThis is a sentence with **bold** and *italics* in it.\n> And blockquotes!"}
Custom elements | Kontent.ai Learn
Tip: Create your own custom elementsCan't find an existing custom element that does the trick? Get started with our custom element template to quickly create your own custom elements.
When you create a content item via Management API, you need to insert the default value yourself. Without that, the custom element would remain empty since its code doesn't execute after you create the item via API.
David Klement
7 minutes
Custom elements
.
Content model, open a content type for editing.
Custom element on the right to add a new custom element.
