Embeds

There are two ways to embed content into your post:

  1. Embed link  –  all subscription plans,
  2. Embed code –  paid subscription plans.

 

Embed link:

Click inside a paragraph or grid column, then select </> from the right hand toolbar. Paste embed link here window will appear where you have clicked in the post. Paste the link and click the arrow to upload the content.

Note that videos will fit the whole container width.

 

 

Supported Embedding Services:

 

Embed code:

Pro and Enterprise plans support both embedding options. Embed code is an html or a javascript wrapping around a URL with changeable attributes.

Click inside a paragraph or grid column, then select </> from the vertical toolbar to the right. Paste embed link here window will appear where you have clicked in the post. Click {...} and paste your code into the grey window. Click render in the embed toolbar to see your content. Embed code can be found in the share options for Youtube and Vimeo videos.

 

 

What is render/unrender?

To see how content will appear in your post, click the embedded element to open the embed toolbar and click render. Click unrender to display the content in code/link form.

 

How do I make a full-width embed?

Click the embedded element to open the embed toolbar. Under "Responsive embed" option click off to display the embed in the size specified in the code. Click on to fit the embed into the width of the container.

 

 

How to add highlighted code block?

If you want to add a block of highlighted code, there are two ways to do so:

Option 1 - Insert a block as an embed from codepen.io

  1. Sign up on https://codepen.io/
  2. Create a new pen
  3. Press the "Save" button in the top right corner of the screen
  4. Press the "Embed" button in the bottom right corner and copy the code.
  5. Insert the code into embed in Setka Editor interface.

 

Option 2 - Use highlight.js - syntax highlighting for the Web tool.

  1. Download the library file by pressing the big grey button.
  2. Open highlight.js user guide and follow the instructions from "Getting started"
  3. Place this code into the <head> section of the page.
    <link rel="stylesheet" href="/path/to/styles/default.css">
    <script src="/path/to/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    Please keep in mind, that 

    /path/to/styles/default.css

    and

    /path/to/highlight.pack.js

    have to be valid paths to the latest library file version in your platform. If you don't know, how to upload this file to your CMS you can replace the path sections with direct links to public CDN. Here are some of those links.

  4. Place the code block, that you are highlighting into an embed. Make sure it is placed in tags, according to the instructions. Here is an example:
<pre><code class="html">...</code></pre>

 

How to add a form with a <form> tag?

If you add a form with a <form> tag inside its code you need to modify the code before you insert it via an embed. You need to modify it to the following format:

<div id="%%unique_form_placeholder_name%%"></div>
<script>
    var uniqueFormHtml = '%%FORM CODE%%';
    var uniquePlaceholderEl = document.getElementById('%%unique_form_placeholder_name%%');
    if (uniquePlaceholderEl) uniquePlaceholderEl.innerHTML = uniqueFormHtml;
</script>

Replace here %%unique_form_placeholder_name%% to the unique form ID.


%%FORM CODE%% — is the whole form code in a single line. For example,

<form action="/subscribe">
    <input type="text">
    <button type="submit">Subscribe</button>
</form>

needs to be transformed to:

<form action="/subscribe"><input type="text"><button type="submit"&g
t;Subscribe</button></form>