How to connect Letterdrop to Webflow – Letterdrop

Who this guide is for

✅ You are on a paid plan on Letterdrop and looking to connect Webflow.

❌ You are on a a free trial on Letterdrop, which doesn’t include support with connecting Webflow.

What you will accomplish

In this guide, we’ll walk you through how to set up your Webflow CMS collections with Letterdrop. We’ll go through:

Checking your field types for mapping

How to connect Webflow

Running a publishing test

Housekeeping: field editing and running imports

Step 1: Make note of your fields in Webflow

Go to Webflow, open up your site in the Designer view and navigate to the CMS collection you want to connect, like Blogs or Case Studies.

Note down the fields you need to sync with Letterdrop. You can wing it, or you can follow this recommended flow:

Open a Google or Excel sheet with the columns, “Field Name”, “Field Type” and, “Custom field”

For each field you will need to map from Webflow to Letterdrop, note them down in “Field Name” and “Field Type”

Depending on the fields you have in Webflow, field types can include: Number, Text, URL, Boolean, Date, Multi-Select, Single-Select, Rich Text, Image.

You can ignore any fields that are deprecated or not used.

Letterdrop already has common fields natively built in, listed below. For any fields you’ve noted that are not listed below, mark an “X” in the “Custom field” column.

These are fields you’ll need to set up in Letterdrop in Step 3 in order to map your fields correctly.

Field	Type	Field that typically maps to in Webflow
Title	Plain Text	Name or Title
Slug	Plain Text	Slur or URL
Author	Plain Text or Reference	Author. Note that if you use the native “Author” field, it will only pull from the users you have in Letterdrop.
Subtitle	Plain Text
Meta Title	Plain Text
Meta Description	Plain Text
Read Time	Number of Plain Text
Body	Rich Text	Body
Category	Reference or Multi-Reference	Category or Tags
Thumbnail	Image	Thumbnail or Preview Image
Feature or Cover Image	Image	This might be called Main Image, Feature Image, Cover Image
Featured	Boolean

💡

Remember: If your Authors are housed as a separate collection, you’ll need to create a custom field for this later (typically single select or multi-select). Mark Author with an “X” under “Custom Field.”

Step 2: Connect Webflow

Go to Settings → Integrations → scroll down to Webflow and click Connect.

If you already have an account connected, it will show you the connected CMS collections and you can add a new one by clicking Add new account

You will be taken to Webflow to login and select the site you want to connect. You’ll then be redirected back to Letterdrop to complete the mappings.

Select the right site if you connected multiple in the previous step. Hit Next.

Select the right CMS collection. Hit Next.

Start by mapping all of the common fields that are already native to Letterdrop.

Referring to the sheet you set up in Step 1, any fields that don’t have an X under “Custom Field” should already exist: you can map them by clicking on the dropdown.

Next, map any custom fields that do not already exist in Letterdrop, or don’t map 1:1.

Letterdrop will suggest custom fields for you- you can click on “Create” if it aligns with the field type you need.

If the field type doesn’t align with what you have (say it is recommending a Single Select for Author but you need Multi Select) OR you want to mark a field as required OR enter a default value, you can click on the link in “Map to Webflow here.”

This will bring you to the "Custom Fields" settings for your blogs, where you can add new fields, and specify any required fields and default values.

Once you’ve updated your fields, you can return to your Webflow setup tab, click “Refresh fields,” then map the remaining custom fields.

Set the URL to the home page of your CMS collection - usually something like /blog, /guides, /resources, /library, /changelogs etc. as well as the path to an individual page of CMS collection item/blog post. For example, if your blog page looks like acme.com/blog/industry-trends-for-q3, enter acme.com/blog.

Finally, you can optionally choose whether you want to import posts from Webflow to Letterdrop or vice versa.

Step 3: Running a publishing test 🎉

Congratulations! Now that your integration is set up, you can run a test publish by going to “Website” in the left panel -> “Posts.” From here, you can either duplicate an existing post or write a new post.

You can enter text, images, videos, and even HTML embeds in the blog text. Then click on the "Next: metadata and scheduling" button in the top-right. Make edits to your meta data fields. If you’ve set up any custom fields, they should show up here too. Click “Preview post” to preview it would look like, then hit “Publish” once you’re ready.

The blog will be published after after a couple of seconds. You can open Webflow to make sure that the metadata is showing up correctly. If any of the fields aren’t showing up correctly, this can be easily fixed in the next step- just make note of them! Once you’re ready, you can go back to the “Posts” section of Letterdrop then unpublish or delete the article you just published (this will happen in Webflow too).

Step 4: Housekeeping

Creating or editing custom fields

You can create or edit any existing custom fields by going to Settings -> Blog -> Custom Fields.

If you create any new fields, or edit the blog destination for any given field, you should remap your Webflow fields by going to Settings -> Integrations -> Webflow Connected Collections.

Running an import

If you've changed any of your existing fields, or mapped new ones, you'll need to run a re-import for our system to search and map these fields. You can do this by going to Settings -> Integrations -> Webflow Connected Collections, then clicking “Import.”

FAQ

The authors are incorrectly listed. What’s going on?

If you used the native Author field in the mapping process, it’s likely that your Webflow instance uses a single select or multiple select field instead. You can easily tell that a native Author field has been used if the Author selection is visible from the blog editor.

You should create a new custom field for “Author” in Settings → Blog → Custom fields, remap it from Settings → Integrations → Webflow Connected Collections, then run an import. Go to “Next: metadata and scheduling” for any article and you should see the authors correctly populated here.

Why are my custom code embeds not showing up?

Need to write- explain why- say CSM can connect with them on import needs. Link to separate article explaining how to set up code blocks for writers to use without touching code.