WP Form Integration

Setting up automated WhatsApp messages after a WordPress form submission can significantly enhance customer engagement and streamline communication for your website. By using WhatsApp for notifications or confirmations, you can instantly connect with users in a more direct and personal way. Below is a general overview of how to set up automated WhatsApp messages after a WordPress form submission, the benefits, and some tools you can use.

Why Automate WhatsApp Messages After Form Submission?

1. Instant Notifications: Automatically send instant confirmation or thank-you messages to users right after they submit a form. This can enhance user experience and provide timely updates.
2. Lead Notifications: If you’re collecting leads through forms (e.g., contact forms or registration forms), you can send an immediate WhatsApp notification to your sales or support team, ensuring faster response times.
3. Improved Engagement: WhatsApp is one of the most widely used messaging platforms. Integrating it into your form submissions ensures that users receive notifications where they are most active.
4. Time-Saving: Automating the process eliminates the need for manual follow-up and helps businesses stay on top of new leads or inquiries.

Step 1: Install XpressBot Webhook Add-on

To automate WhatsApp messages on WordPress form submissions, you’ll first need to install the XpressBot Webhook Add-on. This add-on works in conjunction with WPForms (Pro version required) to send automated messages to WhatsApp.

1. Install WPForms Plugin: If you haven’t already, install the WPForms Pro plugin on your WordPress site.
2. Install Webhooks Add-on:
   • From your WordPress Dashboard, navigate to WPForms > Addons.
   • You’ll see a list of available add-ons. Look for the Webhooks Add-on and click Install.
   • Once installed, click Activate to enable it.
3. Activate XpressBot Webhook Add-on:
   • After installing the Webhooks Add-on, go to WPForms > Settings and find the Webhooks section.
   • Select XpressBot as your integration option for WhatsApp automation.
   • Enter your XpressBot API key to complete the setup.

Step 2: Create a Message Template in XpressBot

To send automated WhatsApp messages, Meta (WhatsApp) requires you to use approved message templates. Without an approved template, you cannot initiate business messages to users. Here’s how to create and submit a message template in XpressBot:

1. Access the WhatsApp Bot Manager

• Log in to your XpressBot Dashboard.
• Navigate to the WhatsApp Bot Manager section from the left-hand menu.
• Click on Message Templates under this section.

2. Create a New Template

• Click the Create button to start creating a new message template.
• Choose General Template from the options (for most common use cases like confirmations, alerts, or informational messages).

3. Fill in Template Details

• Template Name: Choose a clear, descriptive name for your template. This helps you organize and recognize templates later.
• Locale: Select the language or region for the message template (e.g., en_US for English, es_ES for Spanish).
• Category: Choose the appropriate message category based on the type of message. Options typically include:
  • Account Update (e.g., password reset)
  • Payment Update (e.g., transaction confirmation)
  • Personal Communication (e.g., support inquiries)
  • Marketing (e.g., promotional messages)
  • Utility (e.g., reminders or alerts)
• Header Type: Select a header type (optional), which could include:
  • Text (Simple text)
  • Image (An image as the header)
  • Video (A video URL for richer content)
  • Document (File attachment, like a PDF)

4. Compose the Message Body

• Write the message content that you want to send. Ensure that the message is clear, professional, and within WhatsApp’s messaging guidelines.
• Use placeholders (e.g., {first_name}, {order_id}) for dynamic content that will be replaced when the message is sent to a user. For example:
  • “Hello {first_name}, your order #{order_id} has been confirmed!”

5. Add Interactive Elements (Optional)

• Call-to-Action (CTA): Add actionable buttons such as “Visit Website” or “Track Your Order.” These can be used to guide the recipient towards the next step.
• Quick Reply Buttons: You can also include quick reply buttons for users to select predefined responses, which can trigger the next step in a conversation. For example:
  • “Yes”: Confirm something
  • “No”: Reject or decline
  • “Cancel”: To cancel or close the interaction

6. Save and Synchronize the Template

• Once you’ve composed the template and added any interactive elements, click Save to finalize your template.
• Close the window and then click Sync Template to submit it for Meta’s approval.
• Note: This process sends your template to WhatsApp for review. Meta typically takes a few hours to a few days to approve or reject the template.

7. Wait for Meta Approval

• Approval Process: Meta will review the template to ensure it complies with WhatsApp’s business messaging guidelines. During this time, you cannot use the template until it’s approved.
• Once approved, your template will be available for use in your WhatsApp automation through XpressBot.

8. Use the Approved Template

• After Meta approves the template, it will be available in your WhatsApp Bot Manager for you to use in automated workflows.
• You can now set up your form submission webhook or any other automation tool in XpressBot to trigger this approved template and send it to users after form submissions or interactions.

Here’s a refined and more detailed version of Step 3 for creating a Webhook Workflow campaign in XpressBot, including some added context to make the process clearer:

---

Step 3: Create a Webhook Workflow Campaign in XpressBot

After setting up your WhatsApp message template, the next step is to create a Webhook Workflow in XpressBot. This workflow will trigger your approved WhatsApp message when a form is submitted on your WordPress site.

1. Access the Webhook Workflow Section

• Log in to your XpressBot Dashboard.
• From the left-hand menu, navigate to Webhook Workflow. This is where you’ll create and manage automation workflows that interact with external platforms (such as your WordPress site).

2. Create a New Workflow

• Click the Create button to start a new workflow campaign.
• Workflow Name: Give your workflow a clear and descriptive name, like “WP Form Submission to WhatsApp” or something that makes it easy for you to identify.
• Select WhatsApp Account: Choose the WhatsApp account that will be sending the message. This should be the same WhatsApp Business account linked to your XpressBot dashboard.

3. Select the Message Template

• In the Message Template dropdown, select the approved WhatsApp message template you created in Step 2. This template will be sent automatically when the webhook is triggered.
• Make sure the template is appropriate for the campaign. For example, if you’re confirming a form submission, ensure the template is set up to acknowledge the user’s action (e.g., “Thank you for your submission!”).

4. Create the Workflow

• Once you’ve selected the necessary template and WhatsApp account, click Create Workflow.
• XpressBot will generate a Webhook Callback URL. This URL is critical—it allows your form submissions from WordPress to trigger the workflow and send the WhatsApp message.

5. Copy the Webhook URL

• Copy the generated Webhook Callback URL provided by XpressBot.
• Important: Do not close this window yet, as the campaign is not fully created. You will need this URL in the next steps (on your WordPress site).

6. Prepare for Integration with WPForms

• Save the Webhook URL temporarily, as you’ll need to paste it into the WPForms Webhook Add-on in the next steps.
• The Webhook URL will be used to connect your form on WordPress to the XpressBot workflow, allowing the automation to trigger when a user submits a form.

Reminder:

At this point, you have successfully created the webhook workflow and obtained the Webhook URL. But the campaign is not fully activated yet. You’ll need to integrate this URL into your WPForms configuration (next step) before the automation begins.

Step 4: Create a WP Form and Add the Callback URL

In this step, you’ll create a WP Form on your WordPress site with a phone number field, configure the Webhook integration, and add the Callback URL generated in the previous step. This setup will trigger the WhatsApp message workflow when the form is submitted.

1. Create a New WP Form

1. Go to Your WordPress Dashboard:
   • Navigate to WPForms in the left sidebar of your WordPress admin dashboard.
   • Click on Add New to create a new form.
2. Choose a Template:
   • Select a pre-built template that suits your needs (e.g., Contact Form, Registration Form, etc.).
   • If you prefer, you can create a custom form from scratch.
3. Add a Phone Number Field:
   • Drag and drop a Phone Number field from the form builder onto the form layout. This field is essential for collecting the user’s phone number, which will be used in the WhatsApp message.
   • Customize the field as needed (e.g., set validation rules for the phone number format).
4. Add Other Fields:
   • You may also want to add additional fields such as Name, Email, or Message fields, depending on the information you need to collect.

2. Configure the Webhook Integration

1. Go to Form Settings:
   • After building the form, click on the Settings tab in the WPForms form builder.
   • In the settings menu, select Webhooks.
2. Enable Webhooks:
   • Toggle the Enable Webhooks setting to On. This activates the webhook integration that will send the form data to the specified URL upon submission.
3. Add the Webhook Callback URL:
   • In the Requested URL field, paste the Callback URL you copied from the XpressBot Webhook Workflow in Step 3.
     • This URL connects your WP form submission to the XpressBot workflow, triggering the WhatsApp message.
4. Select POST Method:
   • In the Request Method dropdown, select POST. This ensures that the form data is sent via a POST request to the XpressBot URL.

3. Map Form Fields to Webhook Parameters

1. Set the Request Body Parameters:
   • You now need to map the form fields (like Name, Email, Phone, and Message) to the parameters required by XpressBot. These parameters will be used to populate your WhatsApp message template.
   • In the Request Body section, click on Add New Parameter for each of the following fields:
     • Name: Select the Name field from the form and set the key as name (or any appropriate label based on your webhook requirements).
     • Email: Add a parameter for the Email field with the key email.
     • Phone: Add a parameter for the Phone Number field with the key phone.
     • Message: If you have a Message field, add this to the request body with the key message.
   • To add more parameters, click on the + button next to the Request Body to add additional fields (e.g., if you want to include custom fields in your message template).
   Example Request Body Setup:
   • name: [Name Field]
   • email: [Email Field]
   • phone: [Phone Field]
   • message: [Message Field]
   Note: Ensure that the parameter names (like name, email, phone, and message) match the placeholders you’ve set up in your WhatsApp Message Template in XpressBot (e.g., {first_name}, {email}, {phone_number}).

4. Save the Form

1. Once you’ve configured the webhook and mapped the form fields, click Save to save the changes to your WP form.

Step 5: Send Sample Data and Map the Workflow

In this step, we’ll test the webhook by filling out the form on your WordPress site with sample data. This will allow XpressBot to capture the data and enable you to map the necessary fields to ensure your WhatsApp message is personalized and accurate.

1. Fill Out the WP Form

1. Go to Your WP Form:
   • Open the page containing the WP form you just created (the one with the phone number field and other necessary fields).
2. Fill in the Form:
   • Enter sample data into the form fields, including the Name, Phone Number, Email, and any other fields you’ve set up.
   • Submit the form to send the data to XpressBot via the webhook you configured earlier.

2. Capture the Webhook Response in XpressBot

1. Return to XpressBot Webhook Section:
   • Go back to the XpressBot Dashboard and navigate to Webhook Workflow where you created the workflow in Step 3.
2. Click on “Capture Webhook Response”:
   • In the Webhook Workflow page, click on the Capture Webhook Response button. This will allow XpressBot to receive and capture the data that was submitted through the form.
   • Upon clicking, XpressBot will immediately capture the sample data you just entered in the form (like Name, Phone Number, etc.).

3. Map the Data Fields in the Webhook Response

1. Webhook Response Mapping:
   • After capturing the data, you’ll see a list of form fields along with the raw data (like the submitted name, phone number, email, etc.).
2. Map the Phone Number Field:
   • In the Webhook Response Mapping section, find the Phone Number field in the data.
   • Click on the Phone Number field in the mapping interface and select the corresponding value from the raw data that was captured. This should be the phone number you entered in the form.
3. Map Other Variables:
   • Similarly, look for other variables or placeholders that you have in your WhatsApp Message Template (e.g., {name}, {email}, {message}).
   • For each variable in the message template, map it to the corresponding form field:
     • For Name, select the Name field from the raw data.
     • For Email, select the Email field.
     • For Message (if applicable), map it to the corresponding Message Field in the form.
4. Ensure All Variables Are Mapped:
   • Important: Every variable used in your WhatsApp message template (e.g., {first_name}, {phone_number}, etc.) should be properly mapped to the corresponding field in the form data.
   • This mapping ensures that the WhatsApp message is personalized based on the data submitted by the user.

4. Save the Campaign

1. Save the Workflow:
   • Once all fields are properly mapped, click on Save Campaign to finalize the webhook configuration.
   • This saves your workflow with the mapped fields and prepares it for full automation, ensuring that WhatsApp messages are correctly triggered with the relevant form data.

5. Test the Workflow

1. Test the Integration:
   • To make sure everything works as expected, you can test the form again. Fill out the form with new data and ensure that the WhatsApp message is sent correctly, personalized with the submitted data (e.g., phone number, name, etc.).
2. Debugging:
   • If any issues occur (e.g., missing data in the WhatsApp message), revisit the Webhook Response Mapping section to ensure all form fields are mapped correctly to the message variables.

By following these steps, you will successfully capture the sample data from your form submission, map the necessary fields to the WhatsApp message template, and save the workflow. This ensures that whenever a user submits the form, the corresponding WhatsApp message is triggered, personalized, and sent automatically.