Custom JS plugins

Supercharge your Setka posts with custom JS plugins. Implement your content sliders, image popups, accordions, tabs, and many more. Build JS plugins for your content any way you want.

Setka Editor provides various interactive elements to diversify your content and make it more engaging. It includes animations, galleries, hotspots, and footnotes. And we are always happy to add more to the package.

We also understand that you might need to create experiences that are not yet available as Setka's default features. Therefore, we want to give you an option to create your own JavaScript plugins enabling you to implement new custom elements. For interactive examples, visit our blog page about Custom JS plugins.

What are custom JS plugins

Custom JS plugins allow you to build your JavaScript-based logic on top of the Setka Editor content. You can create custom plugins that add new interactive components: galleries, content sliders, animated pieces, checklists, anything you could think of.

Basically, any functionality that can be achieved by combining JavaScript and Setka-based HTML is possible.

How it works

  1. You build the JavaScript plugin.

  2. Load it to your server or send it to us to load on Setka CDN. The place to store your JS plugin is determined based on your integration type.

  3. The plugin is then loaded to the Setka content pages. These plugin manipulates the content based on your described logic. The processes of launching the plugin on the page and uploading it to Setka CDN (if needed) are described below:

Loading a JS plugin to your Setka post

The JS plugin can be connected to the page by adding the corresponding data-* attribute into an HTML tag, in a form of:

data-stk-plugin="[vendor_code]--[plugin_name]--[plugin@version_number]"

Where:

  • [vendor_code] is the vendor code for your plugin.

  • [plugin_name] is the plugin name.

  • [plugin_name@version] is the plugin version.

For example, adding the data-stk-plugin="stk--content-slider--content-slider@0.5" attribute will enable the stk/content-slider@v0.5 plugin.

The HTML code that loads the plugin within the grid will look like this:

<div class="stk-grid stk-stk-content-slider"
     data-ce-tag="grid"
     data-stk-plugin="stk--content-slider--content-slider@0.5">
...
</div>

The code that includes the plugin can be saved as a component. This way your users would be able to quickly add custom interactive elements to the post.

Where the JS plugin can be stored?

There are several ways of storing the plugin depending on the Setka Editor integration type.

Custom integrations

If you are using a custom Setka Editor integration via API, you can upload the JS plugin on your own server where Setka Editor is running. This plugin should also be connected to article pages where the custom element is used.

Please create plugins with attention to code structure. Keep in mind, that plugins may interfere with the Setka Editor itself if built unsafely. Setka Support team would not be able to debug such modifications.

Default CMS integrations and Content Cloud

To enable your custom JS plugin for one of the default CMS integrations and/or in the Content Cloud, please contact our support team at support@tiny.cloud with the topic "Custom JS plugin application".

In the message, please:

  • Specify your company/account name.

  • Describe the functionality of the plugin.

  • Attach the JS file of the plugin.

We will verify the JS code of the plugin. If it complies with our requirements, it would be uploaded to your Setka account. Then you would be able to use it in your posts and components. We will reach out to you directly if any fixes or additional information is needed.

Custom JS examples

stk/content-slider

Content slider built of stk-grid components.

How to enable

Add data-stk-plugin="test-01--content-slider--content-slider@0.5" attribute to any HTML element of the post:

<div class="stk-grid stk-stk-content-slider stk-theme_44178__mb_4 stk-layout__overhangs_both" data-ce-tag="grid" data-stk-plugin="test-01--content-slider--content-slider@0.5" data-stk-css="stkc9gKg">
  <div data-col-width="12" class="stk-grid-col stk-grid-col_last stk-theme_44178__pad_ver_2" data-ce-tag="grid-col">
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="12" class="stk-grid-col stk-grid-col_last stk-theme_44178__pad_ver_4" data-stk-css="stkxSRMP" data-ce-tag="grid-col">
        <p class="align-center stk-reset stk-theme_44178__color_44178_custom_color_3" data-ce-tag="paragraph">Slide 1</p>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="12" class="stk-grid-col stk-grid-col_last stk-theme_44178__pad_ver_4" data-stk-css="stkFNJ1Y" data-ce-tag="grid-col">
        <p class="align-center stk-reset stk-theme_44178__color_44178_custom_color_3" data-ce-tag="paragraph">Slide 2</p>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="12" class="stk-grid-col stk-grid-col_last stk-theme_44178__pad_ver_4" data-stk-css="stkQce-E" data-ce-tag="grid-col">
        <p class="align-center stk-reset stk-theme_44178__color_44178_custom_color_3" data-ce-tag="paragraph">Slide 3</p>
      </div>
    </div>
  </div>
</div>

stk/lightbox

Simple image lightbox.

How to enable

Add data-stk-plugin="test-01--lightbox--lightbox@0.4" attribute to any HTML element of the post:

<div class="stk-theme_44178__mb_4 stk-grid" data-ce-tag="grid" data-stk-plugin="test-01--lightbox--lightbox@0.4">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"><img src="https://via.placeholder.com/1280x768.png?text=Image+01" alt="Image 01" class="stk-image stk-reset" /></div>
    </figure>
  </div>
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"><img src="https://via.placeholder.com/1280x768.png?text=Image+02" alt="Image 02" class="stk-image stk-reset" /></div>
    </figure>
  </div>
  <div data-col-width="4" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"><img src="https://via.placeholder.com/1280x768.png?text=Image+03" alt="Image 03" class="stk-image stk-reset" /></div>
    </figure>
  </div>
</div>

stk/spoiler

Simple spoiler.

How to enable

Add data-stk-plugin="test-01--spoiler--spoiler@0.6" attribute to any HTML element of the post:

<div class="stk-theme_44178__mb_4 stk-grid" data-ce-tag="grid" data-stk-plugin="test-01--spoiler--spoiler@0.6">
  <div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><button class="stk-theme_44178__stk-btn_basic stk-theme_44178__style_font_style-1593690481067 stk-reset" data-stk-button="1">Click me!</button>
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="7" class="stk-grid-col" data-ce-tag="grid-col">
        <p class="stk-reset" data-ce-tag="paragraph">Here is the hidden content.</p>
      </div>
      <div data-col-width="5" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
        <figure class="stk-reset stk-image-figure" data-ce-tag="image-figure">
          <div data-ce-tag="mask" class="stk-mask"><img src="https://via.placeholder.com/1280x768.png?text=Image+01" alt="Image 01" class="stk-image stk-reset" /></div>
        </figure>
      </div>
    </div>
  </div>
</div>
PreviousCustom CSSNextSetka Content Design System Manager

Last updated

Was this helpful?