Published
May 25, 2023
Updated
May 25, 2023
What if you want to directly embed content from a Google doc directly into your Webflow-hosted site for full SEO advantage, and retain the Google docs formatting?
We have some creative solutions for you.
The advantages of embedding Google Doc content directly into your site includes the ability to display HTML content and formatting that Webflow does not natively support in rich text elements;
- Arbitrary color changes
- Font family changes
- Text size changes
- Tables
Static embeds
- Export the Google document as HTML
- From it, grab the entire <style> chunk and paste it into an HTML embed
- Do the same for the entire <body> element, however change the element type from <body> to <div> while retaining its classes.
This will render exactly the way it does in the doc.
This can work with CMS content as well, just create a rich text field, and use HTML embeds within it.
Crucial limitations
- Google docs has its own margins and responsive approach, you'll be inheriting that
- Updating the content requires you to redo this process
- A few of Google's classes have generic names like title which may conflict with classes in your project. Most are named things like c1
- Very good chance your body to too long to fit in a single embed, which means some creative splicing.
Dynamic embeds
If you need to automate this process, or you need your page to automatically update whenever the Google Doc is changed, that's possible too.
Sygnal has a special service we call Hyperflow that can automatically integrate your Google doc content into your live, Webflow-hosted site.
Advantages-
- Fully automated. You and others who you grant editor access to the document can update that content anytime, and the changes will immediately reflect in your website.
- Caching, for performance
- Isolates the Google Doc's CSS so that it does not impact other areas of your page design.
- Full CMS integration- just pop in a Google Doc ID and you're all set.
Contact us for details on the Hyperflow for Google Docs service page.
