Connect Framer

Use Framer when you want Kitful to publish articles into a CMS collection in your Framer project.

Before you begin

You need a Framer project with CMS, the Kitful plugin, a Framer Server API key for the project, and a Kitful site with at least one article.

Create a Server API key

1. Open the project in Framer.
2. Open Site Settings.
3. Go to General > API Keys.
4. Click Create Server API Key.
5. Copy the key for the connection step.

Connect the plugin

1. Install Kitful from the Framer plugin marketplace.
2. Open the plugin inside the project.
3. Click Connect Kitful and sign in if asked.
4. Choose the Kitful site when more than one is available.
5. Paste the Framer Project Link and Server API Key.
6. Click Connect Workspace.
7. Choose a publish destination. See Choose a collection.

You choose the collection in the plugin, not in Kitful. Kitful publishes into whatever you pick.

The plugin remembers the selected connection on that device.

Choose a collection

Kitful creates a collection named Kitful Posts when you connect. Your site does not render that collection yet, so articles stay invisible until you connect it to a page.

You have two ways to fix this. Pick one.

• Publish into the collection your blog already renders. Do this in Kitful.
• Point your blog page at Kitful Posts. Do this in Framer, with Swap Collection.

To point your blog page at Kitful Posts:

1. Open the Pages panel in Framer.
2. Right-click the collection page nested under your blog path.
3. Choose Swap Collection.
4. Pick Kitful Posts.

Pagesacme.com

• Home
• /blog
• Kitful Posts
• /legal

Edit in CMS

Rename

Duplicate

Swap Collection

Blogs

Kitful Posts

Legal

To publish into your own collection:

1. Open the Kitful plugin in Framer.
2. Find Publish destination.
3. Click Change collection.
4. Choose your collection under Collection.
5. Check each row under Fields.
6. Click Save destination.

Change the collection the same way at any time. The plugin is the only place to change it, so keep it installed.

Collections owned by another Framer plugin are listed but cannot be chosen. That plugin syncs the whole collection and would delete anything Kitful publishes there.

Map the fields

Kitful matches its fields to yours by name and type. A field called Title maps to Title. Anything Kitful cannot match is left for you to decide.

Names must match exactly, apart from capitals. A Framer field called Image does not match Kitful's Featured Image, so pick it yourself. Skip that step and your posts publish without a hero image.

Each row offers three choices.

• An existing field of the same type.
• Add to collection. Kitful creates the field in Framer under its own name.
• Skip. Kitful never writes that value.

Kitful adds a field only when you choose to add it. It never changes your collection otherwise.

Three fields are required and cannot be skipped.

The article id survives a slug change. Without it, renaming a slug in Framer makes the next publish create a second copy of the same article.

Publish from Kitful

Publishing happens in the Kitful dashboard. Open an article, click Publish, choose Framer, and confirm. You can also select Framer in a campaign or scheduled slot.

Articles go into the collection you chose. If you never chose one, they go into Kitful Posts, and Kitful recreates that collection when it is missing.

Kitful stops and reports an error when you chose a collection and it no longer exists. It does not publish somewhere else instead.

Kitful works out the article's URL from the page that shows the collection. It says so instead when it cannot: no page shows the collection yet, or two pages do and neither is clearly the post.

Framer needs a publish, so Kitful does it

Framer builds your site when you publish it. A CMS change sits in the project until then. An article Kitful writes is not on your live site until the site is published.

Kitful publishes the site for you after it writes. This is on from the start.

To change it, open the Kitful plugin in Framer. Find Publishing. Clear the checkbox. The setting saves itself, and it applies to publishing and to improvements.

Clear it if you keep unfinished design work in the project. A publish ships the whole site, including the edits you have open, not only the article.

Two things to know.

• Kitful still reports the article as published when the publish fails. The article did reach the CMS. The result then says the site needs a publish.
• A project with staging enabled receives the publish on staging, because that is what Framer publishes to first. Publish to production in Framer.

Published fields

Kitful publishes the article id, title, slug, tags, excerpt, content, featured image, SEO title and description, canonical URL, language, timestamps, and status.

Unmapped fields are left alone. Kitful writes only the fields in your mapping, so other columns in your collection keep their values.

Improve a post

Improve a published post rewrites a Framer post where it already lives. The URL does not change, so the page keeps its rankings and links.

CMSacme.com

Slug	Status	Title
switching-crm	Live	Switching CRM without losing data
crm-onboarding-checklist	Live	A CRM onboarding checklist
crm-data-hygiene	Live	Keeping CRM data clean

Finding the post

Say your project looks like this.

Improving acme.com/blog/crm-pricing, an article Kitful published, matches on Kitful Article ID. That id is written at publish time and never changes, so renaming the slug in Framer does not lose the post.

Improving acme.com/guides/switching-crm, a post you wrote, has no such id. Kitful matches the last part of the URL, switching-crm, against the slug of every post in the project, and finds it in Guides — a collection Kitful has never published to.

You do not have to point Kitful at the right collection first. It searches all of them.

A slug on its own is not enough to act on. acme.com/guides/pricing and acme.com/blog/pricing both end in pricing, so Kitful also checks which page shows each collection. Guides renders at /guides/, so it is the one that serves this URL. A collection no page shows is never written to.

What gets written

Four fields, and only the ones you approved:

Updated At moves so a template that sorts or stamps by that date shows the change. An improvement never creates a post, a field or a collection.

When it stops

Five things stop an improvement, each before anything is written.

None of these lose the improvement. Fix the cause and apply again.

Framer serves a published copy of your site, so an improvement reaches readers only after a publish. Kitful publishes the site for you unless you turned that off. See Framer needs a publish.

Disconnect correctly

• Disconnect in the plugin clears the saved connection on that device only.
• Delete in Kitful removes the publishing integration. The plugin resets when it next checks the connection.

Troubleshoot Framer

Reconnect if the saved device connection was cleared, the Kitful integration was removed, or the Server API key changed.

If publishing succeeds but no one can see the article, check three things in order.

1. The collection Kitful publishes to, in the plugin under Publish destination.
2. The Framer page that renders that collection.
3. Whether the Framer site is published.

If publishing fails with a missing-collection or missing-field error, someone changed the collection in Framer. Open the plugin, click Change collection, and save the mapping again.