Navigate To:
1. Lead Form Integration With JS SDK
2. Enabling OTP Verification/Captcha Verification
4. Adding Multiple Project Options
1. Lead Form Integration
I. To integrate the lead form or lead generation form from Google Landing Page/Form/Microsite, you have to copy the primary function by visiting the JS SDK on GitHub.
SS 1: JS SDK GitHub repository.
II. Scroll down to the primary function to copy the code script as shown in the image SS below. Alternatively, you can also copy the code script mentioned below.
SS 2: Copy the Primary Function code script for Web-Side Integration.
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div id="anarock-form"></div>
<script>
var form_container = document.getElementById('anarock-form')
window.anarockForms = [{
container: form_container,
key: "API_KEY",
channel_name: "CHANNEL_NAME",
campaign_id: "CAMPAIGN_ID",
env: "production",
options: {} // options as described below
}]
</script>
<script type="text/javascript" src="https://s3.ap-south-1.amazonaws.com/anarock.misc/form.js" async defer></script>
</body>
</html>III. Update the following key values shared by our team to the primary function.
- api_key/auth_key
- env
- host
- channel_name
- campaign_id
| Note: The API key is used for authentication to avoid spam, and the campaign ID is used for mapping & tracking the lead. Hence, setting up the right API key & campaign ID is very important. |
SS 3: Update the highlighted key values in the primary function.
IV. Test the lead form by submitting a test lead. If the test is successful, you will get the lead ID, and if it shows any errors, please share the screenshot with our team.
Check the steps mentioned in the ‘Testing Lead Integration’ section.
2. Enabling OTP verification or Captcha Verification
I. Copy the code script of the primary function as shown in the image SS below. Alternatively, you can also copy the code script mentioned below.
SS 1: Copy the Primary Function code script for Web-Side Integration.
<!DOCTYPE html>
<html lang="en-us">
<head>
</head>
<body>
<div id="anarock-form"></div>
<script>
var form_container = document.getElementById('anarock-form')
window.anarockForms = [{
container: form_container,
key: "API_KEY",
channel_name: "CHANNEL_NAME",
campaign_id: "CAMPAIGN_ID",
env: "production",
options: {} // options as described below
}]
</script>
<script type="text/javascript" src="https://s3.ap-south1.amazonaws.com/anarock.misc/form.js" async defer></script>
</body>
</html>II. Update the following key values shared by our team to the primary function.
- api_key/auth_key
- env
- host
- channel_name
- campaign_id
III. Scroll down to the parameter section on the JS SDK page, and copy the function as required.
SS 2: Copy the functions as required and add them to the primary function as shown in the below SS.
4. Add the required function as shown in the below screenshot.
SS 3: Make the key values ‘True’ in the primary function.
Before adding the parameters, please ensure that OTP verification & captcha is enabled in mandate settings.
| Note: You can also add various other fields under the ‘options’ parameter. |
SS 4: Keys for other possible parameters.
5. Add the updated primary function inside the head tag of the HTML page of your website/application.
6. Test the lead form by submitting a test lead. If the test is successful, you will get the lead ID, and if it shows any errors, please share the screenshot with the Anarock team.
Check the steps mentioned in the ‘Testing Lead Integration’ section.
3. Changing Custom Host
By default, Anarock servers will be the host. However, if the Anarock setup is deployed in your local server, then you can change the host by adding your domain as shown in the screenshot below.
SS 1: You can change the host by updating the ‘host’ in the option key value.
4. Adding Multiple Projects Option
In the case of multiple projects, you can add a dropdown showing all your listed projects by adding the ‘projects’ parameter in the options of the code script as shown below.
SS 1: In the above code script, you can add the name of your project & campaign ID respectively. You can also add multiple projects by simply adding it after the previous one in curly brackets separated by a comma.
5. Updating The CSS
Developers can easily change the look & feel of the form as per their branding guidelines by CSS modification by overriding classes in your code.
6. Testing The Integration
I. To test the integration, run the updated function in any browser.
II. Add all the fields & ‘Inspect’ the page.
SS 1: Right-click on the browser page & click inspect.
III. Go to the ‘Network’ tab in the ‘Inspect’.
SS 2: After filling in all the details, click on the Network tab
IV. Click on the ‘Submit’ button in the lead form.
V. If everything is integrated correctly, then you will get the lead ID in the ‘Response’ section under the ‘Network’ tab.
SS 3: If the integration is done correctly, you will receive the lead ID in the response section.
VI. And if there are any errors, then in the ‘Response’ section under the ‘Network’ tab, you will get ‘Invalid Response’.
SS 4: You will see an ‘invalid response’ in the response section in case of any error.
VII. In case of any errors, please take the screenshot, & share it with our team.
Still, finding it difficult? Connect with our team to understand the whole process.
For any support on our products, please reach out to support@anarock.com
For any feedback, please reach out to tech-feedback@anarock.com