Setka Editor and HubSpot Landing Pages

How to add Setka Editor content to landing pages in HubSpot.

Setka Editor content can be added onto a HubSpot landing page as an embed. Thus, the embed module is needed.

Read more about modules in HubSpot Knowledge Base.

After creating the module, you will be able to add it to a landing page and partly replace the module with the Setka post HTML. The post's HTML code should be exported from the Content Cloud.

Step 1. Create a new module for HubSpot COS

To create a new module, select Marketing on the HubSpot upper menu. Then go to Files and Templates > Design Tools:

Follow these steps to create the embed module:

Go to File > New file on the left-hand panel:

Select Module from the dropdown list and click Next:

Set up your module:

• Check Pages for Where where would you like to use this module?

• Set Local module as a Module content scope.

• Set any desirable file name. E.g., "Setka Embed Module."

• Select file location at your discretion.

Step 2. Configure your module

After saving the module file, the configuration screen will open. Since you are creating the embed module, the Embed field is needed. To add it, click Add field on the right-hand panel and select Embed:

Set content options

Go to the Content options block in the right-hand panel and set the Supported source types option to Embed code only.

Paste this code into the Embed code field:

<div style="background: #f1f1f1; display: flex; align-items: center; justify-content: center; height: 100px;">
Replace this code with your Setka Post code in the ‘Embed code’ field
</div>

Set editor options

Move to Editor options block and activate the Make this field required switch.

Add some explanatory text into the Inline help text field, if needed. E.g.:

Replace the code below with your Setka post code. You can get the code by clicking ‘Export → Copy HTML to clipboard’ from the post badge in your Setka Account.

This text will help HubSpot COS users if they use your module on landing pages.

Compose module.html

Scroll the right-hand panel up to the top and find the HubL variable name field. Click Copy > Copy value only:

Paste the copied value to the module.html (HTML+HubL) field in the center. Add .embed.html in the end, as it is shown on the screenshot below:

Click Publish changes to save your newly configured module.

Step 3. Use the embed module on a HubSpot landing page

Go to Marketing > Website > Landing Pages in the upper menu:

Select the page from the list, or create a new one via Create > Landing page menu in the top right corner. The page editor will open.

Find your module in the left-hand menu. Use the search bar if there are many modules in the list. Drag the module and place it on the page:

As Setka Editor content is added on the landing page as an embed, you will need to export your post's HTML code from Content Cloud and copy it to the clipboard.

After the post HTML is copied, go back to HubSpot and click Edit module on the embed module you just added:

Delete the code from the Embed code field on the left-hand panel. Paste the post's HTML code exported from Content Cloud instead. Landing page content will update immediately:

This way, you can use any Setka post as a landing page content.