Option 1: Form Submit
The easiest way to connect your current form to Xzazu is to use our form submit endpoint.
To submit your form to Xzazu, you need to change\add a couple of settings in your form.
Let's say there is a form on your website of which the code looks as follows:
<form action="/submitlead.php" method="post"> <label>City</label> <input type="text" name="City"> <label>Street</label> <input type="text" name="Street" /> <label>House Number</label> <input type="number" step="1" name="HouseNumber" /> <label>Birth Date</label> <input type="datetime" name="BirthDate" /> <label>Gender</label> <select multiple name="Gender"> <option>Male</option> <option>Female</option> </select> <button type="submit">Submit</button> </form>
This is a very simple form and just an example. Your form is probably more complex. The following solution should work in any form.
The first thing we need to change is the action URL of the form.
Right now it posts to
/submitlead.phpWe need to change this to:
https://interface.xzazu.com/v1/InboundLead/FormSubmit
There is an option to also submit your lead to the original URL while using the Xzazu URL. We will cover this in the advanced section of this option.
The action of your form should now look like this:
<form action="https://interface.xzazu.com/v1/InboundLead/FormSubmit" method="post">
Additionally, we need to add a couple of "hidden inputs" to the form. These are necessary to tell Xzazu what form is being posted and by whom. Also, we need to know where to send the visitor after they submitted the form.
The following inputs need to be added:
<input type="hidden" name="api_key" value="YOUR API KEY" /> <input type="hidden" name="subdomain" value="YOUR SUBDOMAIN" /> --> yourcompany.xzazu.com (only the "yourcompany" part. <input type="hidden" name="returnUrl" value="https://yoursite.com/thankyou"/> --> When Xzazu has receievd the submit, you client will be sent to this page. This should be a complete URL including your domain name.
If a lead is created or Queued in Xzazu the following parameters will be added to the return URL.
https://yoursite.com/thankyou?Status=OK&LeadId=2020184IL40315
or
https://yoursite.com/thankyou?Status=QUEUED&LeadId=2020184IL40315
You can find your API key(s) in the settings of your Xzazu under "API Keys". Please note that you need a specific API key for using the form submit URL. You can create a new API with the type "Form Post" in your Xzazu settings.
The example form should now look like this:
<form action="https://interface.xzazu.com/v1/InboundLead/FormSubmit" method="post">
<label>City</label>
<input type="text" name="City">
<label>Street</label>
<input type="text" name="Street" />
<label>House Number</label>
<input type="number" step="1" name="HouseNumber" />
<label>Birth Date</label>
<input type="datetime" name="BirthDate" />
<label>Gender</label>
<select multiple name="Gender">
<option>Male</option>
<option>Female</option>
</select>
<input type="hidden" name="api_key" value="YOUR API KEY" />
<input type="hidden" name="subdomain" value="YOUR SUBDOMAIN" />
<input type="hidden" name="returnUrl" value="https://yoursite.com/thankyou"/>
<button type="submit">Submit</button>
</form>
If you have no campaigns\workflows defined, this is all you need to connect your existing form to Xzazu.
In the next part, we will discuss specifying a vertical, campaign, and campaign version in your form.
If your form needs to submit to a specific campaign in Xzazu the following additional hidden inputs are required:
<input type="hidden" name="verticalId" value="1" /> <input type="hidden" name="campaignId" value="1" /> <input type="hidden" name="version" value="1" />
Adding the above inputs will make sure the lead ends up in the correct workflow and is distributed accordingly.
Advanced options
Submit the form to a custom URL
If you wish to additionally post the form data to an URL on your website you can do this by adding the following hidden input:
<input type="hidden" name="submitURL" value="https://yoursite.com/submitlead.php" />
If a submit URL is specified Xzazy will submit the supplied form data to this URL after the lead is created.
The submit method Xzazu should use to submit the form to your URL can be changed by adding the following hidden input to the form. The default method is to do an HTTP POST. If you need Xzazu to do an HTTP POST to your URL this input is not necessary.
<input type="hidden" name="submitMethod" value="get" />
A redirect can be returned to Xzazu on the form post to your URL. Xzazu will return the redirect URL as the return URL to the client, redirecting the client to this page.
A custom error URL
By default the Xzazu form submit endpoint will return an error if a lead could not be created, stating what the problem is. If you wish to redirect your visitor to a custom error page you can tell Xzazu to do so by including the following input:
<input type="hidden" name="errorurl" value="https://yoursite.com/error.php" />
Xzazu will append an error code to the error URL like so:
https://yoursite.com/error.php?XErrrorCode=220
Possible error codes:
Option 2: JavaScript
This article describes the process of integrating an existing HTML form with Xzazu. Integrating an 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://xzazu.blob.core.windows.net/cdn/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>