BuildShip Framer CMS Data Sync Plugin

The BuildShip Framer Plugin (opens in a new tab) allows you to sync data from external sources directly into your Framer CMS. This powerful integration enables you to:

• Import data from various sources like Firebase, Google Sheets, or Airtable
• Update your Framer CMS content programmatically via API
• Create dynamic collections with automated data flows

Getting Started

Installing the Plugin

To install the BuildShip Framer Plugin, follow these steps:

1. Navigate to the Framer Plugin Marketplace (opens in a new tab) and search for "CMS Data Sync" or click on the link here: CMS Data Sync (opens in a new tab)

2. Click on the Open Plugin button to add the plugin to your Framer project
3. This will open a modal for you to create a new collection which will be used to sync data from your external source

4. Choose a name for your collection and click Create Collection. The plugin will now create a new collection in your Framer project.
5. Once the collection is created, you will be redirected to the plugin settings page where you can configure your data source and sync settings.

Creating a BuildShip Workflow

Before connecting your data to Framer CMS, you'll need to create a workflow in BuildShip:

Start fast with a template

• You can use the Google Sheets to Framer CMS template (opens in a new tab) to quickly set up a workflow that outputs data in the correct format.
• This template is pre-configured to pull data from a Google Sheet and format it for Framer CMS.

Link to the public Google Sheet: Google Sheet (opens in a new tab)

or

Create a new workflow from scratch

• If you prefer to create a new workflow from scratch, follow these steps:

1. Go to the BuildShip Dashboard (opens in a new tab) and log in or sign up
2. Create a new flow by clicking on the + button
3. Build the workflow to pull data from your desired source (e.g., Google Sheets, Airtable, etc.)
4. Make sure to format the output as an array of objects, where each object represents a row in your Framer CMS collection
5. Each object should include an id property or any unique identifier to ensure Framer CMS can correctly identify and use as a slug for the data
6. Go to the Connect tab in the BuildShip workflow and select REST API Call Trigger. Set the method to POST and the path for the endpoint. Click Connect to save the trigger.
7. Ship the workflow by clicking on the Ship button in the top right corner of the BuildShip dashboard
8. Copy the webhook URL provided by BuildShip. This URL will be used to connect your Framer CMS collection to the workflow.

Data Format Required by Framer CMS

• The data sent to Framer CMS must be in the following format:

[
  {
    "id": "1",
    "title": "Item 1",
    "description": "Description for Item 1",
    "image": "https://example.com/image1.jpg"
  },
  {
    "id": "2",
    "title": "Item 2",
    "description": "Description for Item 2",
    "image": "https://example.com/image2.jpg"
  }
]

• Each object in the array represents a single item in your Framer CMS collection. There needs to be a unique field in the object that Framer CMS can use as a slug. This is usually the id field, but it can be any field that contains unique values.
• The keys in the object should match the fields in your Framer CMS collection. For example, if your collection has a field called title, the object should have a key called title with the corresponding value.
• Make sure to include all the required fields in your Framer CMS collection in the objects you send to the webhook. If any required fields are missing, the data will not be synced correctly.

Connecting to Framer CMS

• Open the BuildShip plugin in your Framer project
• Create a new collection that will be synced with your BuildShip workflow
• Name your collection according to your preference
• You'll be redirected to the new CMS collection

Mapping Data Fields

• Test and deploy your BuildShip workflow before mapping fields
• Copy the Endpoint URL from the BuildShip ship panel
• Paste the URL in the plugin modal to make a POST request
• When data is fetched, the extracted fields will appear in the mapping UI

In the mapping interface:

• Use checkboxes to select/deselect fields to include in your CMS
• The Name column allows you to rename fields for your CMS
• The Type dropdown lets you select the appropriate data type for each field

The plugin will attempt to intelligently map data types based on values, but you should verify these selections.

Supported Field Types

Troubleshooting

If you encounter issues while using the plugin:

You'll be notified by Framer in case of any errors. It is always helpful to use Chrome Dev Tools (press F12 on Windows or Option + ⌘ + I on Mac) to check for error logs and the fetched data to get further insights into the issue.

If you're ever stuck, write to us at support@buildship.com or submit an in-app support request. Learn more about how to submit a support request.