Connect Webflow
Connect a Webflow site to SerpPal with a site API token, pick the CMS collection for your posts, and learn how the article, image and summary fields are found.
SerpPal publishes to Webflow as items in a CMS collection, such as the "Blog Posts" collection most blog templates have. The article goes into the collection's rich text field, and the item is published to your live site.
Before you start
- Your site needs a CMS collection for posts with at least one Rich text field. Most blog templates have one. To make one, open the Webflow Designer, go to the CMS panel and create a collection (for example "Blog Posts").
- Publish the whole site once in Webflow before you publish items from SerpPal. Webflow only publishes single items on a site that has already been published.
Step 1: Make a site API token in Webflow
- In Webflow, open the site's Site settings.
- Go to Apps & integrations, then scroll to API access.
- Click Generate API token and give it a name, for example
SerpPal. - Set the access for each API:
- CMS: read and write.
- Sites: read-only.
- Everything else can stay at no access.
- Click Generate token and copy the token. Webflow shows it only once.
A site token works for that one site. Webflow turns off tokens that have not been used for 365 days. If that happens, make a new one and paste it into the connection.
Step 2: Connect it in SerpPal
- Open your project, click Project settings, and under Publishing click Connect a site.
- Choose Webflow, paste the token into API token and click Connect.
- SerpPal lists the site's collections as "Site / Collection". If there is more than one, pick the one for your posts under Collection and click Save and test.
The other fields are optional. Leave them empty unless SerpPal picks the wrong fields:
| Field | What it does |
|---|---|
| Collection | The CMS collection the posts go to. |
| Article field | The slug of the Rich text field for the article, for example post-body. Empty: the collection's first Rich text field. |
| Featured image field | The slug of the Image field for the featured image, for example main-image. Empty: the first Image field. |
| Summary field | The slug of a Plain text field for the excerpt, for example post-summary. Empty: a Plain text field whose name contains "summary", "excerpt" or "description". |
How collection fields are found
Every time it publishes, SerpPal reads the collection's fields from Webflow:
- The post title goes into the collection's Name field, and the slug into its Slug field.
- The article goes into the field named in Article field, or else the first Rich text field.
- The featured image goes into the field named in Featured image field, or else the first Image field. If there is no Image field, the featured image is skipped.
- The excerpt goes into the field named in Summary field, or else a Plain text field with "summary", "excerpt" or "description" in its name or slug. If there is none, the excerpt is skipped.
To find a field's slug, open the collection's settings in the Designer's CMS panel and click the field. The slug is shown under its name.
Tags and categories are not sent to Webflow, because collections store them in different ways (reference fields, option fields and so on).
What SerpPal sends to Webflow
- Live post: the item is saved and then published to your live site. SerpPal shows its address,
https://<your domain>/<collection slug>/<item slug>. - Draft to review: the item is saved as a draft in the collection and not published.
- Slug: Webflow slugs can only have lowercase letters, numbers and hyphens, so SerpPal converts yours. If you leave the slug empty, it is made from the title.
- Images in the article and the featured image: Webflow copies them from SerpPal into its own asset storage.
- Uploaded video files: Webflow's rich text can't hold video files, so an uploaded video becomes a link to the video. YouTube and Vimeo links are sent as players, but Webflow may remove players it doesn't support from rich text. For video, a YouTube or Vimeo link or a separate video field in your template usually works best.
Publishing the same article again updates the same item. If it was deleted in Webflow, a new one is made.
Troubleshooting
"Webflow: the token is missing the ... permission..." Make a new token with CMS read and write and Sites read access, then click the pencil on the connection, paste it and click Save and test.
"Webflow: the API token was not accepted..." The token was deleted, expired or mistyped. Make a new one under Site settings, Apps & integrations, API access.
"Webflow: this token cannot see any site..." Make the token in the site's own settings, not in your workspace settings.
"Webflow: the site has no CMS collections..." or "...this collection has no Rich text field for the article..." Add a collection, or a Rich text field to it, in the Designer's CMS panel, then click Test.
"Webflow: the collection has no field called ..." A field slug in the connection is wrong. Check the slug in the Designer, or clear the field to let SerpPal find it.
"Webflow did not accept the item: ..." The collection has a required field SerpPal doesn't fill (for example an author reference or a category). Make that field optional in the Designer, or give it a default.
"Webflow saved the item but did not publish it: ..." The item is in your collection, but publishing it failed. If the message mentions domains published at different times, publish the whole site once in Webflow. Then click Try again on the post: SerpPal updates that same item and publishes it, without making a copy.
"Webflow: too many requests right now..." Webflow limits how many API calls a site can make per minute. SerpPal tries again by itself a few minutes later.
More fixes are in Publishing troubleshooting.