Webflow chat widget integration

The VGraple CRM chat widget runs on any Webflow site as a two-line embed: a floating button opens a chat that can hand visitors to WhatsApp, capture leads, answer with the AI from a knowledge base, and route to your team's inbox. This is the native website channel; no marketplace app or plugin is involved, and the same widget works on every platform.

What syncs

Setup

1. Create the widget under Settings, then Chat Widget, and add your Webflow pages as knowledge base URLs.
2. Copy the embed code from the Embed Code tab.
3. In Webflow, open Project Settings, then Custom Code, paste into Head Code and save.
4. Publish the site, add the domain to the widget's allowed domains, and test in a private window.
5. For Webflow forms, use Webflow's form webhook or Zapier to create the lead and send a follow-up template.

Webflow forms

Webflow native forms can post to a webhook or to Zapier; map the phone with country code and a consent checkbox, then use the same Create or Update Contact, Create Lead and Send Template Message steps described on the forms pages.

What the visitor experiences

A small button in the corner (colour and position are yours) opens a chat panel with your greeting and, if you enabled it, a short pre-chat form for name, phone and what they need. Replies come from the AI within seconds when the answer is in the knowledge base, from a flow when the question matches a trigger, or from a person in the inbox during business hours; outside them the widget says when you are back and offers WhatsApp. A "Continue on WhatsApp" action opens a wa.me link with the conversation context prefilled, so the visitor lands in a WhatsApp chat that your inbox already knows about, and the two threads sit under one contact.

What the team experiences

Widget conversations arrive in the same inbox as WhatsApp and Instagram, tagged with the channel and the page the visitor was on, with assignment rules, notes, tags and stages as usual. The Android app notifies on new widget chats like any other. Pre-chat form answers become contact fields and, if you chose so, a lead in a pipeline, so a sales conversation started on the website is already a card on the board by the time someone answers it.

Webflow specifics

Custom code applies on publish, so republish after pasting. Staging and production domains both need to be in the widget's allowed domains if you test on the webflow.io subdomain. Page-level custom code lets you run a different widget on a landing page than on the main site, for example a sales widget with its own knowledge base.

Three recipes

• Visitor asks a pricing question -> AI answers from the knowledge base -> offers "Continue on WhatsApp" -> conversation continues on the phone with consent recorded.
• Pre-chat form collects phone and service -> lead created in the Website pipeline -> assignment by service -> utility follow-up template if the visitor leaves.
• Visitor on a product page -> widget opens with a page-specific greeting -> agent sends the product and a payment link.

Limits and gotchas

• The widget needs the two script tags on every page where it should appear; site builders that strip scripts on some templates need the code in the site-wide header.
• Content Security Policy headers on the site must allow the widget's script and frame origins; the embed guide lists them.
• A widget conversation is a website channel until the visitor moves to WhatsApp; WhatsApp templates and consent rules apply only after that.
• Plan caps: 1 widget on Free, 10 on Starter and Growth, unlimited on Scale.
• Knowledge base sources are per widget, so a support widget and a sales widget can answer differently.

The chat widget guide covers every setting; the chat widget feature page shows what visitors see.