LiveChat

Webflow handles layout, content management, and hosting, but lacks built-in live chat or real-time customer support. When visitors have questions on a pricing page or product listing, there's no native way to respond before they leave. LiveChat fills that gap by adding a chat widget directly to Webflow sites through the Marketplace app, manual code embedding, or API connections.

This integration is ideal for ecommerce store owners recovering abandoned carts, SaaS teams onboarding new users, agencies deploying chat across client sites, and support teams answering visitors in real time. If your Webflow site generates leads or serves customers who expect immediate answers, LiveChat covers those needs.

How to integrate LiveChat with Webflow

What is LiveChat? LiveChat is a customer messaging platform used by over 35,000 companies for real-time website chat, AI-assisted replies, and multichannel support. It includes features like proactive chat triggers, message sneak-peek, canned responses, and reporting dashboards. LiveChat is built by Text, Inc., which also publishes ChatBot, HelpDesk, and KnowledgeBase as companion products.

Teams connect LiveChat with Webflow when they need to engage visitors during active browsing sessions. A visitor comparing plans, reviewing a product page, or filling out a contact form can get immediate answers instead of waiting for an email reply. The combination turns a static Webflow site into an active support and sales channel.

The LiveChat-Webflow integration supports 3 approaches:

• LiveChat Marketplace app adds the chat widget to your Webflow site without writing code.
• Custom code embedding lets you place the LiveChat snippet site-wide or on specific pages for more control over widget placement.
• Webflow and LiveChat APIs give you full control over data sync, webhook-driven workflows, and custom session variables, but require server-side development.

Most implementations start with the Marketplace app and add API connections as needs grow.

Install the LiveChat app

The LiveChat app on the Webflow Marketplace is the fastest way to add chat to your site. It auto-injects the widget script across all pages through an OAuth flow, with no manual code editing. The app has 1,000+ installs, is published by Text, Inc. (LiveChat's parent company), and carries Webflow's "Approved by Webflow" badge. You need a LiveChat account to use the service after installation, but the app itself is free to install and works without a paid Webflow site plan.

To set up the integration:

1. Open your Webflow Dashboard, go to the Apps Marketplace, and search for "LiveChat."
2. Click Install App on the LiveChat listing.
3. Select the site(s) you want to add LiveChat to, then click Authorize App.
4. Create a new LiveChat account or log in to an existing one.
5. Switch the toggle on for every site where you want the chat widget to appear.
6. Click Go to Webflow, then click Publish in the upper right corner and select Publish to selected domains.

Once published, the widget should appear on the selected sites.

After publishing, the chat widget appears on your selected sites. You can answer chats from LiveChat's web app, desktop app, or mobile app (iOS and Android). The app supports these capabilities out of the box:

• Personalized chat invitations triggered by visitor behavior, visited pages, or location
• AI Copilot for real-time reply drafting and chat summaries
• Message sneak-peek to see what visitors type before they send
• Customizable widget appearance, languages, greetings, and routing rules
• Offline chatbot mode that collects messages as a contact form when agents are unavailable

These features cover the main functionality available immediately after installation. AI chatbot workflows for FAQs may require additional setup or integration.

If you manage multiple Webflow sites, you can add them all under one LiveChat license and use LiveChat's Groups feature to customize the widget separately for each brand. Widget appearance changes are made inside the LiveChat dashboard at Settings > Chat widget > Customization and do not require republishing your Webflow site.

Add the LiveChat widget with custom code

The Marketplace app covers most setups, but manual code embedding gives you direct control over where the widget loads. This approach is useful when you want LiveChat on specific pages only or when you prefer managing the snippet yourself. It requires a paid Webflow site plan (CMS, Business, or Ecommerce) or a qualifying Workspace plan (Core, Growth, Agency, or Freelancer).

Site-wide installation

Placing the LiveChat snippet in your site's footer code adds the widget to every page, including Webflow CMS Collection List pages and Ecommerce product pages. The script loads asynchronously, so it does not block page rendering.

To add LiveChat site-wide:

1. Log in to your LiveChat account and go to Settings > Channels > Website.
2. Copy the JavaScript snippet displayed on that page.
3. In Webflow, click the W logo (top-left) and open Project Settings.
4. Go to the Custom Code tab and scroll to the Footer Code section. (See Webflow's docs on custom code in head and body tags for details on this feature.)
5. Paste the LiveChat snippet into the Footer Code area and click Save Changes.
6. Publish your site.

The widget now appears on all pages. Your LiveChat License ID (an 8-digit number found at Settings > Chat widget > Channels > Code section) is embedded in the snippet and ties the widget to your account.

Page-specific installation

To show LiveChat only on certain pages, such as a pricing page or support page, use page-level custom code instead of site-wide injection.

To add LiveChat to a single page:

1. In Webflow, open the Pages panel.
2. Click the gear icon (⚙️) next to the specific page.
3. Scroll to the Custom Code section.
4. Paste the LiveChat snippet in the Before tag field.
5. Publish your site.

After publishing, confirm the widget appears only on the page where you placed the snippet.

You can also place the snippet inside a Code Embed element at any position within a page's layout. Code Embed elements have a 50,000-character limit per element, which is well within the size of the LiveChat snippet. This method requires a paid Webflow site plan or qualifying Workspace plan.

Build with the Webflow and LiveChat APIs

For teams that need bidirectional data sync, custom session variables, or webhook-driven workflows, the API integration path provides full control. This approach requires server-side development, typically using serverless functions (Cloudflare Workers, Vercel Edge Functions, or AWS Lambda) as middleware between the two platforms.

The relevant APIs are:

• The LiveChat Agent Chat API (v3.6) handles chat retrieval, archiving, tagging, and customer data
• The LiveChat Configuration API (v3.6) handles webhook registration, auto-access routing rules, and custom properties
• The LiveChat Customer Chat API (v3.6) handles client-side session variables and customer identification
• Webflow's Data API (v2) handles CMS collections and form submissions
• Webflow webhooks trigger real-time events like form_submission and collection_item_changed

These APIs cover the main integration points needed for custom Webflow and LiveChat workflows.

LiveChat uses OAuth 2.1 for authentication. Personal Access Tokens work for single-user scripts and webhook registration, using Authorization: Basic <your_personal_access_token>. The Webflow API accepts Bearer tokens (site tokens for single-site integrations, OAuth tokens for multi-site apps).

Sync chat data to Webflow CMS

When a chat ends, you can capture the transcript and visitor details as a CMS item in Webflow. This creates a searchable chat history or audit log directly in your Webflow CMS.

To set up chat-to-CMS sync:

• Register a webhook with the LiveChat Configuration API for the chat_deactivated event, pointing to your middleware endpoint:

POST https://api.livechatinc.com/v3.6/configuration/action/register_webhook

Include the url, action ("chat_deactivated"), secret_key, and owner_client_id in the request body.

• In your middleware, return HTTP 200 immediately upon receiving the webhook, then process asynchronously. LiveChat retries up to 3 times within approximately 1 minute if it does not receive an HTTP 200.
• Call the LiveChat Agent Chat API to fetch the full thread, then POST the mapped data to the Webflow CMS:

POST https://api.webflow.com/v2/collections/{collection_id}/items/live

Use the /live endpoint to publish CMS items immediately without triggering the 1-request-per-minute site publish limit.

This pattern can also be adapted for other chat events you want to store in Webflow.

The same pattern applies to the incoming_chat event for capturing pre-chat form data as new lead records.

Pass visitor context to LiveChat agents

LiveChat's JavaScript API lets you send Webflow page data (page title, URL, CMS field values) to LiveChat as session variables. Agents then see this context in their dashboard before and during a chat.

To pass session variables:

• Add this JavaScript after the LiveChat widget snippet in your Webflow site's custom code area or in a Code Embed element:

LiveChatWidget.call("set_session_variables", {
  "page_name": document.title,
  "page_url": window.location.href,
  "product_viewed": "Widget Pro"
});

• On CMS dynamic pages, read field values from the DOM and include them in the set_session_variables call.
• Call set_session_variables before the visitor starts a chat. Variables set after a chat begins will not appear in the agent's view for that session.

Setting the variables before chat start is what makes the context visible to agents for that conversation.

This approach requires no REST API calls. It runs entirely client-side within Webflow's custom code environment.

Route chats by Webflow domain or page

The LiveChat Configuration API supports auto-access rules that assign chats to specific agent groups based on the visitor's domain or page URL. This is useful for agencies managing multiple client sites under one LiveChat license.

To create a routing rule:

• Send a POST request to the Configuration API:

POST https://api.livechatinc.com/v3.6/configuration/action/add_auto_access

• Include domain conditions in the request body:

{
  "description": "Webflow site visitors",
  "access": { "groups": [1] },
  "conditions": {
    "domain": {
      "values": [{"value": "mysite.webflow.io", "exact_match": true}]
    }
  }
}

• Authenticate with a Personal Access Token and the access_rules:rw scope.

Once saved, the rule can route chats based on the Webflow domain you specify.

Configuration changes take effect within 2 minutes. Auto-access rules are checked when customer session or page context is updated in LiveChat.

What can you build with the LiveChat Webflow integration?

Integrating LiveChat with Webflow lets you turn a static website into an active support and sales channel without building a custom backend.

• Ecommerce checkout recovery: Trigger proactive chat messages on product and pricing pages based on visitor behavior. When a shopper hesitates on a checkout page, an agent or chatbot answers purchase questions in real time, reducing cart abandonment on Webflow Ecommerce sites.
• Lead capture with CMS logging: Create a Webflow CMS item every time a chat finishes or a chat event is received through a webhook-driven workflow. Each record stores the visitor's name, email, and conversation summary, building a searchable lead database that your team can filter and review directly in Webflow.
• SaaS onboarding assistance: Deploy LiveChat on onboarding and documentation pages built in Webflow. AI Copilot drafts context-aware replies while session variables pass page-level data (like the feature being viewed) to agents, so new users get relevant help before they get stuck.
• Multichannel support hub: Connect Facebook Messenger, WhatsApp, and Instagram through LiveChat alongside your Webflow site chat. Agents manage all channels from one inbox while the Webflow site serves as the primary web touchpoint. Widget appearance and routing rules are configured per brand using LiveChat's Groups feature.

If you need more control over data flows between chat sessions and CMS collections, the API integration path covers those cases with full flexibility.