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

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

Navigate To:

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

2. Adding Limitations To The Form Submissions

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 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 support@anarock.com

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