How to Send a WhatsApp Flow From a Website Form | ZazzyAgent
You can connect a website form to ZazzyAgent so that submitting the form automatically starts a WhatsApp conversation or WhatsApp Flow.
This is useful for:
Lead qualification
Appointment booking
Sales enquiries
Customer onboarding
Service requests
Order verification
A typical workflow is:
Website form
↓
Webhook
↓
ZazzyAgent
↓
WhatsApp template
↓
WhatsApp Flow
What you need
Prepare:
Connected and verified WhatsApp account
A WhatsApp Flow
A WhatsApp template with the required button configuration
A ZazzyAgent Bot Flow containing your WhatsApp Flow
A website form
Ability to configure a webhook in your form
The website form must collect the customer's WhatsApp phone number.
Step 1: Create your WhatsApp Flow
First create the WhatsApp Flow that you want customers to receive.
For example:
Lead Qualification
The form could collect:
Name
Email
Service
Budget
See How to Create a WhatsApp Flow Form in ZazzyAgent.
Step 2: Create the WhatsApp template
Create the WhatsApp template that will initiate the experience.
Use an appropriate CTA or Quick Reply button according to the available WhatsApp configuration.
The template should be approved before using it for a workflow that requires an approved template.
For background, see WhatsApp Message Templates: Complete Guide for Businesses.
Step 3: Create a Bot Flow
Create a Bot Flow in ZazzyAgent.
Open the visual Flow Builder.
Add the WhatsApp Flow element.
Select the WhatsApp Flow you created.
This connects the template/button entry point to the actual form experience.
Step 4: Create the Webhook Workflow
Open the WhatsApp Webhook Workflow area.
Create a new webhook workflow.
Choose:
Workflow name
WhatsApp account
WhatsApp template
Then create the workflow.
Copy the webhook URL provided by ZazzyAgent.
Step 5: Configure your website form
Open your website form settings.
For example, if you're using Elementor, open the form's Actions After Submit settings and add a Webhook action.
Paste the ZazzyAgent webhook URL.
The exact settings depend on your form builder.
The same general approach can work with other form tools that support outgoing webhooks.
Step 6: Make sure the form collects the required information
The form should include the information required by your WhatsApp Flow.
At minimum, the workflow needs the customer's WhatsApp phone number.
For example:
Name
Email
Phone
Service
Make sure the form field names/data are available in the webhook payload.
Step 7: Submit a test form
Submit the form once with realistic test data.
For example:
Name: Rahul
Email: rahul@example.com
Phone: +919999999999
Service: WhatsApp Automation
The submission sends data to the webhook.
Step 8: Capture the webhook data
Return to the ZazzyAgent webhook workflow.
Capture the sample webhook response.
You should now be able to see the raw data sent by the website form.
Step 9: Map the fields
Map the incoming form data to the values required by the workflow.
For example:
Name → name
Phone → phone
Email → email
Use the actual field names shown in your captured payload.
Don't guess the field paths.
Step 10: Attach the Bot Flow
The webhook workflow needs to know which Bot Flow should be triggered.
Select the Bot Flow containing your WhatsApp Flow.
The template/button relationship must also be configured correctly.
Step 11: Save
Save the completed webhook workflow.
Step 12: Test from the website
Submit the form again.
The expected path is:
Website form
↓
Webhook
↓
ZazzyAgent receives data
↓
Field mapping
↓
WhatsApp template
↓
Bot Flow
↓
WhatsApp Flow
Can this work with Elementor?
Yes, when the Elementor form can send an outgoing webhook.
A common Elementor setup is:
Elementor form
→ Actions After Submit
→ Webhook
→ ZazzyAgent webhook URL
The form must collect the WhatsApp phone number and other values required by the Flow.
Can this work with WPForms?
A supported WPForms webhook setup can send form data to the ZazzyAgent webhook.
The configuration is similar:
WPForms
→ Webhook
→ ZazzyAgent
See the dedicated integration documentation in ZazzyAgent Integrations & Developer Guides.
Can this work with custom HTML forms?
It can work when the form can send the required HTTP request/webhook payload.
The important part is not the specific form builder.
The important parts are:
Form can send data
Webhook receives it
Phone number is correctly mapped
WhatsApp Flow is correctly connected
Can I delay the Flow?
A delay can be added in the Bot Flow before the WhatsApp Flow component when your workflow requires one.
For example:
Form submitted
↓
Wait
↓
Send WhatsApp Flow
This can be useful when an immediate message isn't appropriate.
Common problems
Form submitted but no WhatsApp message arrives
Check:
Webhook URL
Phone-number mapping
Phone-number format
WhatsApp template
Template approval
Bot Flow mapping
Webhook receives data but fields are empty
Capture a new sample payload and review the actual field structure.
WhatsApp template arrives but Flow doesn't start
Check that the template button is correctly linked to the appropriate Bot Flow.
Flow isn't available
Check that:
The WhatsApp Flow was created.
The Bot Flow was created.
The correct WhatsApp Flow is attached.
The flow is saved/published as required.
The webhook points to the correct workflow.
The current setup reference specifically identifies webhook URL, phone mapping, template-button mapping and Bot Flow attachment as key troubleshooting points for this workflow.
Example: Website lead qualification
A visitor fills in:
Name: Priya
Phone: +91XXXXXXXXXX
Requirement: CRM automation
The website sends the information to the webhook.
ZazzyAgent receives it.
A WhatsApp template starts the conversation.
The customer then receives:
Let's get a few details so we can understand what you need.
The WhatsApp Flow collects the rest of the information.
This connects your website lead form with a structured WhatsApp experience without requiring your sales team to manually contact every lead.