Skip to content
Examples of custom element extensions for Kentico Kontent
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
BingImagePicker
Bynder
ColorPicker
Components
CountryStateSelector
DatePicker
FlickrImagePicker
Geolocation-Leaflet
GiphyPicker
GoogleAnalyticsExperiments
GooglePlacesSearch
IconSelector
ImageTransformer
IpsumInput
Item-selector
KCTuiEditor
Magento
Markdown
Optimizely
RequestRepeater
Shopify
Switch
SyntaxHighlighter
UniqueTextbox
UnsplashSelector
VideoPreview
WYSIWYG-Quill Update URLs Sep 16, 2019
WYSIWYG-Summernote
WYSIWYG-TinyMCE Update URLs Sep 16, 2019
YouTubeSelector
YoutubeVideoPreview
gallery-src
gallery Update gallery - new item selector element - released version Oct 7, 2019
shared
.gitignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md

README.md

Examples of Custom Element Extensions for Kentico Kontent

Gallery Stack Overflow

This repository contains samples of the HTML web pages that can be used as Custom Element Extensions in Kentico Kontent.

Custom elements help you with extending the basic functionality of Kentico Kontent UI and thus improving the content editing experience. Custom element is essentially a small HTML application that exists in a sandboxed <iframe> and interacts with the Kentico Kontent app via the Custom Elements API.

Note that Custom elements are only supported in the latest versions of our SDKs.

Custom elements' samples overview

All of the samples are listed in the Custom Element Gallery. The source code it stored in the /gallery-src folder.

⚠️ Disclaimer
Custom elements in this repository should be used for demonstration purposes only.

If you wish to use them in a production project, you should perform a code review and fork/deploy the source code on your own as the custom elements in this repository are subject to change.

NOTE: Some of the custom elements may require further configuration such as custom API keys or be subject to CORS limitation. In those cases please fork the source code repository and adjust the configuration in your repository according to instructions in the element's README file.

How to create a custom element

You can find a detailed tutorial on how to create a Custom element in our documentation.

Custom element DevKit

To make development of custom elements as easy as possible, we created a custom element devkit. The devkit includes Kentico Kontent alike wireframe and mocked API to enable seamless debugging experience. It is also capable of minimizing all assets and preparing custom element for production use.

Styling your custom elements

By including Kentico Kontent default styles, you can make your Custom element look consistent with the rest of the UI.

The /shared folder in this GitHub repository contains:

We recommend you clone the files and host them locally yourself. The kentico-icons-v1.6.0.woff 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:

  • HTML web page with the custom element
  • Additional files required for the custom element (js, css, ...) if needed
  • Styling code files if needed
  • README.md file containing
    • Description of the custom element functionality
    • Screenshot/gif showcasing the custom element
    • Step by step instructions how to add custom element to the Kentico Kontent UI
    • Configuration description example
    • Example of the output in the Delivery Response

If you want to list a custom element to the Gallery, include a JSON file named by the custom element (preferably in Pascal Case) placed to /gallery-src/content/elements folder in the following format:

{
  "title": "NAME OF THE CUSTOM ELEMENT",
  "description": "CUSTOM ELEMENT DESCRIPTION",
  "thumbnailUrl": "URL FOT THE SHOWCASE (SCREENSHOT/GIF)",
  "readmeUrl": "URL FOR THE CUSTOM ELEMENT README"
}

Ideas

We'll 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.

Analytics

You can’t perform that action at this time.