How to Integrate Drift with Your Headless CMS

What is Drift?

Drift is a conversational marketing and sales platform used for website chat, account-based engagement, lead routing, and sales conversations. Teams use Drift to qualify visitors, trigger playbooks, route conversations to sales or support, and capture context before a human joins. It sits in the Communication & Collaboration category because it turns website behavior and visitor data into real-time conversations.

Why integrate Drift with a headless CMS?

Drift works best when the conversation matches the page, product, campaign, or account segment the visitor is looking at. If your pricing page, product pages, event pages, and help content live in one place, Drift can use that context to show the right playbook, route to the right team, or attach useful details to the contact record.

Architecture overview

A typical Sanity and Drift integration starts with structured content in the Content Lake, such as product pages, campaign pages, help articles, and a dedicated driftPlaybookConfig document that stores playbook IDs, CTA copy, audience rules, and routing metadata. When an editor publishes one of those documents, a Sanity webhook fires with the document ID and type. A Sanity Function receives that event, runs a GROQ query to fetch the exact fields Drift needs, including referenced product, campaign, or team data, and formats the result for Drift.

Common use cases

Step-by-step integration

1. 1

   Set up Drift access

   Create or use an existing Drift workspace, install the Drift JavaScript snippet on your site, and create a Drift app or OAuth access token for API calls. Store the token as DRIFT_ACCESS_TOKEN in your deployment environment or Sanity Function secrets.

2. 2

   Create the Drift content model in Sanity Studio

   Add schema fields that Drift actually needs, such as playbookId, chatHeadline, chatBody, ctaLabel, ctaUrl, audienceSegment, routeToTeam, and references to product, campaign, or article documents. Keep this separate from page layout fields so the chat integration doesn't depend on presentation code.

3. 3

   Add a GROQ-powered webhook

   Create a Sanity webhook that triggers on publish events for page, product, article, campaign, and driftPlaybookConfig documents. Filter out drafts and unrelated document types so Drift isn't called for every editorial change.

4. 4

   Run sync logic in a Sanity Function or webhook listener

   In the Function, read the webhook payload, fetch the full document from the Content Lake with @sanity/client, and project only the fields Drift needs. This is where you normalize URLs, map Sanity document types to Drift playbook IDs, and remove fields that shouldn't leave your content system.

5. 5

   Connect to Drift's API and SDK

   Use Drift's REST API for server-side contact attributes or events, and use the Drift JavaScript SDK in the browser to identify the visitor, pass Sanity-derived context, and start the right playbook. Keep API tokens server-side. Never expose a Drift bearer token in browser JavaScript.

6. 6

   Test the full conversation path

   Publish a test campaign in Sanity, confirm the webhook fires, inspect the Drift API response, load the page with Drift installed, and verify that the right playbook, CTA, and route appear. Also test failure cases, such as a missing playbookId or an archived campaign URL.

Code example

Minimal Sanity webhook handler that fetches published content with GROQ, then sends page context to Drift as a contact event.

import {createClient} from '@sanity/client'

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

export async function POST(req: Request) {
  const {documentId} = await req.json()

  const page = await sanity.fetch(`
    *[_id == $id][0]{
      _id,
      title,
      "url": slug.current,
      "product": product->name,
      driftPlaybookId,
      chatHeadline,
      audienceSegment
    }
  `, {id: documentId})

  if (!page?.driftPlaybookId) {
    return Response.json({skipped: 'No Drift playbook configured'})
  }

  const driftRes = await fetch('https://driftapi.com/events', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.DRIFT_ACCESS_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      event: 'sanity_content_published',
      attributes: {
        contentId: page._id,
        title: page.title,
        url: `https://www.example.com/${page.url}`,
        product: page.product,
        playbookId: page.driftPlaybookId,
        audienceSegment: page.audienceSegment,
      },
    }),
  })

  if (!driftRes.ok) {
    return Response.json({error: await driftRes.text()}, {status: 502})
  }

  return Response.json({synced: true, playbookId: page.driftPlaybookId})
}

How Sanity + Drift works

CMS approaches to Drift

Keep building

Explore related integrations to complete your content stack.