Framer

Watch our step by step video on how to integrate Journalist AI with Framer:

Introduction

Integrating Journalist AI with Framer allows you to automatically publish blog posts generated by Journalist AI on your Framer website.

However, this process requires a workaround since Framer currently doesn’t offer a direct API integration with its CMS. To achieve this, you’ll need to use two third-party services: Zapier and DropInBlog.

In this guide, you’ll set up an automation in Zapier to create a workflow where every article generated by Journalist AI is sent to DropInBlog, which will then display those blog posts on your Framer website using embedded code.

Prerequisites

Before starting, ensure you have:

1. A Zapier account (to create automation workflows).
2. A DropInBlog account (to host and manage your blog content).
3. A Framer website (where your blog will be displayed).

📘

It is also essential to have Journalist AI connected to Zapier. If you haven’t set that up yet, follow our Zapier Integration Guide

Step-by-Step Integration

Step 1: Connecting Journalist AI to Zapier

1. Open your Zapier dashboard.
2. Connect your Journalist AI account by selecting the Journalist AI app and authorizing it.
3. Ensure your connection is working by testing it with sample data.

Step 2: Creating the Zap

1. In Zapier, create a new Zap and set Journalist AI as the trigger.
   • Trigger Event: New Article Published.
2. Add a new step to your Zap and select DropInBlog as the action.
   • Action Event: Create Post.
   
   

Step 3: Mapping Article Fields in Zapier

For the DropInBlog setup, map the following fields:

• Blog: Select your DropInBlog blog.
• Status: Published.
• Post Title: Map to Article Title.
• Slug: Map to Article Title.
• Content: Map to Article Content.
• SEO Title: Map to Article Title.
• SEO Description: Map to Article Meta Description.
• Featured Image: Map to Article Thumbnail.

Leave Categories, Author Name, and Keywords empty for now.

Once all fields are mapped, click Continue and test your Zap to confirm it works. Check your DropInBlog account to ensure the article was successfully created.

Step 4: Displaying Blog Posts on Framer

To show your DropInBlog posts on your Framer website, follow these steps:

1. Create a Blog Page in Framer:
   1. In Framer, create a new page called “Blog.”
   2. Add a header or design elements as needed.
2. Insert Frames for Blog Content:
   1. Add a large frame (Frame A) as a container for your blog posts.
   2. Inside Frame A, add a smaller frame (Frame B) to hold the blog content.
   3. Ensure Frame B is nested inside Frame A in the layers panel.
3. Add Custom Code in Framer:
   1. Go to the Settings of your Framer site.
   2. Scroll to the Custom Code section and locate the End of Body Tag field.
   3. Copy the first code snippet from DropInBlog and paste it here.
4. Configure Scroll Section:
   1. Copy the second code snippet from DropInBlog.
   2. Select Frame B in Framer and paste the code in the Scroll Section field.

Step 5: Publish Your Website

1. Save and publish your Framer site.
2. Once published, your blog posts from DropInBlog will appear on your Framer page.

🚧

You’ll need a paid Framer account to use the custom code feature.