Drift

Add Drift live chat and AI playbooks to a Webflow site with a JavaScript snippet, and keep an existing install running while Salesloft sunsets the product.

→
↗
►
↓
←
↑
Install app
→
↗
►
↓
←
↑
View website
→
↗
►
↓
←
↑
View lesson
→
↗
►
↓
←
↑
A record settings
→
↗
►
↓
←
↑
CNAME record settings
Drift

Design, content, and hosting live in one place, but a published Webflow site cannot answer a visitor's question while that visitor is still on the page. Native forms take a name and an email, then return a thank-you message and a wait. Nothing qualifies the person, and nothing puts a sales calendar in front of them at the moment they are interested.

Drift closed that gap with a chat widget, bot playbooks, and meeting booking inside the conversation. It still installs on a Webflow site today, and the script it serves still loads. It is also on the way out: Clari and Salesloft published a sunset announcement in March 2026 confirming a gradual sunset of Drift, and now refer chat customers to a partner product instead. No shutdown date has been published. Read this page as a guide to running and maintaining an install you already have, rather than a reason to start a new one.

Marketing ops teams keeping a working widget alive are the readers this page serves best. Demand generation marketers who inherited Drift playbooks on Webflow campaign pages will want the page-scoping and targeting steps. Agencies running the widget across many client sites get a programmatic install and removal path further down, which is the part that matters most when a product is being retired.

How to integrate Drift with Webflow

What is Drift? Drift is a conversational marketing tool for B2B revenue teams, now owned by Clari and Salesloft. It runs live chat, bot playbooks, visitor identification by reverse IP lookup, and meeting booking on a website. Salesloft's own chat page has stopped selling Drift, while the Drift app, its developer documentation, and its install articles all remain online.

Teams pair Drift with a Webflow marketing site to catch high-intent traffic that a static form would lose, usually on pricing and demo pages. Three routes exist, and most working installs use more than one. The Drift JavaScript snippet puts the widget on the site through Webflow's custom code fields, with no development work. Zapier and viaSocket move lead data between the two products once the widget is collecting it. For contact sync, CMS writes, or the same install repeated across many sites, the Webflow and Drift APIs cover what the no-code routes cannot, at the cost of server-side development.

Add the Drift snippet with Webflow custom code

Installation runs through custom code, because the Webflow Marketplace has no Drift app. Salesloft's Webflow install article states that installing Drift on a Webflow site is available on all Drift plans, and it puts the snippet in the Head code field. Webflow's documentation on custom code in head and body tags explains where each field renders. Publishing custom code needs a paid Site plan, either Basic or Premium, or a Core, Growth, Agency, or Freelancer Workspace.

To set up the integration:

  1. In Drift, go to Settings > App Settings > Chatbot > Install, click Javascript, then click Copy Code.
  2. In Webflow, open Site settings > Custom code and paste the snippet into the Head code field, as near the closing </head> tag as you can so it does not interfere with existing CSS or JavaScript.
  3. Click Save changes, then publish the site.

Put the snippet in the head rather than the footer. Webflow's Footer code field will accept it, and the widget may well load from there, but Salesloft's troubleshooting documentation tells you to check that the code sits in the head and not the body when the widget misbehaves. A footer install puts you on the wrong side of the vendor's own guidance before you have started debugging anything, and the code that renders before the closing </body> tag is the harder of the two to defend in a support conversation.

Once the snippet is live, these capabilities work with no further code:

  • Live chat and playbooks: The widget and any playbooks you have switched on appear across every published page, though Salesloft notes that messages are off by default on a new account.
  • Meeting booking in chat: With a Google or Outlook calendar connected, the bot offers open slots inside the conversation and writes the booking to the rep's calendar.
  • Visitor identification: Drift Intel supplies company, industry, and revenue detail by reverse IP lookup before a visitor types anything at all.
  • Business hours and language: Online and offline greetings switch on the business hours set in the Drift dashboard, so an out-of-hours visitor sees different copy.

Salesloft's JavaScript install guide, linked in the tutorial button on this page, notes that advanced targeting settings are available only on paid Drift plans.

Install the snippet once and only once, because Salesloft warns that a second copy on the same site causes widget problems that are difficult to diagnose. To confirm the install, open the browser console on the live site and type drift. A response beginning with f means the widget loaded, and an error means it did not. Custom code changes take effect only when you publish the site.

Scope the widget to specific pages

Site-wide Head code puts Drift on every page you publish. For a single page, use that page's own custom code fields, and for placement inside a layout use a Code Embed element, which Webflow documents as a supported home for third-party live chat. Each custom code field holds up to 50,000 characters, at site level and page level alike.

To install on a single page:

  1. Open the page's settings in Webflow.
  2. Paste the snippet into the <head> tag field and save your changes.
  3. Publish the site to push the change live.

Drift also scopes itself from its own side, which is the cleaner option when the widget is already site-wide. Playbook targeting conditions match URL, path, host, and query parameters, so different Webflow pages can fire different bots. Widget display settings control where the chat icon appears. Hiding the icon on a page does not stop a playbook from firing there, which catches people out often enough to be worth testing directly.

Control the widget with the Drift JavaScript API

A second script block, pasted after the install snippet, controls widget behaviour in the visitor's browser. The widget API hides or shows the chat icon and listens for events such as scheduling:meetingBooked and conversation:playbookFired.

To hide the widget on load:

drift.on('ready', function(api) {
  api.widget.hide(); // or .show()
});

Wait for the ready event before any widget-control call, and keep the block after the install snippet. The full event catalog lives in the Drift events reference.

Install through Google Tag Manager

If your Webflow site already runs Google Tag Manager, Drift can load through the existing container instead of a second pasted snippet. The container snippet already sits in Site settings, so a Drift tag added to it ships with every published page. Salesloft documents the flow in its GTM installation article.

  1. In Google Tag Manager, create a Custom HTML tag and paste the Drift snippet.
  2. Set the tag's trigger to All Pages.
  3. Click Submit, then Publish.

Google Tag Manager and Drupal are the only plugin-style installs Salesloft documents, and there is no native Webflow plugin, per its onboarding install guide.

What a third-party chat script costs you

Every chat widget is a third-party script running on your own pages, and a sunsetting one raises the stakes on each of the costs below. These are worth pricing in before you add or keep the snippet.

  • Consent and cookies: The widget sets its own cookies and identifies visitors, so under GDPR and similar regimes it usually belongs behind a consent gate rather than in unconditional site-wide Head code.
  • Page weight: Salesloft states the loader is asynchronous and will not slow the page or block interaction, which is a vendor claim about its own product; the script is still an extra origin, an extra connection, and extra work on the main thread.
  • Data leaving your site: Reverse IP lookup and contact identification send visitor detail to a third party, which is a disclosure question for your privacy policy and not only an engineering one.
  • Sunset exposure: When the service is finally switched off, the tag stays in your published pages and quietly fails, so plan the removal rather than waiting to notice a dead widget.

Consent is the one with a clean Webflow answer: set up cookie consent first and load the widget behind it. If you are already planning the exit, Crisp covers the same live chat ground on Webflow and is not being retired.

Connect Drift and Webflow with Zapier or viaSocket

Automation platforms move records between the two products without any code, which is how most teams get chat leads into the CMS and the CRM. Zapier maintains a live Drift and Webflow connector, and viaSocket publishes a combined page for the same pair.

The pieces you get to work with are these:

  • Drift triggers: New Lead, New Contact, New Conversation, New Message, and User Reached Goal all start a workflow the moment the event lands.
  • Drift actions: Create or Update Contact From External turns a Webflow form submission into a chat contact that playbooks can then target.
  • Webflow actions: Create Item and its live variant write chat outcomes straight into a Collection, so a booked meeting can update a campaign page.
  • Goal-driven flows: Salesloft documents playbook goal events firing a Zap when a visitor hits a goal inside a playbook.

viaSocket currently runs one way, from Webflow events into Drift actions, because it publishes no Drift triggers. Zapier covers both directions, which makes it the better choice when a Drift event needs to change something in Webflow.

Build with the Webflow and Drift APIs

The API path suits teams that need conversation data inside their own systems, and agencies installing or removing Drift across many Webflow sites at once. It requires server-side development. Drift authenticates with OAuth 2.0 bearer tokens, and Webflow's custom code and webhook endpoints need an OAuth Data Client App token rather than a site token. Weigh this path carefully against the sunset: Drift's developer documentation carries no published end date, which is not the same as a commitment to keep serving it.

  • Drift REST API: The authentication reference covers contacts, conversations, and playbooks at the base URL https://driftapi.com.
  • Webflow Data API: The Webflow Data API handles Collection items, form submissions, and the custom code endpoints used further below.
  • Webflow webhooks: Registered webhooks push events such as form_submission and site_publish to any endpoint you control.
  • Drift webhooks: The Drift webhook events list covers contact_identified, new_meeting, and playbook_goal_met among others.

Between those four pieces you can move a lead in either direction without a human touching a spreadsheet.

Sync Webflow form submissions to Drift contacts

A form_submission webhook turns every Webflow form into a Drift lead source. Registering webhooks needs an OAuth token from a Data Client App, because site tokens cannot do it.

  1. Register the webhook with POST /v2/sites/{site_id}/webhooks and triggerType: "form_submission", which needs the sites:write permission.
  2. At your endpoint, read the visitor's email and name from the payload.data object.
  3. Create the contact with POST https://driftapi.com/contacts, where email is the only required attribute.

To update returning leads instead of creating duplicates, query GET /contacts by email first, then send PATCH /contacts/{contactId} with an attributes object.

Write Drift conversation data to the Webflow CMS

Drift webhooks push chat events to your server, and the Data API writes the results into Webflow CMS collections. Verify every Drift payload by comparing the X-Verification-Token header against your App Credentials verification token before you trust it.

  1. Subscribe to the events you need, then fetch the full record with GET https://driftapi.com/contacts/{contactId} or GET /conversations/{conversationId}/messages.
  2. Create the item with POST /v2/collections/{collection_id}/items/live, where fieldData.name and fieldData.slug are required.
  3. Use conversation_push rather than the deprecated conversation_status_updated event in anything new.

Writing to a live item publishes immediately, so stage the item first if an editor should review the record before it appears on the site.

Install or remove the widget across sites

Agencies can push the Drift snippet to every client site through the custom code endpoints instead of pasting it by hand, and the same endpoints are what you will use to take it off again when the service closes. They need an OAuth Data Client App token carrying the custom_code:write scope, which site tokens do not have.

  1. Register the snippet with POST /v2/sites/{site_id}/registered_scripts/hosted, or use the /inline variant for a raw script.
  2. Apply it with PUT /v2/sites/{site_id}/custom_code, setting the location to header.
  3. Push the change live with POST /v2/sites/{site_id}/publish.

Inline scripts are capped at 2000 characters, so a hosted script is the safer registration for anything longer. Confirm each site with GET /v2/sites/{site_id}/registered_scripts before moving on to the next, and see our walkthrough on applying custom code by API for the full sequence.

What you can build with the Drift Webflow integration

Pairing Drift with Webflow lets you qualify and book a visitor in real time instead of putting a static form in front of every offer. These are the patterns that hold up in practice on a Webflow marketing site.

  • Formless qualification on high-intent pages: A pricing-page playbook asks preset questions, scores the visitor through AI lead qualification, and routes a match to a rep without a form in the way.
  • Out-of-hours meeting booking: With a calendar connected, the bot offers slots at any hour, so a demo request that lands at 2am becomes a booking rather than an overnight queue entry.
  • Form to chat lead sync: A gated-content form on a Webflow landing page creates or updates a Drift contact through an automation platform, so the lead exists for playbook targeting and rep follow-up.
  • Chat-driven CMS updates: A playbook goal event updates a live Collection item, which can flip a campaign page's status field the moment a meeting is booked.

Since Drift is being retired, the honest version of this list is a specification for what to rebuild elsewhere. Start with our guide to adding Crisp live chat to a Webflow Cloud app, which covers the same qualification and routing ground on a product that is still being sold. Whichever widget you land on, connect the Webflow MCP server so your AI tools can audit which custom code is registered on each site and strip the dead tags when the switch-off comes.

Frequently asked questions

  • You need a paid Site plan, either Basic or Premium, or a Core, Growth, Agency, or Freelancer Workspace plan. The free Starter Site plan cannot publish custom code, which the snippet install depends on. The Site plan comparison breaks down each tier. On the Drift side, Salesloft's Webflow install article states that installing on a Webflow site is available on all Drift plans.

  • Install the snippet in a single page's custom code fields instead of site-wide, or leave it site-wide and scope it from the Drift side. Widget display settings control where the chat icon appears, and a URL condition excludes a page. Playbook targeting conditions decide which bot fires, matching URL, path, host, and query parameters. Hiding the icon does not stop a playbook from firing on that page.

  • Open the browser console on your live site and type drift; an error means the snippet is not installed, and custom code only goes live once you publish. The console message The Drift widget is not allowed to load on this domain means the domain is not allowlisted, which you fix in the widget's security settings in Drift. Also confirm the widget icon and the playbook are both switched on, and test in an incognito window, since targeting rules often exclude repeat visitors. Ad blockers such as uBlock Origin and Ghostery block the widget outright. Salesloft's widget troubleshooting guide has the full checklist.

  • Yes. Custom code publishes to the staging subdomain, so the snippet runs there as long as the domain is allowlisted in Drift. If allowlisting is switched on, add the .webflow.io subdomain alongside your production domain, or the widget refuses to load. Custom code does not run in previews by default; turn on the option for custom code previews in Site settings.

  • Drift still runs, but it is being retired. Clari and Salesloft announced a gradual sunset in March 2026 and now refer chat customers to a partner product, 1mind. The name has not changed, and no shutdown date has been published. The widget script, the Drift app, the developer docs, and the install articles are all still live, so an existing install keeps working and the setup steps here still apply. Visiting drift.com now redirects to Salesloft's chat page. Plan a migration rather than a new build.

Drift
Drift
Joined in

Description

Adds Drift's chat widget to a Webflow site through a JavaScript snippet in Webflow's site-wide or page-level custom code fields, with Zapier and API routes for syncing leads and conversations into the Webflow CMS. Salesloft has announced a gradual sunset of Drift, so treat this as maintenance guidance for a working install.

→
↗
►
↓
←
↑
Install app

This integration page is provided for informational and convenience purposes only.


Other Customer engagement integrations

Other Customer engagement integrations

Orimon

Orimon

Connect Orimon with Webflow to answer visitor questions and capture leads through an AI chatbot trained on your published site.

Customer engagement
Learn more
Chaty

Chaty

Add a floating Chaty chat widget to your Webflow site that routes visitors to WhatsApp, Messenger, phone, and other channels across 20+ supported platforms.

Customer engagement
Learn more
Social Intents live chat

Social Intents live chat

Connect Social Intents live chat with Webflow to answer visitor questions in real time from Microsoft Teams or Slack, with Google Chat also supported.

Customer engagement
Learn more
Twise

Twise

Connect Twise, an AI chat assistant, with Webflow to answer visitor questions, capture leads, and respond in 92 languages using a chat widget that learns from your site content.

Customer engagement
Learn more
Flowstar: Banners

Flowstar: Banners

Connect Flowstar: Banners with Webflow to display promotional pop-ups and announcement banners without writing code

Customer engagement
Learn more
Flowstar Urgency Countdown Timer

Flowstar Urgency Countdown Timer

Add deadline-driven countdown timer bars to any Webflow page using Flowstar's no-code app.

Customer engagement
Learn more
Click to Call

Click to Call

Connect Click to Call with Webflow to add a floating phone button that lets visitors call your business directly from any page.

Customer engagement
Learn more
Quiz Popup

Quiz Popup

Connect Quiz Popup with Webflow to embed branching quiz popups that collect visitor data, capture emails, and route product recommendations on your site.

Customer engagement
Learn more
Impulse

Impulse

Connect Impulse with Webflow to add popups, bars, and widgets to your site without writing custom code.

Customer engagement
Learn more

Related integrations

No items found.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free