Navigate To:
1. Landing Page Form Integration With JS SDK
2. Enabling OTP Verification/Captcha Verification
4. Adding Limitations To The Form Submissions
5. Adding Multiple Project Options
1. Landing Page Form Integration
I. To integrate the 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: SPOC at ACRM team will share
- env: 'production'
- host: SPOC at ACRM team will share
- channel_name: SPOC at ACRM team will share
- campaign_id: SPOC at ACRM team will share
| 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 landing page 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: SPOC at ACRM team will share
- env: 'production'
- host: SPOC at ACRM team will share
- channel_name: SPOC at ACRM team will share
- 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.
IV. 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.
V. Add the updated primary function inside the head tag of the HTML page of your website/application.
VI. Test the landing page 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 Limitation To The Form Submission
You have to restrict lead submission to one per-user session to avoid lead duplication. You can use a combination of JavaScript and server-side logic.
```html
<!DOCTYPE html>
<html>
<head>
<title>Form Submission</title>
</head>
<body>
<form id="lead-form" method="post" action="">
<!-- Form fields: name, email, phone -->
<!-- Submit button -->
<button id="submit-button">Submit</button>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('lead-form');
const submitButton = document.getElementById('submit-button');
let isSubmitting = false;
const debounce = (func, delay) => {
let timer;
return function() {
if (!isSubmitting) {
isSubmitting = true;
func.apply(this, arguments);
timer = setTimeout(() => {
isSubmitting = false;
}, delay);
}
};
};
const submitForm = () => {
// Your form submission logic here
// For example: form.submit();
console.log('Form submitted');
};
submitButton.addEventListener('click', debounce(submitForm, 500));
});
</script>
</body>
</html>
```
Note: This code block only uses the debounce mechanism to restrict lead submission to only one within a 500-millisecond time frame. Make sure to replace the `console.log('Formsubmitted')` line with your actual form submission logic. |
5. 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 them after the previous one in curly brackets separated by a comma.
6. 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.
7. 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.
| Note: Always add the correct API Key, Channel Name, & Campaign ID shared by SPOC at ACRM to avoid an Invalid Response error. |
VII. In case of any errors, please take a screenshot, & share it with our team.
Still, finding it difficult? Connect with our team to understand the whole process.
8. Integration Response
| Status Code | Response | Message |
| 400 | Failure | Invalid phone number Error: “Bad Request” |
| 400 | Failure | Invalid key and channel combination! Error: “Bad Request” |
| 400 | Failure | Invalid request- Mandatory key ‘Purpose’ missing Error: “Bad Request” |
| 400 | Failure | Invalid request- max_budget should be greater than min_budget Error: “Bad Request” |
| 401 | Failure | Authentication Failed |
| 403 | Failure | Invalid API Key |
| 500 | Failure | Server Error |
| 200 | Success | Successfully added lead to the system |
| 200 | Success | Failed adding lead to the system |
For any support on our products, please reach out to [email protected]
For any feedback, please reach out to [email protected]
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article