How to add custom JavaScript
to web pages in Setka

If you want to enhance your webpages’ front-end functionality by adding content sliders, image popups, accordions, tabs etc – you’ll need to use custom JavaScript on your site. Figuring out how to do it can be tricky, but with Setka’s Custom JS plugins you can build JavaScript features for your content any way you want.

Setka content customization options

As you might already know, Setka lets you add interactive design features without touching code, like animations, galleries, hotspots, and footnotes. But if you’d prefer to implement your design ideas to supercharge your content, now you can create your own JavaScript plugins for new, custom elements.

The new Custom JS plugins grant more granular control, and in this article, the steps below show you how to get started introducing these advanced features to your pages.

How it works

Custom JS unlocks your ability to build your own JavaScript-based logic above the Setka content. Basically, any functionality you can make by combining JavaScript and Setka-based HTML is possible, using Setka’s Custom JS feature:

  • Build the JavaScript plugin
  • Send your JavaScript plugin code for review to Tiny Support team
  • Tiny Support team loads JavaScript plugin code to Setka CDN
  • Add the JavaScript plugin to specific post by adding a data attribute with a plugin ID to the post content

When your plugins load, they manipulate the content based on your own JS logic, down to a fine-grained degree if needed.

The processes of launching the plugin on the page and uploading it to Setka CDN (if needed) are described below.

How to add Setka’s Custom JS plugin to your post

Make sure your JavaScript plugin code is loaded to Setka CDN 

Use the instruction in our Help Center, to submit the plugin code for review. Tiny Support team will notify you when the plugin is loaded and ready for use.

Add a plugin for the particular post by adding

data-stk-plugin=”vendor–name–name@version.js” attribute to any HTML element of the post. Setka’s public.js script will load and initialize the plugin for this particular element.

EXAMPLE

Adding data-stk-plugin=”stk–content-slider–content-slider@0.5″ code will enable stk/content-slider@v0.5 plugin:

<div class=”stk-grid stk-stk-content-slider”

data-ce-tag=”grid”

data-stk-plugin=”stk–content-slider–content-slider@0.5″

>…</div>

Read more → 

Custom JS ready-to-use plugins

Content slider plugin

stk/content-slider

Simple image lightbox plugin

stk/lightbox

Simple spoiler plugin

stk/spoiler

Simple accordion plugin

stk/accordion

Content slider plugin

stk/content-slider

Content slider build of stk-grid components.

Slide 1

Slide 2

Slide 3

Current version: 0.5

How to enable the content slider plugin

  • Add data-stk-plugin=”stk–content-slider–content-slider@0.5″ data attribute and “stk-stk-content-slider” class attribute to the grid holding the slides as shown below.
  • Save and test out the slider functionality, and adjust the attributes as needed

LAYOUT HTML EXAMPLE  (replace theme ID with yours)

<div class="stk-grid stk-theme_42092__mb_05" data-ce-tag="grid" data-stk-plugin="stk--lightbox--lightbox@0.7">
  <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 class="stk-mask" data-ce-tag="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 class="stk-mask" data-ce-tag="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 class="stk-mask" data-ce-tag="mask"><img src="https://via.placeholder.com/1280x768.png?text=Image+03" alt="Image 03" class="stk-image stk-reset" /></div>
    </figure>
  </div>
</div>

Simple image lightbox plugin

stk/lightbox

Current version: 0.7

How to enable the image lightbox plugin

  • Add data-stk-plugin=”stk–lightbox–lightbox@0.7″ attribute to the grid holding the images as shown below.
  • Save the changes, and check on the lightbox behavior. Makes adjustments as needed.

LAYOUT HTML EXAMPLE   (replace theme ID with yours)

<div class="stk-grid stk-theme_42092__mb_05" data-ce-tag="grid" data-stk-plugin="stk--lightbox--lightbox@0.7">
  <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 class="stk-mask" data-ce-tag="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 class="stk-mask" data-ce-tag="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 class="stk-mask" data-ce-tag="mask"><img src="https://via.placeholder.com/1280x768.png?text=Image+03" alt="Image 03" class="stk-image stk-reset" /></div>
    </figure>
  </div>
</div>

Simple spoiler plugin

stk/spoiler

Here is the hidden content.

Current version: 0.6

How to enable the simple spoiler plugin

  • Add data-stk-plugin=”stk–spoiler–spoiler@0.6″ attribute to the grid holding the toggle and the content elements as shown below.
  • Save and see how the spoiler plugin works. Adjust the attributes if needed.

LAYOUT HTML EXAMPLE (replace theme ID with yours)

<div class="stk-grid" data-ce-tag="grid" data-stk-plugin="stk--spoiler--spoiler@0.6">
      <div data-col-width="8" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col"><button class="stk-theme_42092__stk-btn_1614695961587 stk-theme_42092__style_font_style-1609248787036 stk-reset" data-stk-button="1" data-ce-tag="button">Click me!</button>
        <div class="stk-grid" data-ce-tag="grid">
          <div data-col-width="8" class="stk-grid-col stk-grid-col_last stk-theme_42092__pad_ver_05" data-ce-tag="grid-col" data-stk-css="stk4cdKs">
            <p class="stk-reset stk-theme_42092__pad_round_1" data-ce-tag="paragraph">Here is the hidden content.</p>
          </div>
        </div>
      </div>
    </div>

Simple accordion plugin

stk/accordion

Section 1

Section 1 content.

 Section 2

Section 2 content.

Section 3

Section 3 content.

Current version: 0.2

How to enable the simple accordion plugin

  • Add data-stk-plugin=”stk–accordion–accordion@0.2″ attribute to the grid holding the toggle and the content elements as shown below.
  • Save, and test drive the accordion. Change the attributes as needed.

LAYOUT HTML EXAMPLE (replace theme ID with yours)

<div class="stk-grid" data-ce-tag="grid" data-stk-plugin="stk--accordion--accordion@0.2">
  <div data-col-width="12" class="stk-grid-col stk-grid-col_last" 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" data-ce-tag="grid-col">
        <h4 class="stk-theme_42092__mb_05 stk-reset" data-ce-tag="paragraph"><img class="stk-reset stk-theme_42092__symbol_custom_image_3606308 stk-icon" src="https://ceditor.setka.io/clients/dq1ckh6yNkrGYFV0jBzLR1FpvmdQSxKY/css/assets/45639/img/info-01.svg"> Sektion 1</h4>
        <div class="stk-grid" data-ce-tag="grid">
          <div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
            <p class="stk-reset" data-ce-tag="paragraph">Section 1 content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
        <h4 class="stk-theme_42092__mb_05 stk-reset" data-ce-tag="paragraph"><img class="stk-reset stk-theme_42092__symbol_custom_image_3606308 stk-icon" src="https://ceditor.setka.io/clients/dq1ckh6yNkrGYFV0jBzLR1FpvmdQSxKY/css/assets/45639/img/info-01.svg">&nbsp;Sektion 2</h4>
        <div class="stk-grid" data-ce-tag="grid">
          <div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
            <p class="stk-reset" data-ce-tag="paragraph">Section 2 content.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="stk-grid" data-ce-tag="grid">
      <div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
        <h4 class="stk-reset stk-theme_42092__style_small_header stk-theme_42092__mb_05" data-ce-tag="paragraph"><img class="stk-reset stk-theme_42092__symbol_custom_image_3606308 stk-icon" src="https://ceditor.setka.io/clients/dq1ckh6yNkrGYFV0jBzLR1FpvmdQSxKY/css/assets/45639/img/info-01.svg"> Sektion 3</h4>
        <div class="stk-grid" data-ce-tag="grid">
          <div data-col-width="12" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
            <p class="stk-reset" data-ce-tag="paragraph">Section 3 content.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Taking the next step

Setka offers a vast amount of flexibility and customisation to create content with few to no design limits. Together with default tools, custom CSS, and custom JS components, you have the ability to create advanced design and animation types in no time without the risk of breaking code.

Learn more about custom JS plugins in Setka in our documentation.

This post was designed with Setka Editor, a new editing plugin for those who care about high-quality content. Learn more about Setka Editor or try it for free.

Read also