How can we help?

Cordial JavaScript Listener with webforms

Overview

With webforms you can create lightboxes and other types of widgets that contain HTML forms. When a website visitor submits one of your forms, the data can be sent to Cordial. To import this data into Cordial, the Cordial JavaScript Listener must be installed on your website.

To use webforms, you must request to have the feature activated in your account. Please contact your Client Success Manager to start using webforms.

Add custom JS code snippet to webforms

The following instructions show you how to add a custom JavaScript code snippet to your Web Form's account that serves to transfer lightbox form data into Cordial. These instructions assume that the Cordial JavaScript Listener is already installed on your site.

1. Log in to your webforms account at https://lightbox.cordial.com.

2. Navigate to the Custom JavaScript section using the drop down menu located at the top right of the administrative interface.

3. Click Add New Custom Javascript Snippet.

4. Toggle the snippet to ON by clicking the OFF button.

5. Choose After Submit in the Event Trigger dropdown menu.

6. Leave the Include Box IDs CSV and Exclude Box IDs CSV input boxes empty so that the code snippet will run on all lightboxes. 

To limit form data capturing to certain lightboxes, you can enter specific lightbox IDs to exclude or include.

7. Add this function to the script block.

In order to update a Cordial contact attribute via webforms, it is necessary to flag the attribute as being modifiable by JavaScript. This article explains how to allow unauthenticated modifications to an attribute.

8. Click Save ALL Snippets & Publish QA.

9. Test your lightbox submissions and verify that everything is working as expected.

10. Publish the custom javascript snippet by clicking Save ALL Snippets and Publish Live.

11. This code will first access the email address entered by the visitor in order to identify the contact within Cordial. It will then submit a custom lightbox_submitted event to Cordial with the following information:

  • All data inputs from the lightbox.
  • Information about the lightbox, such as lightbox name and ID.
  • Location information such as city, state, country.
  • Device and Browser information.
  • How many pages were visited before submitting the form.
  • First date the user accessed the site.

Comments

1 comment

  • Comment author
    Nick Shippers

    Please expand documentation on customizing the following or any fields that would need adjustment before putting into QA:

    data['my_list_name'] = true;
    0

Please sign in to leave a comment.