Setka Onboarding for Engineering Teams

The deep dive into how Setka Editor works, from the inside.

Agenda:

  1. Platform Overview

  2. Setka Architecture

  3. Integrations

  4. API-s

  5. SEO

  6. Analytics and Ad-Tech

  7. Components and Templating

  8. Step-by-step guide

  9. FAQ

1. Platform Overview

Setka Editor is a smart tool for distributed teams to design better content experiences that convert without having to code. We help companies upgrade their content design experiences by delivering:

  • Best-in-class software: An easy-to-use flexible editor with powerful design capabilities and outstanding page load performance optimization.

  • Open content ecosystem mentality: We provide seamless integrations with any content management systems or eCommerce platforms and the ability to build on top of Setka Editor.

  • Collaborative design: we enable cross-team collaboration for designers and non-designers alike.

Before you start learning how to use the specific tools in Setka Editor, check out this high-level explanation of what Setka allows you to do—and how it can help you create more beautiful content designs.

Video with an overview of Setka platform

2. Setka Integration Architecture

Graphic scheme of Setka Editor integration structure

Content Design System Manager

Setka’s Content Design System Manager lets you easily set up content styles that reflect your brand, manage re-usable design components and create custom layout grids that you can use over and over again. This video will walk you through how to get started and all the options you have in the Setka CDSM.

Video tutorial about Setka Content Design System Manager

Which files are critical for the Setka Editor operation?

Setka Editor files launch both on the post editing page (for the editor tool operation) and on the post preview page (to connect Setka Editor styles to user’s content).

Setka Editor files on the post editing page

  • content_editor_files — JS и CSS editor files (WYSIWYG interface of Setka Editor).

  • theme_files — JSON config file and a concatenated CSS file of user’s styles.

Setka Editor files on a post preview page

  • pulbic.js — scripts to launch interactive post elements (animations, footnotes, galleries, etc.)

  • style files — there are several ways to turn post styles on the post preview page

How Setka Editor files will reach the user's domain?

All the changes in styles and layout grids are automatically sent via webhook push to the user’s domain.

To get these changes reflected in your CMS, the user needs to receive updates from editor.setka.io.

Setka Editor will address a URL specified in the Editor Webhooks Endpoint field on the CMS Integration page (e.g., yourdomain.com/setka_editor_config) with the following request:

POST yourdomain.com/setka_editor_config

Once a Style Manager style is updated, the posts where these styles were used change to reflect the changes made to the style. However, the changes cannot be applied instantly. The delay depends on the cache update settings on the client-server. Adding new elements does not cause changes to old posts.

Where the files are stored?

Setka posts utilize these files to function properly:

  • The post's HTML code.

  • CSS files of Setka styles and grids.

  • JS files of interactive elements, such as galleries and animations.

  • Images.

  • JS file of the editor itself, in case of CMS plugins or custom integrations.

The file storage location depends on the integration type.

Setka Cloud

If posts are exported from Setka Cloud as an HTML code, the files, such as images, CSS, or JS, are loaded from Setka CDN.

Files

Where they are stored

Post's HTML code

Your server

CSS files of Setka styles and grids

Setka CDN

JS files of interactive elements

Setka CDN

Images

Setka CDN

Custom integrations and Setka Editor CMS plugins

The official Setka plugins for CMS and e-commerce platforms can be configured to your liking. All the files are stored on your server by default, but it can be changed in plugin settings.

In the case of custom CMS integration via API, you can decide where to load the files from. However, images cannot be uploaded on Setka CDN.

Files

Where they are stored

Post's HTML code

Your server

CSS files of Setka styles and grids

Your server or Setka CDN

JS files of interactive elements

Your server or Setka CDN

Images

Your server

Setka Editor JS file

Your server or Setka CDN

Setka supports Critical CSS extraction as an option. If Critical CSS is used, some critical styles are put into the post's HTML code as inline blocks. It speeds up page loading.

Integration via Content Cloud API

Content Cloud API provides the post's raw HTML code and the links to all the necessary files: CSS, JS, or images. You can use the links to Setka CDN or store these files on your server.

Files

Where they are stored

Post's HTML code

Your server

CSS files of Setka styles and grids

Your server or Setka CDN

JS files of interactive elements

Your server or Setka CDN

Images

Your server or Setka CDN

Do Setka Editor styles interfere with your site?

No. Setka Editor uses unique CSS class names that won't interfere with your site's styles.

Headless CMS and static site generators

Setka Editor is compatible with headless CMS and static site generators. Here are the examples:

Single-page applications compatibility

Setka Editor can be integrated into SPA.

3. Integrations

Setka integrates with many different content management systems (CMS) or eCommerce platforms. See the options below and learn how to set up Setka with your preferred CMS.

4. APIs

Want to customize things further? Learn how to use the Setka APIs to integrate with a different CMS, create custom components, or build for API-first platforms.

5. How Setka content is marked up

HTML code structure and SEO practices

  • Setka Editor is focused on proper code structure in line with HTML5 standards. Unlike many page builders, working within post content allows for a lower level of nesting (which means faster loading times).

The code structure is well demonstrated in the Components guide.

Setka Internal classes

Setka uses its' own classes for all the elements. It is done to not interfere with your site's CSS. Follow this guide to gather Setka classes from the page code.

6. SEO

Does Setka add META tags?

Setka Editor is only responsible for the post content itself. The content is placed inside the <body> section. The META part of the code is organized on the CMS side.

How Setka Editor code maintains the text structure and image indexing?

Setka Editor properly uses header and paragraph tags.

How Setka impacts page load speed?

Setka content is optimized based on best practices advised by Google Lighthouse. Hence, it loads faster and gains more points in benchmarks than other popular page builders.

Does Setka Editor support alternative text for images?

Setka Editor supports the input of alt text for all your images.

Setka and AMP

Setka supports official Google AMP plugins for WordPress and Drupal. You can also gather AMP-compatible styles via API for custom CMS integration.

Setka and Facebook Instant Articles

Setka is compatible with Facebook's Instant Articles format.

Is Setka compatible with SEO plugins?

Setka Editor content is compatible with the majority of SEO plugins. Our clients successfully use the editor in conjunction with Yoast SEO, All in One SEO Pack, Google XML Sitemaps, Seo Ultimate, and other popular SEO solutions.

7. Analytics and ad-tech

Is Setka compatible with in-read ads?

Setka posts are HTML code that is not placed into <iframe>. Thus, the code is compatible with in-read ads. These ads are tied to paragraphs. Ad blocks successfully run in between text blocks. You can count paragraphs based on a combination of <p> tag and the data-ce-tag="paragraph" attribute. Here is an example of a typical paragraph in a Setka post:

<p class="stk-reset" data-ce-tag="paragraph">
Paragraph text.
</p>

Can fixed display ads be inserted into Setka articles?

Yes, display ads can be placed in Setka posts as embeds or components.

Does Setka come with built-in analytics for posts?

Setka Editor does not come with its' own analytics tool. However, Setka posts are fully compatible with third-party analytics, such as Google Analytics, Google Tag Manager, IO, Yandex Metrica, etc.

Setka takes an approach whereby the tool should not measure its own performance. Measurements should be taken by independent agents — other analytics tools and benchmarks.

8. Components and templating

Setka provides flexible tools for templating and customizing the editor itself.

Static templates and components

Components are what we call our customizable micro-templates that you can create and use over and over again for smaller bits of content throughout your posts and pages—things like CTA boxes, pull quotes, side notes, dividers, captions, and more. Not only can you create reusable layouts for these small elements, but you can make sure each one is branded using your fonts, colors, brand imagery, and styles.

Post templates could save you time if you are regularly creating content with similar structure and design elements. Like components, post templates save time when creating new content.

Dynamic components and Setka Editor customization

The editor itself is also customizable. You can add custom buttons to the right-hand toolbar if needed. This is done via the Custom Components API:

Setka Editor also supports widgets in the Magento CMS plugin.

Built-in image optimizations

Setka Editor can optimize images automatically if Setka Cloud is used. It also supports source sets for any desired CMS or custom integration.

Optimizations in Setka Cloud posts

All Setka Cloud posts come with source sets for different screen sizes. Resized images are also converted to next-gen formats such as .webp.

Optimizations in official CMS and custom integrations

Setka automatically generates source sets (srcset attribute) for different screen sizes in official WordPress and Drupal plugins. You can also generate srcset in your custom CMS — Setka posts will work with it just fine.