Landing Page: Type#2: Web-Side With JS SDK

Modified on Thu, 19 Oct, 2023 at 2:05 PM


Navigate To:

1. Landing Page Form Integration With JS SDK

2. Enabling OTP Verification/Captcha Verification

3. Changing Custom Host

4. Adding Limitations To The Form Submissions

5. Adding Multiple Project Options

6. Updating The CSS

7. Testing The Integration

8. Integration Response



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 CodeResponseMessage
400Failure

Invalid phone number

Error: “Bad Request”

400Failure

Invalid key and channel combination!

Error: “Bad Request”

400Failure

Invalid request- Mandatory key ‘Purpose’ missing

Error: “Bad Request”

400Failure

Invalid request- max_budget should be greater than min_budget

Error: “Bad Request”

401Failure

Authentication Failed

403Failure

Invalid API Key

500FailureServer Error
200Success

Successfully added lead to the system

200Success

Failed adding lead to the system






For any support on our products, please reach out to support@anarock.com


For any feedback, please reach out to tech-feedback@anarock.com


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article