How to connect Letterdrop to Webflow
How to connect Webflow to 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 |
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 likeacme.com/blog/industry-trends-for-q3
, enteracme.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.