Introduction to custom integration
Last updated
Last updated
Please learn about Setka Editor and Setka Content Experience Design Manager:
Integration of Setka Editor and a CMS comes in 2 stages:
Style Manager integration — to update styles from the Style Manager account and the editor itself.
Editor initialization on a CMS' post editor page.
To start the integration, it is necessary to create an account (if you don't have one). After the registration, go to the CMS Integration tab on editor.setka.io and select Add your domain in the Set your domain block. Then select Via API as an integration type.
Fill in the license key. It is located in your Setka Account, on the Integrations tab. It is unnecessary to create a text field in your CMS interface; you can add it to the code. The license key is being transferred with your GET-requests.
Fill in the Editor config URL in the CMS Integration > Other tab.
Editor config URL is an address on which you will receive a recent version of the editor and style updates, created in the Style Manager, to your CMS. On initial sync, you will also receive a public_token, which is required for several editor functions to work, e.g., for commenting and inserting embeds via URL.
The link should be specified with a protocol (HTTP/HTTPS) for the correct integration.
It is not possible to specify a local server (localhost, 127.0.0.1). Public IP-address on DNS servers should match the domain. Set up a tunnel with an external address if you want to test an interaction with a local server, e.g., with the localtunnel service.
Company — a Setka client, each company with a website with a license key and an account in the Style Manager.
License key — company's unique ID, used to connect client websites with the Style Manager.
Public key (public token) — a public ID used to send auxiliary requests from the editor to the Style Manager. You can receive it in response to initial synchronization. The public key must be handled to editor initialization.
Style Manager (located at editor.setka.io):
A company account.
An interface for creating and editing styles (fonts, text formats, color palettes, etc.) and layout grids (column parameters, indentations, and margins).
An API for an automatic connection between the client website and Setka Editor.
Editor — Setka JavaScript WYSIWYG Editor. Launches only in the admin panel. It consists of 2 files in the form of:
editor.min.js — editor's main JS file (hereinafter – editor.js).
editor.min.css — main CSS file, contains editor's interface styles (hereinafter — editor.css).
Post — HTML-code of the post, wrapped into<div class=“stk-post”>...</div>.
Style — set of CSS rules for text styles, fonts, colors, dividers, etc., defines a corporate identity. Being edited in the Style Manager.
Grid — set of CSS rules for building modular grids with columns and indents, used in post layouts and mobile versions. Being edited in the Style Manager.
Styles and grids can be built-in or custom. They are being created in Style Manager. Style Manager generates a new pair of files on each change:
company.min.css — CSS rules for all the company's styles and grids (hereinafter — company.css).
company.json — JSON metadata of styles, grids, etc. (hereinafter — company.json).
public.js — JS file with scripts to launch interactive elements of a post (animations and galleries). Activates on external post pages only.
Setka Editor is currently available on WordPress, Drupal, Magento, Microsoft SharePoint Online, HubSpot, and Ghost. Setka also offers integrations with Shopify and Webflow via Zapier. On top of that, Setka Editor can be integrated with any platform, such as Joomla, MOD X, Typo3, or your own-written proprietary CMS or eCommerce platform.
Setka Editor generates well-structured code that meets the requirements of SEO. In the development of Setka Editor, we pay a lot of attention to semantics and correct code structure following the HTML5 standard. Setka Editor edits the page content only; thus, it generates the code with a less nesting level, unlike tools that generate the entire page (page builders). Less-nested HTML code allows faster page loading. Setka Editor also correctly tags headers and allows filling-in an alternate text for images.
Setka Editor uses its' own tree data structure. Each layout element (paragraph, image, grid, etc.) is presented as an object with properties and connections to other elements. It allows to stay unattached to the HTML representation of a document and export the content in any required format, e.g., JSON.
All the content is stored as HTML-code in our database. CSS files can be stored on the client-side or delivered via Setka Editor CDN.
