Integrating with Webflow

Connecting RankPill to your Webflow site is the fastest way to turn AI-generated content into live, traffic-driving blog posts. The integration allows you to push fully formatted articles—complete with images, meta data, and proper structure—directly into your Webflow CMS. This eliminates the tedious work of copying and pasting, preventing typos and formatting errors while letting you schedule posts in advance or publish them instantly.

Before you begin, make sure you have:

• A Webflow site on a CMS or Business plan
• At least one CMS Collection created to house your blog posts
• Admin or Editor access to the Webflow site you wish to connect

Connecting Your Webflow Site

Navigate to Settings → Integrations in your RankPill dashboard and click Connect Webflow. You'll be prompted to log in to your Webflow account and authorize RankPill. Once authorized, select the Webflow site you want to connect. We recommend publishing a test article right after connecting to ensure everything is working correctly.

Field Mapping

The first time you publish to a new CMS Collection, you'll need to map your RankPill article fields to your Webflow CMS fields. This is a one-time setup per collection that tells RankPill where to put your content:

• Map RankPill's Title to your Webflow Title or Name field
• Map the Article Body to a Rich Text field
• Connect the Featured Image to an Image field
• Link the Meta Description to a Plain Text field (often your SEO meta description field)
• Map the Slug to your Webflow Slug field

Once mapping is complete, publishing is just a few clicks away. From the RankPill editor, click Publish, select Webflow, and choose your target CMS Collection. You can then choose to publish immediately or schedule the post for later. RankPill takes care of the rest, automatically handling all the formatting, media, and SEO details.

Updating Published Articles

After publishing an article to Webflow, you can update it directly from RankPill. Simply make your changes in the RankPill editor and click the “Update Article” button. Your changes will be pushed to your Webflow CMS automatically.

Fixing Table Styling Issues

If your published articles contain tables that appear broken or unstyled (displaying as plain text without borders or formatting), this is because your Webflow site is missing default table styling. To fix this, add the following CSS code to your blog page's custom code section:

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

To add this code in Webflow, navigate to your blog page (or blog post template), open the Page Settings, and paste the CSS code into the Custom Code section within <style> tags. This will ensure all tables in your articles display properly with borders, padding, and consistent formatting.

Troubleshooting

Common issues and how to fix them

Frequently Asked Questions

Quick answers about this integration