How to Integrate Zapier with Your Headless CMS

What is Zapier?

Zapier is a no-code automation platform that connects apps through triggers and actions. Teams use it to move data between tools like Slack, HubSpot, Airtable, Google Sheets, Jira, and thousands of other apps without writing custom integrations for each one. Its core strength is turning an event in one system, such as a published article, into one or more actions in other systems.

Why integrate Zapier with a headless CMS?

Content work rarely ends when someone hits publish. A product launch page might need a Slack announcement, a HubSpot campaign update, a Google Sheets row for reporting, and a Jira ticket for localization. If those steps happen manually, they drift. Someone forgets a field, posts the wrong URL, or updates the spreadsheet two days late.

Architecture overview

A typical Sanity and Zapier flow starts with a content mutation in the Content Lake, such as an article moving from draft to published. A Sanity webhook listens for that mutation and can use a GROQ-powered filter so only relevant events trigger, for example `_type == "article" && status == "published"`. The webhook sends the document ID to a webhook listener or Sanity Function. That server-side code fetches the exact fields Zapier needs from the Content Lake with GROQ, including joined references like author name, campaign slug, and category labels. It then POSTs a JSON payload to a Zapier Webhooks by Zapier Catch Hook URL. Zapier treats that payload as the trigger data, maps fields into action steps, and sends the result to the end user through apps like Slack, HubSpot, Airtable, Google Sheets, Jira, or email. Functions are useful when you want this logic to run close to the content event without maintaining separate infrastructure.

Common use cases

Step-by-step integration

1. 1

   Set up Zapier

   Create a Zapier account, create a new Zap, choose Webhooks by Zapier as the trigger, and select Catch Hook. Copy the generated webhook URL. Connect any destination apps, such as Slack, HubSpot, Airtable, or Jira, and add the API keys or OAuth access that those apps require. If you’re building a private or public Zapier app instead of a Catch Hook Zap, install the Zapier Platform CLI with `npm install -g zapier-platform-cli` and run `zapier login`.

2. 2

   Model the content event in Sanity Studio

   Add the fields your automation needs, not just the fields your page renders. For an article, that might include `title`, `slug`, `status`, `publishAt`, `owner`, `campaign`, `locale`, `canonicalUrl`, and `reviewState`. Because schemas are code, these fields can be reviewed, versioned, and tested like the rest of your application.

3. 3

   Create a filtered Sanity webhook

   In Sanity, create a webhook that fires only for the document types and events Zapier should receive. Use a GROQ filter such as `_type == "article" && status == "published"` so draft saves don’t trigger a Zap. Send the webhook to a small listener endpoint or to a Sanity Function.

4. 4

   Fetch the final payload with GROQ

   Inside the listener, use `@sanity/client` to fetch the published document by ID. Project only the fields Zapier needs, and join references in the same query, such as author name, campaign slug, and category titles.

5. 5

   POST to Zapier

   Send the mapped JSON payload to the Zapier Catch Hook URL with an HTTP POST. In Zapier, test the trigger, confirm the sample fields appear, and map them into action steps like Slack messages, HubSpot tasks, Airtable records, or Jira issues.

6. 6

   Test the end-to-end path

   Publish a test document from Sanity Studio, check the Sanity webhook delivery log, inspect the Zapier Zap history, and verify the destination app output. Then test the frontend, for example a Next.js route that reads from the Content Lake, so the public experience and the Zapier workflow use the same source content.

Code example

import {createClient} from '@sanity/client'
import type {VercelRequest, VercelResponse} from '@vercel/node'

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: process.env.SANITY_DATASET!,
  apiVersion: '2025-01-01',
  useCdn: false,
  token: process.env.SANITY_READ_TOKEN
})

export default async function handler(req: VercelRequest, res: VercelResponse) {
  if (req.method !== 'POST') return res.status(405).end()

  const {_id} = req.body
  const article = await sanity.fetch(`*[_id == $id][0]{
    _id,
    title,
    "slug": slug.current,
    status,
    publishAt,
    canonicalUrl,
    "author": author->{name, email},
    "campaign": campaign->{title, "slug": slug.current}
  }`, {id: _id})

  if (!article || article.status !== 'published') {
    return res.status(202).json({skipped: true})
  }

  const zapierResponse = await fetch(process.env.ZAPIER_CATCH_HOOK_URL!, {
    method: 'POST',
    headers: {'content-type': 'application/json'},
    body: JSON.stringify({
      event: 'sanity.article.published',
      article
    })
  })

  if (!zapierResponse.ok) {
    return res.status(502).json({error: 'Zapier request failed'})
  }

  return res.status(200).json({sent: true})
}

How Sanity + Zapier works

CMS approaches to Zapier

Keep building

Explore related integrations to complete your content stack.