Submit new element

Custom Elements

Samples of the HTML web pages that can be used as Custom Elements 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.

Gallery

Bing Image Picker

The Bing image picker allows to search images on Bing and use them in your website.

Bing Image Picker custom element

Bynder Image Selector

The Bynder Image Selector allows to search images in Bynder DAM and use them in your website.

Bynder Image Selector custom element

Color Picker

Color picker allowing user to choose a color from palette and sets it as a HEX string, e.g. '#ff0000' for red color, '#00ff00' for green, and so on.

Color Picker custom element

Components

In Kentico Kontent there is linked items element as well as linked items as a part of the rich text. Then there are components as a part of the rich text, but there are components missing as a stand-alone element so editors can't create as many components as they need with no related items created.

Components custom element

Country State Selector

Country and state selector is a drop down selector which allows users to select country and state (if country has any).

Country State Selector custom element

Date Picker

This is a simple calendar control based on jQuery UI DatePicker which lets you pick a date.

Date Picker custom element

Flickr Image Picker

The Flickr image picker allows to search images on Flickr and use them in your website.

Flickr Image Picker custom element

Geolocation Leaflet

This KC custom element allows you to put a marker on a map and it automatically gets converted to latitude and longitude geo locations.

Geolocation Leaflet custom element

Giphy Picker

The Giphy picker allows to search images on Giphy and use them in your website.

Giphy Picker custom element

Google Analytics Experiments selector

Google Analytics Experiments selector allows users to select an experiment and its variant from Google Analytics.

Google Analytics Experiments selector custom element

Google Places Geo-location Selector

This is a custom element for Kentico Kontent that allows users to easily get the geo-coordinates for a location using the Google Places API.

Google Places Geo-location Selector custom element

Icon Selector

In Kentico Kontent, an icon selector can be specified by using the `Multiple Choice` content element. But this lacks in usability as the content author has to guess what icon will be displayed when a particular choice is made. The icon selector hopes to make the life of the content editor easier with an easy to use dropdown of icons.

Icon Selector custom element

Image transformer

This custom element functions similarly to the Asset element, but allows an editor to apply the Image Transformation API to any selected image.

Image transformer custom element

Ipsum Input

The ipsum input allows you to quickly add ipsum content to your input fields.

Ipsum Input custom element

Item selector

This element offers items from another project to be linked with your item

Item selector custom element

Magento Product Selector

Magento product selector is a selector connected to Magento instance which allows users to search and select a product from the Magento product catalog.

Magento Product Selector custom element

Markdown

Markdown editor is a WYSIWYG Custom element which allows users to write formatted text using SimpleMDE. In this sample element, you can find examples of setting dynamic height and reacting on the window ‘resize’ events. When the element is disabled, the editor is set to the read-only mode.

Markdown custom element

Optimizely Audience selector

Optimizely audiences selector is a selector connected to Optimizely API which allows users to search and select audiences from the Optimizely.

Optimizely Audience selector custom element

Shopify selector

Shopify product selector is a selector connected to Shopify Storefront which allows users to search and select a product from Shopify product catalog.

Shopify selector custom element

Switch

This KC custom element is just a simple switch -> on/off.

Switch custom element

Syntax Highlighter

Syntax Highlighter is an editable text area enhanced by the Ace Code Editor to provide a programmer-friendly environment for writing code examples. Offers a fine selection of programming languages to be highlighted.

Syntax Highlighter custom element

Toast UI Editor

Toast UI editor is based on Toast UI Editor. It is a Markdown WYSIWYG Editor including GFM Standard + Chart & UML Extensible.

Toast UI Editor custom element

Unique textbox

This custom element check whether your entered value is unique across all items in your project in specified element.

Unique textbox custom element

Unsplash Images Selector

This is a custom element for Kentico Kontent that allows users to search and select high-quality, royalty-free images from Unsplash.

Unsplash Images Selector custom element

WYSIWYG Quill

This KC custom element is based on the Quill rich text editor. It stores content in JSON format, so it's omni-channel friendly.

WYSIWYG Quill custom element

WYSIWYG Summernote

This KC custom element is based on the Summernote rich text editor. It allows you to switch to the Source code mode to edit or see the HTML markup!

WYSIWYG Summernote custom element

WYSIWYG TinyMCE

This Kentico Kontent custom element is based on the TinyMCE WYSIWYG text editor.

WYSIWYG TinyMCE custom element

Youtube Video Preview

This KC custom element allows you to add various types of Youtube video URL, it extracts the video id for your apps and shows the video.

Youtube Video Preview custom element

Youtube Video Selector

YouTube video selector allows users to search and select videos from YouTube.

Youtube Video Selector custom element