Airtable Script to Webflow Create/Update Example

airtable-script-webflow-sync.js

const config = input.config ({
    title: 'Airtable <> Webflow sync',
    description: 'An example script that could be used to send or update records from Airtable to Webflow',
    items: [
        input.config.text ('apiKey', {
            label: 'Webflow API Key',
            description: 'note: anyone with access to this base can see your API key'
        }),
        input.config.text('webflowSiteID',{
            label:'Webflow Site ID',
            description: 'You can find your site ID in admin panel'
        }),
        input.config.text('webflowCollectionID', {
        label: 'The webflow collection you want to sync to',
        description: 'You can find your collection ID in the CMS panel'
        }),
        input.config.table ('contentTable',{
            label: 'Content table',
            description: 'This table should have the CMS fields in Airtable that you want to send to Webflow'
        }), 
        input.config.field('cmsItemID', {
            label:'CMS Item ID',
            description: 'Which field has your existing CMS item ID? If there is one, the script will update the webflow item, if not it will create',
            parentTable: 'contentTable'
        }),
        
    ]
})

// getting config settings into variable
const contentTable = config.contentTable;
const webflowSiteID = config["webflowSiteID"];
const webflowCollectionID = config["webflowCollectionID"];
const cmsItemIDField = config["cmsItemID"];
const apiKey = config["apiKey"];

// get record we want to send to webflow
let sendToWebflowRecord = await input.recordAsync('What record do you want to sync?', contentTable);

//setting up API call variable
let methodType ="";
let headers = {
    'accept-version': '1.0.0',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}` 
    };

// Update method type and URL based on whether there is a CMS Item ID in the record
let cmsItemID = sendToWebflowRecord.getCellValueAsString(cmsItemIDField);

console.log(cmsItemID);
let url = "";
let method = "";

if(cmsItemID.length) {
    url = `https://api.webflow.com/collections/${webflowCollectionID}/items/${cmsItemID}?live=true`;
    method = "PATCH";
} else {
    url = `https://api.webflow.com/collections/${webflowCollectionID}/items?live=true`;
    method = "POST";
}

// Map the fields between Airtable and Webflow
let body = JSON.stringify({
            "fields": {
                "name" : sendToWebflowRecord.getCellValueAsString("Name"),
                "field2" : sendToWebflowRecord.getCellValue("Field 2"),
                "field3" : sendToWebflowRecord.getCellValue("Field 3"),
                "field4" : sendToWebflowRecord.getCellValue("Field 4"),
                "_archived": "false",
                "_draft": "false"
            }
        }
    )


//This is where we update or create the new CMS item
let callTowebflow = await remoteFetchAsync(url, {
    method: method, 
    body: body,
    headers: headers
})

let callToWebflowResponse = await callTowebflow.json();

console.log(callToWebflowResponse);
console.log(callTowebflow);

if(callTowebflow.status == 200) {
    await contentTable.updateRecordAsync(sendToWebflowRecord, {
        "CMS item ID": callToWebflowResponse._id,
        "slug": callToWebflowResponse.slug
         }
    );
    output.text("The API call worked!") 
} else {output.text("there was an error in the api call")};