Webflow Integration

Connect Lovarank to your Webflow site and publish articles directly to your CMS with full formatting, images, and SEO metadata.

What You'll Need

• A Webflow site on a CMS or Business plan
• A CMS Collection for blog posts
• Admin or Editor access to your Webflow site

Setting Up the Integration

Step 1: Add Webflow Integration

1. Navigate to Integrations in the Lovarank sidebar
2. Click Create Integration
3. Select Webflow from the options

Step 2: Authorize Access

1. You'll be redirected to Webflow
2. Log in if prompted
3. Select the Webflow site you want to connect
4. Click Authorize to grant Lovarank access

Step 3: Select Your Collection

1. Choose the CMS Collection where articles should publish
2. This is typically your "Blog Posts" or "Articles" collection

Step 4: Map Fields

Configure how Lovarank fields map to your Webflow CMS:

Save your field mapping. This configuration is remembered for future publications.

Publishing to Webflow

Once connected:

1. Open any generated article in Lovarank
2. Scroll to the Integrations section
3. Find your Webflow integration
4. Click Publish

Your article is added to your CMS Collection as either:

• A draft item (if you want to review in Webflow first)
• A staged item (ready to publish with your next site update)

Publishing Your Webflow Site

After publishing from Lovarank, you may need to publish your Webflow site for changes to appear:

1. Open your Webflow site
2. Click Publish in the top right
3. Select your domain(s)
4. Click Publish to Selected Domains

Some Webflow plans support auto-publishing.

Updating Published Articles

To update a live article:

1. Edit the article in Lovarank
2. Save your changes
3. Click Republish on the Webflow integration
4. Republish your Webflow site

Lovarank finds and updates the existing CMS item.

Table Styling

If tables in your articles appear unstyled, add this CSS to your Webflow site:

.w-richtext table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
}

.w-richtext th,
.w-richtext td {
  border: 1px solid #e2e8f0;
  padding: 0.75em 1em;
  text-align: left;
}

.w-richtext th {
  background-color: #f7fafc;
  font-weight: 600;
}

.w-richtext tr:nth-child(even) {
  background-color: #f7fafc;
}

To add this CSS:

1. Navigate to your blog page or blog post template
2. Open Page Settings
3. Add the CSS within <style> tags in the Custom Code section

Troubleshooting

Authorization Failed

• Verify you have Admin or Editor access to the Webflow site
• Check that your site is on a CMS or Business plan
• Try disconnecting and reconnecting

Publishing Failed

• Ensure your CMS Collection has a Rich Text field for content
• Verify all field mappings are correct
• Check you haven't exceeded your CMS item limit

Images Not Displaying

• Confirm your field mapping includes the image field
• Verify the image field type is "Image" in Webflow
• Check your Webflow plan's asset storage limits

Content Formatting Issues

• Ensure you're mapping to a Rich Text field (not Plain Text)
• Check your Webflow template's styling for blog content
• Add table CSS if tables appear broken

Frequently Asked Questions

Can I publish to multiple Webflow sites? Create a separate integration for each Webflow site you want to connect.

Does this count against my CMS item limit? Yes. Each published article creates one CMS item in your collection.

Can I schedule posts? Yes. Choose a future publish date when publishing from Lovarank.

What if I delete my CMS Collection? You'll need to set up field mapping again when publishing to a new collection.

Can I change the collection later? Yes. Edit your integration settings to select a different collection, then remap fields.

Do I need to republish Webflow after each article? Yes, unless you have auto-publishing enabled on your Webflow plan.