Framer Integration

Make sure you have these two things:

• A Framer project you can edit. You need to be the owner or an editor of the project.
• The Framer website, not only the desktop app. Step 4 copies the project's web address, which only the browser shows. Open framer.com in Chrome or Safari for that step.

In Framer, a “collection” is the list your blog posts live in.

1. Open your project in Framer.
2. At the top left, click the menu that says Canvas and choose CMS.
3. If you already have a collection for your blog, note its exact name and skip to step 2.
4. If not, click Add... on the left to make a new collection, and name it Blog.

You do not need to add any fields. SEOLadders uses the Title and Content fields Framer gives every collection, and adds Image and Excerpt by itself the first time it publishes.

1. Switch back to Canvas (the same menu at the top left) and open the Pages panel.
2. Next to Pages, click +, then New CMS page → Blog → Detail page. This is the page each article appears on, at /blog/article-name.
3. Do the same again and choose Index. This is your /blog page that lists every article.
4. Click Publish at the top right, so your site has a live address.

The API key lets SEOLadders add blog posts to this one project.

1. Click the Canvas menu at the top left and choose Settings.
2. Stay on General and scroll down to API Keys.
3. Create a new key and name it SEOLadders, so you always know what it is for.
4. Copy the key straight away.

1. In Chrome or Safari, go to framer.com, log in and open your project.
2. Copy the address from the browser bar. It looks like https://framer.com/projects/My-Site--a1b2c3.

1. In SEOLadders, open Content → CMS Integration and click the Framer card.
2. Paste the address into Project URL and the key into API Key.
3. Under Collection name, type the name of your blog collection exactly as it is in Framer, capitals included (for example Blog).
4. Leave Deploy to production after publishing switched on, so articles go live on your site straight away. Switch it off to have them wait in Framer until you publish yourself.
5. Click Test connection. It should say Framer and how many collections your project has.
6. Click Save configuration. You are connected.

1. In SEOLadders, open Content → Content History and click any finished article.
2. Click Publish at the top right.
3. In Framer, open CMS → Blog. The article is there, with its title, content, cover image and summary.
4. On your live site, open yoursite.framer.app/blog to see it. Give it a minute if it is not there yet.

Framer decides how an article looks, not SEOLadders. A new blog page has no styling for links and tables yet, so links look like plain text and tables have no borders. Framer removes styling sent from outside, so this has to be set once in Framer. Every article after that, past and future, uses it.

Open the Blog detail page in the Pages panel, then:

1. Show the cover image. Framer's Agent can place the image but cannot connect it to the CMS, so the last click is yours:
   1. Ask the Agent: “Add a cover image between the title and the content. I will connect it myself.” Or click + (Insert) at the top, add an Image and drag it between the title and the article text.
   2. With the image selected, find the Image row in the right panel. Hover it and click the small + on its right.
   3. Choose Image from the list, and set the image's width to Fill.
   4. Check it: the row now shows Image as a coloured tag, not a picture. A picture means it is still a fixed image, and every article would show the same cover.
2. Make links stand out. In the left panel, open Assets → Styles, click + and choose Link Style. Give it your brand colour. Then select the article text on the page and, on the right under Text, set Link to that style.
3. Give tables borders. With the article text selected, open CMS Styles → Table and set a border colour, inner borders and some padding.
4. Size your headings. In the same CMS Styles, give H2 and H3 clear sizes, larger than the body text.
5. Fill in search results. Open the detail page's settings and, under SEO, set the description to the Excerpt field and the social image to the Image field. Otherwise Google shows “Made with Framer” as the description.
6. Make the blog list clickable. Open the /blog page, select an item in the list (click the title, then press Shift + Enter), and on the right set its Link to the Blog detail page.
7. Click Publish.

Already using a blog template whose fields have other names, such as Body or Cover? SEOLadders recognises the common names and uses your fields instead of adding new ones.

Publishing the same article again updates the same Framer post, so you never get duplicates and the web address stays the same.

• Test connection fails: check that the Project URL contains framer.com/projects/ and that the key was copied in full. If in doubt, create a new key (step 3) and paste it in.
• The article is not in your Blog collection: look for a second collection in Framer's CMS. If there is one, the collection name in SEOLadders did not match. Fix the name, delete the extra collection and publish again.
• The article is in the CMS but not on your site: Deploy to production after publishing is off, or your site has no Blog detail page yet (step 2). Click Publish in Framer.
• The article page shows only the title: the detail page has no text connected to the Content field. Add a text block and connect it to Content, then publish.
• No cover image, plain links or tables without borders: your article page is not styled yet. See step 7.
• The titles on /blog do not open the article: link the list item to the detail page (step 7).

Still stuck? Contact us from your avatar menu → Support and we will set it up with you. Not on Framer? See all destinations.