Livechat

How to integrate LiveChat with Webflow

LiveChat connects to Webflow through three independent methods. The Marketplace app handles everything automatically and works for most sites. Manual code embeds give you control over which pages show the widget and how it loads. API integration connects LiveChat data to your Webflow CMS and external systems, but requires backend development.

Most sites use just one method, though the code embed and API paths can be combined for advanced setups.

Install the LiveChat Webflow app

The official LiveChat app in the Webflow Apps Marketplace is the fastest way to add a chat widget to your site. It auto-injects the required scripts and deploys the widget across all pages without any manual code.

To set up the integration, follow these steps.

1. Go to the Webflow Apps Marketplace, search for "LiveChat," and click Install App  
2. Select the site(s) you want to add LiveChat to and click Authorize App  
3. Sign in to your existing LiveChat account or create a new one  
4. Toggle the widget on for each site where you want it to appear  
5. Republish your Webflow site to activate the widget

Once installed, configure the widget's appearance, greetings, and behavioral triggers inside your LiveChat dashboard. Multi-channel messaging for platforms like Facebook Messenger, WhatsApp, and Instagram is also configured within LiveChat, not in Webflow. Webflow handles the widget placement on your site; LiveChat handles everything else, including agent routing, chat management, and reporting.

The Marketplace app is a good fit for e-commerce sites that want to assist visitors during checkout and reduce cart abandonment with targeted messages.

Use Code Embed elements and custom code

If you need the chat widget on specific pages only, or want more control over when it loads, add the LiveChat snippet manually using Webflow's custom code settings or Code Embed elements.

To set up the integration, follow these steps.

1. Log in to your LiveChat dashboard and go to Settings > Channels > Website, then copy the widget embed code  
2. For site-wide installation, paste the code into Site Settings > Custom Code > Footer Code in Webflow  
3. For page-specific placement, add a Code Embed element to individual pages and paste the LiveChat snippet there  
4. Customize widget appearance, greetings, availability hours, and triggers inside the LiveChat dashboard  
5. Publish your site and verify the widget appears on the correct pages

LiveChat loads its widget assets asynchronously, so it won't block your page from rendering. If you need to defer the widget until a visitor grants cookie consent, you can implement this using Google Tag Manager or custom JavaScript to conditionally load the snippet.  

What You Can Build

LiveChat and Webflow together support a range of customer engagement setups, from simple chat widgets to automated support pipelines.

Here are a few things you can build with this integration.

• E-commerce support centers: Provide instant product assistance on checkout and product pages, recover abandoned carts through targeted chat messages triggered by browsing behavior, and route purchase-related questions to specialized agents  
• SaaS onboarding flows: Guide new users through setup with proactive chat invitations on key pages, use AI-assisted replies for common questions, and reduce time-to-value by connecting visitors with support before they get stuck  
• Lead qualification systems: Qualify prospects through conversational forms and chatbot interactions, then sync qualified leads to your Webflow CMS or CRM using automation tools like Zapier or Make. The CMS sync requires an automation platform or custom API work and is not something the Webflow app provides on its own  
• Multi-language support hubs: Serve global audiences using LiveChat's 45+ widget languages and language-based routing to appropriate support teams. Automatic real-time translation requires additional LiveChat marketplace apps such as GPT Translator

To get started with the simplest path, install the LiveChat app from the Webflow Apps Marketplace. For API-based workflows, refer to the LiveChat Developer Platform documentation and the Webflow API reference.