Export custom HTML from Google Docs and Notion to Webflow
Learn how you can 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.
Please note that the rich text editor in the Webflow designer 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.
As an example, here is custom HTML expored by Cloudpress in the Webflow designer.
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
Add table with raw content
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.
Enable raw content during export
You must tell Cloudpress to interpret the table you added as raw content during export. This procedure is different, depending on whether you are exporing content with the Google Docs Add-on or the Export Content page.
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.
- 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.
- 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.