getting Started

Overview

Exabloom Webhook sources synchronize website forms back to TTO CDP by configuring Webhook workflows.

Exabloom form synchronization back to CDP

I. Configuring the Exabloom repository

The Exabloom repository requires no additional parameters to be set; simply create and enable it. Creating the repository beforehand can be used to verify webhook request logs.

  1. Set the mapping between the lead stage ID and the event.

Example, concatenated mapping, comma-separated: 96de31a8-6a96-408c-be7c-adee82553822=QualifiedLead,1d434c77-12b8-4f46-bfbb-8f49c81b71b8=RequestQuote,901ff546-79a8-4942-be2b-c5d434db14cd=ConvertedLead

  1. Enter the currency in the source settings, for example, Hong Kong Dollar (HKD) or Singapore Dollar (SGD).

  2. The amount field key is a custom amount field in the lead info; refer to the setup process below.

II. Adding a hidden CDP ID field to Exabloom forms

  1. Locate the form that needs to be returned on the website, view the element, and obtain the form ID.

  1. Find the corresponding form in the Exabloom backend.

  1. Add a hidden CDP ID field to the form. Note 1: Check "Initially hide". Note 2: Set the query key to cdp_id.

    After configuration, the form will initially set the CDP ID field to the value of the URL query parameter cdp_id.

  1. Save the form.

III. Modify the Exabloom form embedding code

Exabloom forms offer two ways to embed them in a website.

  1. If the client's website uses embedded JavaScript, this document does not currently support it; please contact the development team.

  2. If the client's website is embedded in an iframe, find the section in the client's website backend where you add Embed Code , and add the following code below it. Note that the src line in the <iframe> tag needs to be deleted, and the ▲ area should be replaced with the exabloom form ID.

 <script> (function() { function getVal() { const match = document.cookie.match(new RegExp('(^| )_ttoaid=([^;]+)')); if (match) return match[2]; return new URLSearchParams(window.location.search).get('_ttoaid'); } console.log(); const ttoaid = getVal(); let url = "https://form.exabloom.com/form/▲▲▲▲▲▲▲▲"; if (ttoaid) { url += (url.includes('?') ? '&' : '?') + 'cdp_id=' + encodeURIComponent(ttoaid); } const iframe = document.getElementById('exabloom-form-▲▲▲▲▲▲▲▲'); iframe.src = url; if (window.iFrameResize) { iFrameResize({ log: false }, '#exabloom-form-▲▲▲▲▲▲▲▲'); } })(); </script>

Example:

The source code allows you to retrieve the Exabloom form ID from the end of the src and id fields.

 <iframe style="width: 100%; height: 100%; border: none;" src="https://form.exabloom.com/form/OSxW3uCpIOsGzCBcDy" id="exabloom-form-OSxW3uCpIOsGzCBcDy" data-height="830" data-layout="{'id':'INLINE'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-layout-iframe-id="inline-C52PUGMdCFGG1CXZy" > </iframe> <script src="https://service.exabloom.com/js/iframe-resizer.js"></script>

After modification, note that the src attribute under the iframe has been removed.

 <iframe style="width: 100%; height: 100%; border: none;" id="exabloom-form-OSxW3uCpIOsGzCBcDy" data-height="830" data-layout="{'id':'INLINE'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-layout-iframe-id="inline-C52PUGMdCFGG1CXZy" > </iframe> <script src="https://service.exabloom.com/js/iframe-resizer.js"></script> <script> (function() { function getVal() { const match = document.cookie.match(new RegExp('(^| )_ttoaid=([^;]+)')); if (match) return match[2]; return new URLSearchParams(window.location.search).get('_ttoaid'); } console.log(); const ttoaid = getVal(); let url = "https://form.exabloom.com/form/OSxW3uCpIOsGzCBcDy"; if (ttoaid) { url += (url.includes('?') ? '&' : '?') + 'cdp_id=' + encodeURIComponent(ttoaid); } const iframe = document.getElementById('exabloom-form-OSxW3uCpIOsGzCBcDy'); iframe.src = url; if (window.iFrameResize) { iFrameResize({ log: false }, '#exabloom-form-OSxW3uCpIOsGzCBcDy'); } })(); </script>

IV. Setting up the Exabloom Webhook Workflow

  1. Select the store with form data, then click New workflow in Workflows.

  1. Select the trigger, select Form Submitted, select the form, and save.

  1. Add the next workflow node, select Webhook, and enter the source URL in the URL field.

  1. Configure Payload

    Click the small tab in the upper left corner to select and add form fields. The Form Submission column corresponds to each field in the form. 

 //下方列出字段僅作舉例，在"" 内選擇替換爲小標簽内選擇的字段{ "email": "", "phone": "", "cdp_id": "", "location": "", "first_name": "" }

Note: For form fields containing characteristic fields such as name, phone number, phone number, and email, please set them to the following standard names. The key for the cdp id field is fixed to cdp_id.

For example , email, phone, and first_name in 2 all belong to the following category:

  1. For each store that needs to track changes in contact and prospect stages, three workflows need to be set up.

Create a contact feedback (with the first message)

Publish and save

Create a lead, create a postback, publish, and save.

For Lead stage change workflows, first create a custom field to save the quotation amount. Before changing the Lead to the stage corresponding to the quotation, set the amount; otherwise, the return will fail.

Before changing the lead's stage to represent a purchased stage, please set the amount first; otherwise, please re-trigger the offer event for a stage without an amount, as it will be ignored by the source.

  1. Configuration complete, save. Submit a form on the website to test the entire process.

V. Embedded Points

The document is as follows:

https://doc-service-ui.apps.v8eq.hk.topkee.top/docs/mh286c4z3mev/share