Google Docs

Page design, CMS content, and hosting all live in one place, but collaborative drafting and approval workflows happen outside the CMS. Teams that write in Google Docs still need a way to move approved content onto a Webflow site without manual copy-paste.

Connecting Google Docs with Webflow lets content teams write, review, and approve documents in Google Docs, then publish that content on Webflow pages. Documents can appear as live embeds that auto-update when the source changes, or you can push them into Webflow CMS Collections as native content that matches your site's design.

Marketing teams can publish blog posts from shared drafts, agencies can collect client content without granting CMS access, and documentation teams can maintain help centers from Google Docs source files. Any team that drafts collaboratively in Google Docs and publishes to a Webflow site benefits from a clear connection between the two.

How to integrate Google Docs with Webflow

What is Google Docs? Google Docs is an online document editor in the Google Workspace suite. It includes real-time co-editing, in-document comments, version history, and template-based document creation. You can publish documents to the web as embeddable iframes or access them programmatically through the Google Docs API.

Teams use Google Docs and Webflow together when content is authored collaboratively before it reaches a website. Writers draft in Google Docs for its commenting and review features, then move approved content to Webflow for publication. Choose a connection based on the outcome you need: a live document on the page, formatted content moved into CMS items, or an automated publishing workflow.

There are 4 approaches to a Google Docs-Webflow integration:

• Google Docs iframe embeds display live, read-only documents on Webflow pages without writing code.
• CMS-bound embed URLs let you manage multiple Google Doc embeds through CMS Collection items.
• Zapier supports automations such as New Document in Folder (Google Docs) → Create Item (Webflow) and New Form Submission (Webflow) → Create Document From Text (Google Docs).
• The Webflow and Google Docs APIs let you manage content sync, document generation, and publishing workflows through server-side development.

Most setups combine two or more of these methods, depending on complexity.

Embed Google Docs with Code Embed elements

Google Docs includes a "Publish to web" feature that generates an iframe you can paste into any webpage. The Code Embed element accepts this iframe code and renders the document directly on your published site. You don't need third-party tools or API setup. The embedded document auto-updates when someone edits the source Google Doc, with changes appearing within a few minutes. You can add a Code Embed element in projects with a paid Workspace or an active Site plan, and you need a paid site plan to publish this embed on a live site.

To set up the embed:

1. Open your Google Doc, click File > Share > Publish to web, select the Embed tab, then click Publish and copy the generated <iframe> code.
2. Open the Add panel and drag a Code Embed element onto your canvas.
3. Paste the <iframe> code into the code editor modal.
4. Click Save & Close, then publish your site.

The generated iframe code follows this structure:

<iframe src="https://docs.google.com/document/d/e/[DOC_ID]/pub?embedded=true"
  width="640"
  height="480">
</iframe>

Google's default iframe uses fixed pixel dimensions. For responsive layouts, replace the width value with 100% and adjust the height to fit your content:

<iframe
  src="https://docs.google.com/document/d/e/[DOC_ID]/pub?embedded=true"
  width="100%"
  height="1200"
  frameborder="0">
</iframe>

You can also wrap the iframe in a container div for more layout control:

<div style="position: relative; width: 100%; overflow: hidden;">
  <iframe
    src="https://docs.google.com/document/d/e/[DOC_ID]/pub?embedded=true"
    style="width: 100%; height: 1200px; border: none;"
    frameborder="0">
  </iframe>
</div>

Keep these limits in mind:

• Published Google Docs are publicly accessible. Don't embed documents containing sensitive information.
• You can't apply custom CSS to content inside the iframe. Browser cross-origin security prevents styling the embedded document. You can style the Code Embed wrapper element and its parent containers through the Style panel.
• Iframes render a live preview on the canvas, so you can verify placement before publishing.
• Content inside the iframe is served from docs.google.com, not your domain. Search engines won't index it as part of your site.

Google Workspace administrators can disable "Publish to web" for their organization, so confirm this feature is available on work or school accounts before building around it.

Make the embed responsive with Style panel controls

Appending height="100%" width="100%" to the iframe code lets you control the embed dimensions from the Style panel instead of editing the code directly.

To apply this:

1. Open the Code Embed element's code editor.
2. Change the iframe attributes to width="100%" height="100%".
3. Click Save & Close.
4. Select the Code Embed element on the canvas and use the Style panel to set width and height values.

Use this approach when the embed needs to match responsive breakpoints across devices.

Bind Google Docs URLs to CMS Collection items

If you need to display different Google Docs across multiple pages, storing embed URLs in CMS fields is easier to manage than placing individual Code Embed elements on each page. This method uses a Collection List or Collection page template to dynamically populate embed code from CMS data. Editors add or swap documents by updating a CMS field value, without touching page design or code.

To set up CMS-driven embeds:

1. Add a Plain Text field to your CMS Collection for storing the Google Doc embed URL (the src value from the iframe code).
2. Place a Code Embed element inside a Collection List or on a Collection page template.
3. In the Code Embed editor, write the iframe HTML and select the URL portion of the src attribute.
4. Click + Add Field in the upper-right corner of the editor and bind it to the CMS field containing the Google Doc URL.
5. Publish the site. Each Collection item renders its own embedded document.

This works well for document libraries, resource centers, and help pages where editors manage which documents appear on the site through the CMS. Embedded documents still auto-update when the source Google Doc changes. The same cross-origin styling limitations apply: you can't style content inside each iframe.

Connect with Zapier and other automation tools

Automation platforms connect Google Docs triggers to Webflow actions, and Webflow triggers to Google Docs actions. This is the most practical way to automate content workflows between the two platforms without writing code.

Zapier has the most complete support for this pairing, with 8 pre-built templates, 5 Webflow triggers, and 16 Google Docs actions. Common automations include:

• New Form Submission (Webflow) → Create Document (Google Docs)
• New Document in Folder (Google Docs) → Create Item (Webflow)
• New Document (Google Docs) → Create Live Item (Webflow)
• New Form Submission (Webflow) → Append Text to Document (Google Docs)

To set up a Zapier automation:

1. Sign in to Zapier and select a pre-built template or create a new Zap.
2. Connect your Google account and your Webflow site by authorizing both apps.
3. Configure the trigger (for example, select the Google Drive folder to monitor for New Document in Folder).
4. Map fields from the trigger to the action (for example, map the Google Doc title to the CMS item's name field).
5. Test the Zap and turn it on.

Zapier can detect new or updated documents and pass metadata like title, creation date, and file URL to CMS fields. It can't extract rich formatted content, such as headings, bold text, and bullet lists, from a Google Doc body into structured CMS fields. If the CMS needs formatted content, consider the API approach or a tool like Cloudpress that converts Google Docs formatting into CMS rich text.

Build with the Webflow and Google Docs APIs

If you need direct control over content sync, document generation, or conditional publishing, connect both platforms through custom server-side code. This approach covers use cases that no-code tools can't, including converting Google Docs structured content into CMS rich text, generating documents from CMS data with templates, and publishing CMS items based on approval status within a Google Doc.

Use these APIs:

• The Google Docs API v1 has three endpoints: read a document, create a document, and batch-update a document. All authentication uses OAuth 2.0.
• The Webflow Data API handles CMS collection and item operations, including creating draft items, publishing items, and bulk updates.
• Webhooks fire real-time notifications when CMS items are created, updated, or deleted.

Never expose API credentials in client-side code. Handle all authentication for both APIs on your server.

Sync a Google Doc to a Webflow CMS blog post

A middleware service can read a Google Doc and create a corresponding CMS item. This is the most common API use case for content publishing workflows.

To implement this:

1. Authenticate with Google OAuth 2.0 (using the documents.readonly scope) and generate a Webflow API token with CMS:write scope.
2. Fetch the document with GET https://docs.googleapis.com/v1/documents/{documentId}. Extract the title and body.content fields.
3. Parse body.content into HTML. The Google Docs API returns structured JSON, not HTML. You need to traverse body.content[].paragraph.elements[].textRun and apply heading styles from paragraph.paragraphStyle.namedStyleType to reconstruct semantic HTML.
4. Create a CMS item by calling POST /v2/collections/{collection_id}/items with isDraft: true and mapped fieldData:

{
  "isArchived": false,
  "isDraft": true,
  "fieldData": {
    "name": "Post Title from Google Doc",
    "slug": "post-title-from-google-doc",
    "rich-text": "<h3>Section Heading</h3><p>Body paragraph text...</p>"
  }
}

5. Store the Webflow item id alongside the Google documentId for future sync operations.

Slug values need to be unique within a Collection. Sanitize the document title into a URL-safe slug and verify it doesn't already exist before calling the create endpoint.

Generate Google Docs from Webflow CMS data

Reading CMS item data and creating a pre-populated Google Doc is also useful for review, legal approval, or archiving.

To implement this:

1. Fetch the CMS item with GET /v2/collections/{collection_id}/items/{item_id} and extract the relevant fieldData values.
2. Create a new Google Doc with POST https://docs.googleapis.com/v1/documents using the CMS item's name as the document title. The create endpoint only accepts the title field.
3. Populate the document body with a follow-up POST https://docs.googleapis.com/v1/documents/{documentId}:batchUpdate, passing InsertTextRequest and UpdateTextStyleRequest operations to add and format content.

Use this workflow when a CMS item needs an editable review document outside the CMS.

The batchUpdate endpoint applies all requests atomically. If any single request in the batch is invalid, Google rejects the entire batch.

Detect Google Doc changes with Drive API push notifications

The Google Docs API doesn't have a webhook system. To detect when a document changes, register a push notification channel through the Google Drive API.

To set up change detection:

1. Call POST /drive/v3/files/{fileId}/watch with a web_hook type and your HTTPS endpoint URL.
2. When the document changes, Google sends an HTTP POST to your endpoint with headers only (no JSON body). The header X-Goog-Resource-State: update combined with X-Goog-Changed: content signals that the document body has changed.
3. Your server then calls the Google Docs API to fetch the updated content and pushes changes to the CMS API.

Notification channels expire, so renew them before their expiration time. Your receiving endpoint needs a valid SSL certificate.

What you can build with the Google Docs Webflow integration

Integrating Google Docs with Webflow lets you publish collaborative content to a production website without manual reformatting or CMS training for writers.

• Blog publishing pipeline: Writers draft articles in Google Docs with comments and suggestions. Approved posts sync to CMS Collections through Zapier or a custom API service, where they appear as styled blog pages matching your site's design system.
• Client content collection for agencies: Agencies build Webflow sites while clients write page content in Google Docs. Automation pushes approved content into CMS items, so clients never interact with the CMS interface.
• Embedded document library: A resource center page displays multiple Google Docs through CMS-driven Code Embed elements. Editors add new documents by creating a CMS item and pasting the embed URL. Each document auto-updates when the source file changes.
• Form submission brief generation: A Webflow intake form collects project details from prospects. Zapier creates a new Google Doc in a team folder, pre-populated with submission data, giving the team an instant brief document for every inbound request.

If you need more direct control over content transformation, conditional publishing, or bi-directional sync, the API integration path covers those cases.