Icircuit custom elements3/26/2023 ![]() Autonomous custom elements are standalone - they don't inherit from standard HTML elements.Optional An options object containing an extends property, which specifies the built-in element your element inherits from, if any (only relevant to customized built-in elements see the definition below).A class object that defines the behavior of the element.Note that custom element names require a dash to be used in them (kebab-case) they can't be single words. A string representing the name you are giving to the element.To register a custom element on the page, you use the fine() method. Any other value than null is considered valid and won't prevent an item from getting published.The controller of custom elements on a web document is the CustomElementRegistry object - this object allows you to register a custom element on the page, return information on what custom elements are registered, etc. If you set the custom element as required, Kontent.ai checks if the element contains any value. (Optional) In Parameters, enter JSON configuration parameters if your custom element needs any.In Hosted code URL (HTTPS), paste the URL where you host your custom element.Click Custom element on the right to add a new custom element.In Content model, open a content type for editing.To have your custom element appear in content items, you need to add it to the content type of the items. You need to set cookies attributes SameSite=None Secure to use cookies. Keep in mind that this is a 3rd party context.allow-storage-access-by-user-activation – allows storage access (e.g.allow-same-origin – allows the document to maintain its origin.allow-scripts – allows JavaScript to run inside the.Your custom element is separated from the rest of Kontent.ai through the sandbox attribute on the. You can use a service like ngrok that connects to your local application and provides a secure public URL for access from Kontent.ai. If you'd like to test your custom element locally, use a secure tunnel to your localhost.Make sure the server sends the X-frame-options (or Content-Security-Policy) header to specify an allowed origin, in this case.Set up the appropriate domain certificate for the server.If you decide to host your custom element on your own servers, you need to:. ![]() You need to host your custom element yourself or use a service like Netlify. They need to be hosted so the browser can fetch the file. Host your custom element securelyĬustom elements are HTML applications loaded in an. Choose a custom element that suits your needs, host the element securely, and add the element to Kontent.ai.Ĭan't find an existing custom element that does the trick? Get started with our custom element template to quickly create your own custom elements. Let your content creators write the way they're used to by implementing a custom Markdown WYSIWYG text editor.Ĭheck out the available custom elements created and maintained by our community.Add an AI-powered content personalization system like Recombee.Enable selecting assets from a 3rd-party digital asset management system (DAM), such as Bynder.Have a look at a few examples of extending Kontent.ai capabilities using custom elements: They enable you to extend the default content type elements to include the functionality you need. You need to securely host your custom elements yourself.Ĭustom elements are small HTML apps that exist in a sandboxed in Kontent.ai and interact with Kontent.ai through the Custom Elements API.To use your extension in a Kontent.ai project, add a custom element into a content type and specify the URL of your extension.A custom element is a small HTML app that acts as an extension of Kontent.ai's native capabilities.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |