Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • Step 1: Connect your Setka Editor and HubSpot accounts
  • Step 2: Create a post in Setka Editor Design Cloud and export it to HubSpot
  • Step 3. Update your post content
  • Insert CTA-buttons and forms
  • Compatibility with "1 Blog Post - Launch on Liftoff" blog template

Was this helpful?

  1. Integrations
  2. Setka and HubSpot

Setka Editor and HubSpot Blogs

How to setup Setka Editor integration for HubSpot blogs.

PreviousSetka and HubSpotNextSetka Editor and HubSpot Landing Pages

Last updated 4 years ago

Was this helpful?

To connect Setka Editor and HubSpot accounts you need to create a .

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.

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).

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.

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

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.

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

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.

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.

  • Insert the export form code into the embed field in Setka Editor:

Setka Editor HubSpot integration is available for the paid plans only.

Compatibility with "1 Blog Post - Launch on Liftoff" blog template

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

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 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:

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 and then export them to HubSpot.

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 :

Setka Account
Setka Account
Get the export form code
style custom CSS
Setka Account
Screenshot of Setka Editor Interface: "Connect with HubSpot" button
Screenshot of Setka Editor interface: "Export" button on a post badge
Screenshot of Setka Editor Interface: "Export to HubSpot" Button
Screenshot of Setka Editor Interface: "Update Post" Button
Screenshot of HubSpot interface: "Insert" dropdown menu with "Call to action" option highlighted
Screenshot of Setka Editor Interface:"Add Embed" Button