Wix Forms Integration using Wix CRM Backend Events in Velo

Follow this guide to learn how to connect your Wix Powered website forms to Sembark Travel CRM using backend event and velo.

Wix Introduction

Wix.com is a popular website building platform. It provides an intuitive website builder along with advanced business solutions and powerful SEO tools. If you have a website or landing page, created using Wix, you are probably using Wix Form to capture leads from your website or landing pages. If so, you can easily integrate these Wix Form submission with Sembark Travel CRM using Velo Backend Events.

Velo by Wix

Velo by Wix is a full-stack development platform which you can use to add custom functionalities (using JavaScript) to your Wix site such as Payments Gateways, Google APIs etc. Velo is already a part of your Wix site development process so you don't need to install it.

Wix CRM Back Events

Wix CRM Back events are fired on your site's backend when certain events occur related to site contacts such as Contact Creation, Form Submission etc. We will use one of these events i.e. onFormSubmit Event to write event handler that will send the submission data to Sembark APIs.

We will update the backend events.js file to customize the form submission behaviour. You might already have an events.js file in your backend folder. If not, please follow the documentation on wix and add an events.js file on Backend folder.

Integration Step

Now, follow these step to integrate Wix Form with your Sembark Travel CRM.

Modify events.js

Once you have the event.js file in your Backend folder, we just need to add the following code to this file.

/** Place this code in the events.js file of your site's Backend section. */

// this MUST be a part of top imports if you already have other imports
import { fetch } from "wix-fetch";

// handle the Form Submissions
export function wixCrm_onFormSubmit(event) {
  const formName = event.formName;

  // Get the submission data from the event
  const submissionData = event.submissionData;

  // create a key-value ({ fieldName: fieldValue}) pair of submitted data
  const payload = submissionData.reduce((data, { fieldName, fieldValue }) => {
    data[fieldName] = fieldValue;
    return data;
  }, {});

  // now send the data to Sembark Travel CRM's Leads API
  fetch("https://api.sembark.com/integrations/v1/trip-plan-requests", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      Authorization: "Bearer <TOKEN_HERE>", // TODO: UPDATE THE TOKEN
    },
    body: JSON.stringify(payload),
  })
    .then((httpResponse) => {
      if (httpResponse.ok) {
        return httpResponse.json();
      } else {
        return Promise.reject("Fetch did not succeed");
      }
    })
    .catch((err) => console.log(err));
}

Update Access Token

Now we need to update the access token (<TOKEN_HERE>) in the above code. If you already have a token, update the <TOKEN_HERE> otherwise, generate a new token and update the above code.

FAQs

1. Customize fields mapping

Sembark's Leads API expects the data in a particular key-value pairs as shown in the example below (ignore casing).

{
  "name": "Guest Name",
  "phone_number": "999009900",
  "email": "guest@example.com"
}

On you Wix Forms, you might have different names for fields in the Forms e.g. Full Name for the guest's name or Email Address for the guest's email. Sembark API will capture all these fields but data mapping will be incorrect on your CRM dashboard e.g. Guest's name will be set to unknown. To fix it, we need to map the Full Name to the name field before sending it to Sembark API.

// .... existing code ...
const payload = submissionData.reduce((data, { fieldName, fieldValue }) => {
  data[fieldName] = fieldValue
  return data
}, {})

+ function mapKey(from, to) {
+   payload[to] = payload[from]
+   delete payload[from]
+ }
+
+ // Assuming we have 'Full Name' and "Email Address" fields in our Form
+ // Let's map them to their respective keys in Sembark Payload
+ mapKey('Full Name', 'name')
+ mapKey('Email Address', 'email')
+ // ... add more mapping based on your Wix Form Fields
+ // ...
+ // ... existing code ...

2. Add More Data Fields

You might have some data fields which are NOT part of your Wix Forms but you want to send them to Sembark APIs e.g. Package ID, Destination, GTags, Season, Category etc. You can easily attach these new data fields to payload before sending to Sembark APIs.

// .... existing code ...
const payload = submissionData.reduce((data, { fieldName, fieldValue }) => {
  data[fieldName] = fieldValue
  return data
}, {})

+ // Let's add a Destination field to payload before sending
+ payload['destination'] = 'Rajasthan'
+ // ... add more fields as per requirements