getting Started

Overview

The Wix Form Webhook source can synchronize the submission events of Wix Form-based forms to the TTO CDP.

Configuration parameters

WIX Form Types

1. General Forms

Features: These are generally forms displayed directly on the page, or viewed in a non-lightbox area of the Wix web page editor.

Input fields or options within a form can be read and written using Wix's Velo page code.

2. Forms embedded in lightboxes (lightbox)

Features: Generally, clicking a button on the page does not change the page URL, or it can be viewed in the lightbox section of the Wix web page editor.

Input fields or options within a form cannot be read or written via Wix's Velo page code.

Source Configuration Guide

Configure custom program code

1. Go to WiX admin panel settings - Development & Integration - Custom Code

2. Select "Add Custom Code," set the following code, define the application scope, select "Place Code at the Beginning of This Article," and apply it.

 //在此貼上代碼片段<script> (function() { // 从Cookie 获取_ttoclid const getCookieValue = (name) => { console.log('啓動') const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)')); return match ? decodeURIComponent(match[2]) : null; }; const cdpid = getCookieValue('_ttoaid'); if (cdpid) { const url = new URL(window.location.href); const params = new URLSearchParams(url.search); // 设置ttoclid 参数params.set('cdpId', cdpid); url.search = params.toString(); // 更新URL history.replaceState({}, '', url); console.log('已从Cookie 设置cdpId:', cdpid); } })(); </script> 

Configure the CDP ID field in the WiX Form ( not required for lightbox forms ).

1. Create a new text field in Wix Form, referring to the style shown in the image.

2. Hide the input field in the bottom right corner of the page, and remember its ID (#input5).

3. Select the page in the code on the left. Note: masterPage.js is a shared script for all pages. If all pages use the same table and the field numbers are the same, you can set it here. Otherwise, it is recommended to set the script on each page individually.

4. Paste the code into the code below, noting that you should replace `ID` in `$w("#input5")` with your actual ID.

 //此行代碼複製到onReady外代碼區頂部，用以導入模塊import wixLocation from "wix-location"; // 以下代碼複製到onReady中，當頁面加載時，檢查ttoclid 查詢參數const query = wixLocation.query; if (query.cdpId) { console.log('預設cdp id') $w("#input5").value = query.cdpId; } Configure the source according to the WiX Form column. //此行代碼複製到onReady外代碼區頂部，用以導入模塊import wixLocation from "wix-location"; // 以下代碼複製到onReady中，當頁面加載時，檢查ttoclid 查詢參數const query = wixLocation.query; if (query.cdpId) { console.log('預設cdp id') $w("#input5").value = query.cdpId; } 

1. CDP ID key:

   This field serves as the CDP ID (anonymous ID) value in the event data. Since the lightbox form does not require setting the CDP ID field in the Wix form (as it is a required parameter), it can be set to 'CDP ID' by default when configuring the lightbox form.

2. Traits Set:

   In the Wix website editor, locate the corresponding Wix Form and view the submission field names for each field. For example , Email=email, Phone=phone . Configure the mapping between the form submission field names and the traits field names accordingly. Note that traits fields are generally for personal information and include fields as shown in the image below. Do not set irrelevant fields in the form.

Tracking Guide

1. Automated access to the Wix Studio backend

2. Click the "Create New Automation Function" button in the upper right corner.

3. Choose to start from the beginning

4. The first option, "Form submitted," specifies the corresponding Wix form.

5. The second option, `send HTTP request`, requires you to enter the webhook address of the configured source.