# Setka Editor and HubSpot Landing Pages

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

{% hint style="info" %}
Read more about modules in [HubSpot Knowledge Base](https://knowledge.hubspot.com/cos-general/create-and-edit-modules).
{% endhint %}

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](https://setka.gitbook.io/help-center/content-cloud#how-to-export-a-posts-html-code).

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

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn8Oysw3FjMy4YeqPn%2FScreenshot-Hubspot-Interface-Marketing-Menu.png?alt=media\&token=e43444b2-a6f8-438e-97df-52631eea0661)

Follow these steps to create the embed module:

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

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn8od34ZneTHkwBaSo%2FScreenshot-Hubspot-Interface-Design-Manager.png?alt=media\&token=212b058b-dfce-4ab9-85a3-7b9910b6a12f)

Select **Module** from the dropdown list and click **Next**:

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn8xEcmYIbJ428Kuup%2FScreenshot-Hubspot-Interface-Design-Manager-New-File.png?alt=media\&token=3c35b6ba-1588-4379-aa8c-18688f46352d)

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.

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn93vLM9Hwnb4R16Q3%2FScreenshot-Hubspot-Interface-Design-Manager-Module-Setup.png?alt=media\&token=1c54fb30-3583-4a44-b1fb-d1c97c294be2)

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

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn9H4ssuKT8aqXcjFs%2FScreenshot-Hubspot-Interface-Design-Manager-Module-Embed.png?alt=media\&token=3679bd28-8c95-4da0-92d8-c63b3456a6a0)

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

```markup
<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>
```

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn9RVTNo0pdLtSvH7V%2FScreenshot-Hubspot-Interface-Embed-Content-Options.png?alt=media\&token=4bb0b59d-7efb-4d6a-8e10-6fddcfff3d19)

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

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn9Zr4w-oLLvWgkyNO%2FScreenshot-Hubspot-Interface-Module-Editor-Options.png?alt=media\&token=43ad2ac1-e293-4200-85b5-9e0fa6e419af)

### Compose `module.html`

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

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn9l6B1y-Kua5Ya77q%2FScreenshot-Hubspot-Interface-Module-HubL-Name.png?alt=media\&token=665cc29d-78df-4746-917f-51d92543e12a)

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:

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSn9xcPZZXBRw72HMIE%2FScreenshot-Hubspot-Interface-Module-HTML.png?alt=media\&token=dc875062-d6e3-4fe0-aec0-696ff1a68e6b)

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:

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSnA6Tv_n1LAqAj0Kzb%2FScreenshot-Hubspot-Interface-Menu-Landing-Pages.png?alt=media\&token=e3d6dee9-742f-4a5f-a8cd-426a73a2a427)

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:

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSnAGJrvl8idcUreU1V%2FScreenshot-Hubspot-Interface-Module-Drag-and-Drop.png?alt=media\&token=43262b13-11db-4c70-921b-c237ce5ad764)

As Setka Editor content is added on the landing page as an embed, you will need to [export](https://setka.gitbook.io/help-center/integrations/content-cloud#how-to-export-a-posts-html-code) your post's HTML code from [Content Cloud](https://setka.gitbook.io/help-center/integrations/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:

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSnAMggcagVwX6-foaZ%2FScreenshot-Hubspot-Interface-Module-Edit.png?alt=media\&token=a9186870-5091-4f69-b951-128292b5629c)

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:

![](https://1843290185-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MLOEPbfEK4119w2ROYc%2F-MSmsTad8HrnMM7VDMZc%2F-MSnASdiQGWiVfnCXr6a%2FScreenshot-Hubspot-Interface-Module-Replace-Code.png?alt=media\&token=fb9eec63-817e-4489-98c9-32cdd7b511d9)

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