Bring your own form

This article describes the process of integrating an existing html form with Xzazu. Integrating a html form with Xzazu is done using a simple to use Javascript client library. This library can be attached to any html form and sends the form data to Xzazu when the form is submitted.

Step 1

Include the following Javascript library on the page where the form is located.

<script src="https://www.xzazu.com/javascriptapiclient/xzazuinboundleadclient.js"></script>

The file can be included in the header or footer of the page containing the form you wish to integrate.

Step 2

Define the settings for the integration.

<script>

var xzazuOptions = {

            // The name of the form you wish to integrate. The form name can be found in the name attribute of the form tag.

            // Example: <form name="Form1">...</form>

            formName: "FORMNAME",

            // Your Xzazu API key. The api key(s) can be found in the API section of your xzazu settings.

            // https:/{yoursubdomain}.xzazu.com/Settings/ApiKey/List

            // We recommend creating an API key for every form so you can manage your integrations seperately.

            apiKey: "YOUR API KEY",

            // The first part of your Xzazu domain.

            // Example: https://company.xzazy.com => company

            subdomain: "YOUR-SUBDOMAIN",

            // Optional

            // If you have campaigns defined in Xzazu you can link the form to a specific campaign. If you don't have any campaigns defined or if you are not

            // planning on using campaigns in Xzazu you can remove this setting.

            campaignId: YOUR CAMPAIGN ID (example: 1),

            // Remove if not using campaigns

            // Required if you have specified a campaign to integrate with. This version of the campaign to integrate with should be supplied.

            versionId: YOUR CAMPAIGN VERSION (example: 1),

            // Optional if Campaigns are not used

            // If you have defined Verticals in your Xzazu settings you can provide the Vertical ID here.

            verticalId: YOUR VERTICAL ID (example: 10001)

          }

</script>

Step 3

To initiate the actual integration you need to create an instance of the XzazuInboundLeadClient and supply it with the options specified above.

<script>

   var client = new XzazuInboundLeadClient(xzazuOptions);

</script>

Make sure you create the client after the script in step 1.

After you initiated the client you call the CreateLeadOnSubmit method. This method attaches itself to the submit event of your form and will create an Inbound Lead in Xzazu when the form is submitted. After the lead is created the form is submitted just as it would be before the integration with Xzazu. Your existing submit actions will not be changed or deleted.

<script>

   var client = new XzazuInboundLeadClient(xzazuOptions);

   client.createInboundLeadOnSubmit();

</script>

Additional options

Field mappings

By default the form fields will be submitted to Xzazu using the name specified in de name attribute of the form control.  For example <input type=”text” name=”FirstName”> will be submitted to Xzazu as a string with the field name: FirstName. You can change this behavior by supplying field mappings in the Xzazu Options object.

<script>

        var xzazuOptions = {

           

            formName: "FORMNAME",

            apiKey: "YOUR API KEY",

            subdomain: "YOUR-SUBDOMAIN",

            campaignId: 12,

            versionId: 1,

            verticalId: 10004,

`      // the field with name: "firstName" will be submitted to Xzazu as field "First Name"  etc.

            mappings: {

                firstName: "First Name",

                lastName: "Last Name",

                commpanyName: "Company Name",

                email: "Email",

                phoneNumber: "Phone Number"

            }

        }

        var client = new XzazuInboundLeadClient(xzazuOptions);

        client.createInboundLeadOnSubmit();

  </script>

Source

You can supply source information with the Inbound Lead by adding a source property in the Xzazu options.

<script>

        var xzazuOptions = {

            formName: "FORMNAME",

            apiKey: "YOUR API KEY",

            subdomain: "YOUR-SUBDOMAIN",

            campaignId: 12,

            versionId: 1,

            verticalId: 10004,

              // the source info will be added to the lead

            source: "Xzazu demo form"            }

        }

        var client = new XzazuInboundLeadClient(xzazuOptions);

        client.createInboundLeadOnSubmit();

</script>

Partner contract

If the form is used by one of your affiliate partners you can specify the Partner Contract in the Xzazu settings. The inbound lead will be linked to the specified partner contract and commission will be granted. 

<script>

        var xzazuOptions = {

            formName: "FORMNAME",

            apiKey: "YOUR API KEY",

            subdomain: "YOUR-SUBDOMAIN",

            campaignId: 12,

            versionId: 1,

            verticalId: 10004,

            // the partner contract id

            partnerContractId: 25

        }

        var client = new XzazuInboundLeadClient(xzazuOptions);

        client.createInboundLeadOnSubmit();

    </script>