On this page
The VGraple CRM chat widget runs on any Framer 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
| Data | Direction | Timing |
|---|---|---|
| Visitor messages, name, email, phone, page URL | Framer site to VGraple CRM inbox | Real time |
| Agent, flow and AI replies | VGraple CRM to the visitor's chat | Real time |
| Lead creation and tags from the widget's pre-chat form | Inside VGraple CRM | On submit |
| Handoff to WhatsApp (wa.me with prefilled text) | Widget to WhatsApp | On tap |
Setup
- Create the widget under Settings, then Chat Widget, and add your Framer pages as knowledge base URLs.
- Copy the embed code.
- In Framer, open Site Settings, then General, scroll to Custom Code and paste into Start of head tag.
- Publish, add the domain to the widget's allowed domains, and test in a private window.
- For Framer forms, connect them to a webhook or Zapier for lead creation and the follow-up template.
Framer forms
Framer's form component can post to a webhook endpoint; map phone, consent and hidden campaign fields, then create the lead and send the follow-up template through Zapier, Make or the REST API as on the forms pages.
Framer forms in more detail
Framer's form component submits to Framer's own handler by default; switch it to a custom webhook endpoint in the form's settings and the submission is posted as JSON with the field names you chose. Add a phone field with a country code hint, a WhatsApp consent checkbox and hidden fields for the campaign, then point the webhook at Zapier's Webhooks by Zapier, Make's Custom webhook or your own endpoint. From there, Create or Update Contact, Create Lead and Send Template Message turn the submission into a lead and a WhatsApp acknowledgement within seconds; the forms pages show the mapping table, which is identical for Framer.
Landing pages and campaigns
Framer is often used for campaign landing pages, which makes page-level widgets useful: a landing page for a launch can run a widget whose greeting mentions the offer and whose knowledge base holds only the launch FAQ, while the main site keeps the general widget. Page rules in the widget settings select which widget loads on which URL pattern.
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.
Framer sites are often fast, image-led marketing sites where the chat button is the only live contact point, so set business hours on the widget and write the out-of-hours message to offer WhatsApp explicitly; visitors who tap through become WhatsApp contacts you can follow up with a utility template the next morning, which a static contact form never allows.