Gallery of Custom Element samples for Kontent.ai

Warning

This repository has been archived and is currently not being updated anymore. Please, check out our new alternative documentation on GitHub, as well as the brand new react template for custom elements.

The gallery itself has been deprecated as well - new list of available custom elements can be found here.

---

Custom elements help you with extending the functionality of Kontent's UI and thus improving the content editing experience

Intro • Disclaimer • Create custom element • Contributing • Contributors • Resources

Introduction

A Custom element is essentially a small HTML application that exists in a sandboxed <iframe> and interacts with Kontent.ai via the Custom Elements API.

The Gallery of Custom Element samples contains a list of different custom elements that might help you to extend content editing capabilities inside of your Kontent.ai project, or even connect with different 3rd party services (like Digital Asset Management tools, or eCommerce solutions).

The custom elements denoted as core integration are focusing on a selected subset of integrated services mentioned on https://kontent.ai/integrations. These integrations will have a richer documentation and their issues will be handled with higher priority.

⚠ Disclaimer

1. Any URLs provided in the repos are not be used in production. You should follow the steps provided in the custom element's repository to deploy it yourself for testing, or use in production.

2. If a custom element is missing deploy instructions, or you're having trouble with setting it up, please create an issue in the custom element's repository.

3. If you wish to use any premade custom element in a production project, you should perform a code review and fork/deploy the source code on your own as the custom elements are subject to change without any notice. It is also always a good idea to inspect a code you are planning to use seriously, especially if it connects to a 3rd party services, and/or requires some kind of special authorization (api keys, ...).

4. Some of the custom elements may require further configuration such as custom API keys, or be subject to CORS limitation. In those cases you will need to fork the source repository and adjust the configuration in your copy repository according to instructions in the element's README file.

5. Some of the custom elements may contain a form of a server/backend part as well (using Netlify functions, Azure functions, or Amazon Lambda functions). In that case, the setup process will require deploying and configuring these services as well for the element to work. This should be always mentioned and described in the repository documentation as well.

How to create your own custom element

Read our dedicated tutorial on how to create a custom element for Kontent.ai.

Also, have a look at the general overview of deploying custom elements to Kontent.ai.

Styling your custom elements

By including default styles from Kontent.ai, you can make your custom element look consistent with the rest of the UI.

The /shared folder in this GitHub repository contains:

• custom-element-v2.css – a CSS stylesheet
• kentico-icons-v3.0.1.woff2 – a font file
• examples.html – An HTML page containing the implementation details and an HTML markup of some of the basic elements. See also the link in Demo section.

We recommend you clone the files and host them locally yourself. The kentico-icons-v3.0.0.woff2 file needs to be hosted in the same directory as the CSS stylesheet to be properly linked.

Feedback & Contributing

You can contribute by implementing a Custom Element Extension of your choice or pick one from the ideas. Create an HTML web page, include the Custom Elements API in the code, describe what your element does in the Readme file, and send us a pull request.

Pull request

The pull request should include:

• A screenshot file (animated or static)
  • Must be named using PascalCase (e.g. YourComponentName.gif)
  • Must be added to the src/data/assets folder
• An element information json file
  • Must be named using PascalCase (e.g. YourComponentName.json)
  • Must be added to the src/data/elements folder
  • Includes a brief description of the custom element functionality
  • Links to your repository
  • Use existing categories if possible
• Your repository should include a README.md file containing
  • A description of the custom element functionality
  • A screenshot/gif showcasing the custom element
  • Step by step instructions how to add custom element to Kontent.ai
  • Configuration description example
  • Example of the output in the Delivery Response
  • If possible, a "Deploy to Netlify" button to make it easy to get started (e.g. Deploying section of SimpleMDE Markdown Editor)

Sample element JSON

The element information JSON file named after your element's name in PascalCase (e.g. YourComonentName.json) must be placed in the /src/data/elements folder with the following format:

{
  "title": "Your Component Name",
  "description": "Short description of your element's purpose and functionality.",
  "thumbnailUrl": "../assets/YourComponentName.(gif|png|jpg)",
  "readmeUrl": "https://github.com/<YourGitHub>/<YourCustomElementRepoName>",
  "categories": [
    "Other"
  ]
}

Release

Release is automatically performed once the commit is done to master branch via GitHub action.

Ideas

We'd also appreciate if you submit your ideas for custom elements or vote for the existing ones.

Check out the Contributing page to see the best places to file issues, start discussions, and begin contributing.

Contributors

We have collected notes on how to contribute to this project in CONTRIBUTING.md.

Additional Resources

• List of core integrations & technology partners

• Kontent's Integration documentation
• Custom Element documentation
• Custom Element API reference