Embeds

How to embed some elements from external sites into your content (videos, Twitter quotes, Instagram photos, etc.)

Inserting embeds

To add an embed, click Add embed on the Side Toolbar.

The code form will appear in the post. You can paste either HTML code or a link there.

To see how this embed will look in the post, click Render on the Upper Toolbar. To get back to editing, click Edit in the top right corner of the embed.

Video tutorial on how to add a video embed in Setka Editor

Please watch this short video to learn all about embeds in Setka Editor:

Video tutorial on how to add and edit embeds in Setka Editor

As a link

Copy the link you want to use in the embed (YouTube video, Instagram post, or another external resource). Add an embed to a post via the Add embed button on the Side Toolbar. Paste the copied link into the corresponding text field.

The embed will automatically render and occupy the post's entire width or the column allocated to it.

List of supported services:

• For Setka Editor WordPress plugin
• For Setka Design Cloud and other integrations

As an HTML code

Copy embed HTML code from an external site. Add an embed via the Add embed button in the right-hand panel. Paste the copied code into the corresponding text field.

This code may contain attributes, such as width, height, opacity, etc. You can change parameters at your discretion.

Inserting embeds via HTML codes is not available in the free version of Setka Editor.

Quick add

If you need to add an embed above or below the grid, the Quick add menu can be used. To open it, hover the mouse above the grid and click the + button. The purple line above or below the grid will demonstrate where the embed would be placed. If the nested grid is selected, the embed can also be placed above or below the outer grid:

Adding an embed via Quick add menu

Making Embeds Responsive

By default, most embeds automatically adapt to the area allocated to them: post or column width. Sometimes you may need to display an embed in its original size, with no stretch or squeeze. To disable Setka Editor's adaptivity algorithms:

1. Switch to the Embed tab on the Upper Toolbar

2. Open the additional settings menu (▼ button).

3. Select off in the Responsive embed dropdown:

4. The embed will take the dimensions set in its code.

Screenshot of of Responsive embed option turned off to disable embed adaptivity in Setka Editor

Some useful embeds

Code snippets

There are several ways to add a code block to your post:

Code highlighting services

E.g. PineTools:

1. Select the Syntax highlighter tool and paste the code into the Unhighlighted code field.
2. Select highlight options in the Options -> Language -> Select one menu or leave as auto (Autodetect).

3. Click Highlight.

4. Paste the highlighted code into an embed in the Setka Editor.

CodePen embeds

1. Register on CodePen.
2. Click Start Coding to create a new Pen.

3. To save changes, click the Save button in the bottom right corner.

4. Click Embed in the bottom right corner and copy the code.

5. Paste the code into an embed in the Setka Editor.

Highlighting syntax with highlight.js

1. Download the library from the project site. Place the file on your server.

2. Open the highlight.js guide and follow instructions from the Getting started section.

3. Place the code from below into of your site's page:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js">script>
<script>hljs.initHighlightingOnLoad();script>

Note that /path/to/styles/default.css and /path/to/highlight.min.js must be valid paths to a file downloaded in p. 1. If you will have any issues with placing the file via CMS, replace the paths to direct links on public CDNs.

4. Place the code block that you want to highlight, into an embed. Before that, you need to escape the characters of the code itself. E.g., via HTML Entities Encoder / Decoder. Make sure that your code is wrapped into corresponding tags:

<pre><code class="html">...</code></pre>

Custom forms

To add a form with a tag in the code, modify the embed code, and paste it in this 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 %%unique_form_placeholder_name%%in the template into this form's unique ID.

%%FORM CODE%%is the whole form code in one row. E.g. transform

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

into:

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

Marketo forms

Marketo can generate embed codes for forms located on your account. Please follow the platform documentation to get the initial embed code. The code should be modified to fit the Setka standards.

The initial code will follow this template:

<script src="//app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_123"></form>
<script>
MktoForms2.loadForm("//app-xyz.marketo.com", "718-GIV-198", 123);
</script>

To make it work with Setka posts, specify protocols for links (HTTP or HTTPS) in the strict form:

<!-- Add 'https:' to the beginning of the script source link -->
<script src="https://app-xyz.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_123"></form>
<script>
// Add 'https:' to the beginning of the form source link:
MktoForms2.loadForm("https://app-xyz.marketo.com", "718-GIV-198", 123);
</script>

The modified embed code can be then placed in the post.

Known issues

Facebook embeds on mobile

Embeds of some services may be displayed incorrectly. This is due to the fact that an independent document with predefined attribute values is placed inside the container.

If Responsive embed is set to on, its' content is cut at one side, to keep proportions. When stretching the embed to the width of the screen, check how the content of the mobile version will look, using the preview button on the right-hand panel.

Videos on mobile

Videos with Responsive embed turned off would not adapt to screen width on mobile. To allow shrinking or stretching to width, turn Embed > Responsive embed to on.

Instagram embeds

Sometimes Instagram provides embed codes with irregular proportions and an overly large block of comments. It happens when inserting embeds via either a link or an HTML code. To return the block to the proper proportions:

1. Insert Instagram embed via HTML code. Inserting it as a link would not work in this method.

2. Add another embed with this HTML code anywhere in the post:

<style>iframe.instagram-media { position: relative !important; }</style>

This code will fix the proportions of all Instagram embeds in the post. You need to add it once. Despite the fact that the embed is visible in the editor, the reader will not see it in the final version of the post.

Important note: make sure the bottom indent is disabled for the above embed.