Webflow

Export custom HTML from Google Docs and Notion to Webflow

Introduction

When Cloudpress exports content to Webflow, it converts it to HTML. This works for most scenarios, but sometimes, you want to export custom HTML. For example, you may want to add custom HTML for a call to action at a certain point in your content,

Your first inclination may be to add the HTML to your source document and allow Cloudpress to export it to Webflow. However, this may not work as expected, as Cloudpress will encode the HTML when it exports the content. Let’s say you add the following HTML to your source document: When you export this to Webflow, you will see that it added the HTML source code instead of adding a red and a blue paragraph. To work around this problem, Cloudpress introduced a feature called Raw Content Blocks. When Cloudpress exports your content and encounters a Raw Content Block, it will send the content of that block to Webflow as-is.

The rest of this document will walk you through this feature by demonstrating how to use Raw Content Blocks in Google Docs and Notion to correctly export the HTML from the sample above.

A note about rendering custom HTML in the Webflow

The Webflow rich text will likely not render your custom HTML 100% correctly. You will need to publish your site and look at the results on the published site. Below is the published version. As you can see, the styles were correctly applied. Another important thing to note is that if you edit the rich text in Webflow after exporting it, you may lose some of your custom HTML elements, or the editor may mess it up completely. This is a known issue with the Webflow rich text editor and is outside our control.

Export custom HTML from Google Docs

To export custom HTML from a Google Doc, add a single-cell table to your document - in other words, a table with one row and one column. Give the table a dotted border by placing your cursor inside the table and selecting the dotted border from the Border dash toolbar item. Add your custom HTML inside the table. The screenshot below shows the sample HTML code added to the table. Next, you must configure Cloudpress to interpret the content of the table as raw content. The procedure differs depending on whether you use the Cloudpress Google Docs Add-on or the Export Content page.

Enabling raw content in the Google Docs Add-on

Open the settings for the Google Docs Add-on and enable the setting called Treat single-cell tables with a dotted border as raw content. After enabling the setting, click the Save button to save your settings. From now on, any document you export via the Google Docs Add-on will treat the content inside a single-cell table with a dotted border as raw content.

Enabling raw content in the Export Content page

If you use the Export Content page, you can enable the option to export raw content when you select the documents you want to export. Click on the Show Settings button. Enable the Treat single-cell tables with a dotted border as raw content setting. This setting does not persist, so you must enable it whenever you export content that includes raw content. After enabling the setting, you can proceed with exporting your document. Cloudpress will treat the content inside any single-cell table with a dotted border as raw content.

Tutorial video

The tutorial video below walks you through exporting custom HTML from Google Docs to Webflow.

Export custom HTML from Notion

Cloudpress uses Code blocks to denote raw content in Notion. However, code blocks are also used when you want to include code snippets in your content. For example, you may have a blog geared towards software developers and often include code snippets in your content. In this case, you can instruct Cloudpress to treat only code blocks in a specific language as raw content and all others as code blocks.

Enable raw content for your Notion connection

Go to the Connections page in Cloudpress and click on your Notion connection. Go to the Content Conversion tab.

  1. In the Raw content blocks section, enable the option to convert code blocks to raw content. With this enabled, Cloudpress will treat all code blocks as raw content.
  2. Next, limit raw content only to a specific language. As mentioned before, this is useful when using code blocks for code snippets. In the screenshot below, you can see that Cloudpress will only treat code blocks for HTML as raw content. All other code blocks will be exported as code blocks.

Click Save Changes to save your changes. Cloudpress will now treat code blocks for the specified language in all pages exported from this connection as raw content.

Add the custom HTML to your Notion page

Add a code block to your page. Add your custom HTML to the code block and set the language to the same language you configured in your connection settings. The screenshot below demonstrates a code block with the HTML code and the language set to HTML. You can now export the content to Webflow. If the code block's language matches your Notion connection configuration, Cloudpress will export the HTML code as raw content.

Tutorial video

The tutorial video below walks you through exporting custom HTML from Notion to Webflow.