---
description: How to setup Setka Editor integration for HubSpot blogs.
---

# Setka Editor and HubSpot Blogs

To connect Setka Editor and HubSpot accounts you need to create a [Setka Account](https://editor-help.setka.io/hc/en-us/articles/213106789-Creating-Setka-Editor-account).

## Step 1: Connect your Setka Editor and HubSpot accounts

In your Setka Account on the **Integrations** page, you will see the **Connect with Hubspot** button.&#x20;

{% hint style="info" %}
**Please note that:**

* Only users with super admin permissions in HubSpot can connect Setka Editor and HubSpot accounts (as far as this requires the permission to connect apps);
* Your HubSpot pricing plan should include Blog & Content creation tools;
* Setka Editor app requires HubSpot integration permissions for your user account information, ability to modify your blog content, and access to Files API (to be able to store your styles locally in the future. Now Setka Editor posts styles are availably only from Setka Editor CDN).
{% endhint %}

![Screenshot of Setka Editor Interface: "Connect with HubSpot" button](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MRCY2Z7z2PkakSKrhAo%2F-MRCYXFOt1UNylYkO18z%2FScreenshot-Setka-Editor-Interface-Connect-to-Hubspot-button.png?alt=media\&token=617e36de-01b5-44e0-87e9-caba134b858c)

## Step 2: Create a post in Setka Editor Design Cloud and export it to HubSpot

On your Design Cloud Posts page, you can see the **Export** button on the post badge.&#x20;

![Screenshot of Setka Editor interface: "Export" button on a post badge](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MRCY2Z7z2PkakSKrhAo%2F-MRCYvRAeiwZS_1Xeo30%2FScreenshot-Setka-Interface-Export-button.png?alt=media\&token=411b9beb-6785-4910-a0b2-c99c1fdc5014)

After you click it, a popup opens, you could see the **Export to HubSpot** button there:

![Screenshot of Setka Editor Interface: "Export to HubSpot" Button](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MRCY2Z7z2PkakSKrhAo%2F-MRCZN-3sebzEXKL3fcT%2FScreenshot-of-Setka-Editor-Interface-Export-to-HubSpot-Button.png?alt=media\&token=eca839ed-338c-4315-8b2e-5262f6e12321)

Click on it and select which blog you would like to send your post to. If you have only one HubSpot blog, the export process will start at once, with no need in selecting the blog. After the export process is finished, you will be notified and get the link to the newly created blog post in HubSpot.&#x20;

Setka Editor creates a draft post in HubSpot and only post title and content will be filled. You need to fill in the additional HubSpot fields (such as post author) before publishing the post.

## Step 3. Update your post content

Setka Editor styles are applied only on the HubSpot post view page, they are not applied on the HubSpot post editing page. That is why you could see the content without decoration on the post editing page and should not edit it as far as you can break its' styles. To make some changes in the post content or design, you need to go to your post in [Setka Account](https://editor-help.setka.io/hc/en-us/articles/editor.setka.io) and make the changes there. After everything is ready you will be able to update the content in HubSpot — you need to click **Update post**:&#x20;

![Screenshot of Setka Editor Interface: "Update Post" Button](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MRCY2Z7z2PkakSKrhAo%2F-MRCZyDufAJnl31UIivI%2FScreenshot-Setka-Editor-Interface-Update-Post-Button.png?alt=media\&token=0bceebc1-0c7d-4f26-bab8-03f240f0d5dd)

When you update content from Setka Editor all the content will be replaced by the new one from Setka Editor. So it's very important to make all the changes in [Setka Account](https://editor-help.setka.io/hc/en-us/articles/editor.setka.io) and then export them to HubSpot.&#x20;

## Insert CTA-buttons and forms

You can insert HubSpot CTA-button natively, into the post exported from Setka Editor. Please go to the post-editing mode in HubSpot, put the cursor in the place where you would like to insert the button. Then select **Insert > Call-to-action**.

![Screenshot of HubSpot interface: "Insert" dropdown menu with "Call to action" option highlighted](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MRCY2Z7z2PkakSKrhAo%2F-MRC_RwxSYWGVAaadxMG%2FScreenshot-of-Hubspot-interface-Insert-call-to-action.png?alt=media\&token=5603fa3b-fe7c-40b6-b9c7-84b85283ce7c)

Choose one of your HubSpot buttons that you would like to see inside the post.

Nowadays HubSpot doesn't have a native way to insert the form in its editing mode. That is why you need to insert the HubSpot form in Setka Editor and then export the post to HubSpot.

* [Get the export form code](https://knowledge.hubspot.com/articles/kcs_article/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#add-the-form-embed-code)
* Insert the export form code into the embed field in Setka Editor:

![Screenshot of Setka Editor Interface:"Add Embed" Button](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MRCY2Z7z2PkakSKrhAo%2F-MRCa7OzxaijNK1cWmpz%2FScreenshot-of-Setka-Editor-Interface-Add-Embed-Button.png?alt=media\&token=d171531b-07de-4701-94a6-ee9dd7a786ac)

{% hint style="info" %}
Setka Editor HubSpot integration is available for the paid plans only.
{% endhint %}

## Compatibility with "1 Blog Post - Launch on Liftoff" blog template <a href="#id-1-blog-post-launch-on-liftoff" id="id-1-blog-post-launch-on-liftoff"></a>

In order to get the right size of the images inserted inside the post created in this blog template, please add the following code into your [style custom CSS](https://editor-help.setka.io/hc/en-us/articles/213108629-Creating-and-editing-post-styles#custom-css):

```css
.stk-icon { height: 1em !important; }
```
