--- title: Wix Forms Integration using Events in Velo | Integrations description: Learn how to connect your Wix CRM Backend to Sembark Travel CRM using backend event in Velo. date: 2023-12-06 --- # Wix Forms Integration using Events in Velo 2023-12-06 ยท by Sudhir Mitharwal Learn how to connect your Wix CRM Backend to Sembark Travel CRM using backend event 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](https://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](https://support.wix.com/en/article/wix-forms-an-overview) 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](https://www.wix.com/velo/reference/wix-crm-backend/events/introduction). ::: note NodeJs or JavaScript Knowledge You can follow along this guide if you don't have coding skill but to customize the behaviour in your own ways, this guide expects some NodeJs / JavaScript coding skills from you. ::: ### Velo by Wix [Velo by Wix](https://www.wix.com/velo) 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](https://www.wix.com/velo/reference/wix-crm-backend/events/introduction) 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](https://www.wix.com/velo/reference/wix-crm-backend/events/onformsubmit) to write event handler that will send the submission data to Sembark APIs. We will update the [backend events.js](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/velo-backend-events) 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](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/velo-backend-events) 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. ```js /** 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 ", // 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 (``) in the above code. If you already have a token, update the `` otherwise, [generate a new token](https://sembark.com/travel-software/apis/authentication/#generate-token) and update the above code. ## FAQs ### 1. Customize fields mapping [Sembark's Leads API](https://sembark.com/travel-software/apis/trip-plan-requests/#request-body) expects the data in a particular key-value pairs as shown in the example below (ignore casing). ```json { "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. ```diff // .... 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. ```diff // .... 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 ``` ## Integrations Current page: [Wix Forms Integration using Events in Velo](https://sembark.com/travel-software/integrations/wix-forms-integration-using-crm-backend-events-in-velo.md) ### Get started * [Leads Integration](https://sembark.com/travel-software/integrations/leads-integration.md) ### WordPress form plugins * [WordPress Hustle Popup Contact Leads Integration](https://sembark.com/travel-software/integrations/wordpress-hustle-popup-contact-leads-integration.md) * [WordPress WPForms Contact Leads Integration](https://sembark.com/travel-software/integrations/wordpress-wpforms-contact-leads-integration.md) * [WordPress Quforms Leads Integration](https://sembark.com/travel-software/integrations/wordpress-quform-leads-integration.md) * [WordPress MetForms Leads Integration](https://sembark.com/travel-software/integrations/wordpress-metform-leads-integration.md) * [WordPress Formidable Forms Leads Integration](https://sembark.com/travel-software/integrations/wordpress-formidable-forms-leads-integration.md) * [WordPress FluentForms Leads Integration](https://sembark.com/travel-software/integrations/wordpress-fluentform-leads-integration.md) * [WordPress Elementor Contact Forms Leads Integration](https://sembark.com/travel-software/integrations/wordpress-elementor-contact-form-leads-integration.md) * [WordPress Contact Forms API Integration](https://sembark.com/travel-software/integrations/wordpress-contact-forms-api-integration.md) ### Form builders * [Google Form Leads Integration](https://sembark.com/travel-software/integrations/google-form-leads-integration.md) * [Wix Forms Integration using Events in Velo](https://sembark.com/travel-software/integrations/wix-forms-integration-using-crm-backend-events-in-velo.md) ### Chatbots * [BotPenguin Chatbot Leads CRM Integration](https://sembark.com/travel-software/integrations/botpenguin-chatbot-leads-crm-integration.md)