Quick links

PHP SDK
JavaScript SDK
🇷🇺Русский язык

Verstka API

Verstka offers developers a convenient way to integrate the editor into the site via an API.

Format of any query is POST multipart/formData

The format of the returned data (except for downloading files) is JSON, and will have the following fields:

rc - result result code (1 - for successful queries)
rm - message in text form
data - array of returned data

The same format should be followed in the responses to verstka requests when saving the article.

Editing an article

To edit an article, just send a POST request to the URL https://verstka.org/api/open with parameters:

material_id - material identifier (mandatory unique non-zero, when typesetting a separate mobile version, use the prefix 'M' in this field)
user_id - current user ID
html_body - html article (empty in the case of a new article)
api-key - API-key, issued when connecting to the Verstka SaaS API
callback_url - the URL to which the request will come when saving the article in the editor
host_name - from this host the editor will try to download images of the article (if html_body contains images and they have relative addresses)
user_ip - IP address of the current user (additional security level when opening the editor)
callback_sign - md5 from the concatenated parameters in the following order: secret, api-key, material_id, user_id, callback_url
custom_fields - an array of additional parameters in JSON format to enable additional editor features

Possible keys for the custom_fields array:

mobile = true - to edit the mobile version of the article
auth_user and auth_pw - if host_name is closed using http authorization
fonts.css - relative path to the CSS file with fonts to connect to the editor (described below)
any additional data (will be returned when the article is saved unchanged)

In response, the Verstka API will return the following data fields as JSON:

session_id - unique identifier of the editing session
edit_url - the URL of the editor page for this session

Also in the answer will be additional fields:

last_save - the last time the article was saved (in case the article was recently edited) DEPRECATED
contents - the URL to get the content of the editing session (required only for integration without callback_url)
client_folder - the calculated relative URL to the static content of the article on host_name (for debug)

If the editor fails to download some images of the article, the following additional parameters will be returned:

lacking_pictures - list of missing images
upload_url - URL to upload via POST multipart / form-data

Saving an article

Saving an article is available within 48 hours from the last interaction (opening or previous saving) of this article.

When the user clicks the save button in the editor, the callback_url will be requested and the following parameters are transferred using POST:

material_id - identifier of the stored material
user_id - current user ID
session_id - unique identifier of the editing session
html_body - html of the saved article
download_url - URL for downloading static content
custom_fields - JSON with additional fields passed when opening the editor
callback_sign - digital signature of the request, generated by the following algorithm:

md5 from the concatenated parameters in the following order: secret, session_id, user_id, material_id, download_url, where secret - the key issued when connecting to the Verstka SaaS API

Images of the article are available at download_url (returns a list) and download_url / name (returns a file), where name is the name of the file to download. You can store images in any folder on your website, but please keep original name of the file.

Use your own fonts

You need to collect a CSS file with certain comments and fonts sewn into base64, and then they will automatically appear in the Layout. default url /vms_fonts.css

At the top of the CSS file you need to specify the default font in the comments, which will be set when creating a new text object.

/* default_font_family: 'formular'; */
/* default_font_weight: 400; */
/* default_font_size: 16px; */
/* default_line_height: 24px; */

Further, for each @ font-face it is necessary to register comments with the name of the font and its style.

   /* font_name: 'Formular'; */
   /* font_style_name: 'Light'; */

Final CSS file:

/* default_font_family: 'formular'; */
/* default_font_weight: 400; */
/* default_font_size: 16px; */
/* default_line_height: 24px; */

@ font-face {
   /* font_name: 'Formular'; */
   /* font_style_name: 'Light'; */
    font-family: 'formular';
    src: url (data: application / font-woff2; charset = utf-8; base64, KJHGKJHGJHG) format ('woff2'),
         url (data: application / font-woff; charset = utf-8; base64, KJHGKJHGJHG) format ('woff');
    font-weight: 300;
    font-style: normal;
}

@ font-face {
   /* font_name: 'Formular'; */
   /* font_style_name: 'Regular; */
    font-family: 'formular';
    src: url (data: application / font-woff2; charset = utf-8; base64, KJHGKJHGJHG) format ('woff2'),
         url (data: application / font-woff; charset = utf-8; base64, KJHGKJHGJHG) format ('woff');
    font-weight: 400;
    font-style: normal;
}

Displaying Articles

The HTML code of the article should be accompanied by the connection of the script:

<link href="//go.verstka.org/critical.css" rel="stylesheet">

<script type = "text / javascript">
    window.onVMSAPIReady = function (api) {
        api.Article.enable ({
            display_mode: 'default'
        });
    };
</script>
<script src="//go.verstka.org/api.js" async type="text/javascript"></script>

Options `options`

All parameters are optional.

observe_selector - selector of element that can potentially change position of the article. For example, selector of a banner, that can push an article down.

Further parameters if it is impossible to type out a separate mobile version:

display_mode - switches between article display modes, please set default;

verstka/verstka.io