Landing Page: Type#1: Client-Side With JS Form SDK/Submit SDK

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


Navigate To:

1. Landing Page Form Integration With JS Form SDK/Submit SDK

2. Adding Limitations To The Form Submissions

3. Enabling OTP Verification

4. Testing The Integration

5. Integration Response



1. Landing Page Form Integration


I. To integrate the lead generation form from Google Landing Page/Form/Microsite, copy the primary function by visiting the Submit Lead JS SDK on GitHub.

SS 1: Submit Lead JS SDK Github repository.


II. Copy the primary function and add it inside the head tag of the HTML page of your website.

SS 2: Copy the Primary Function code script for Client-Side Integration.


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. please share the screenshot with our team. 


Check the steps mentioned in the ‘Testing Lead Integration’ section. 



2. 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.




3. Enabling OTP Verification  {OPTIONAL}

I. To enable OTP verification, contact our team to activate it from the dashboard/backend.


II. Copy the ‘requestOTP’ function from the Submit Lead JS SDK and paste it inside the head tag of the HTML page of your website.

SS 1: Request OTP function code script for Client-Side Integration


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


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. 


4. 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. You will get the lead ID  in the ‘Response’ section under the ‘Network’ tab if everything is integrated correctly.

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.




5. 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