Lead Capture Integration

Integrating lead capture functionality into your website allows for seamless collection of lead data through Rechat's API. This guide provides step-by-step instructions and a sample code snippet to facilitate this process.

Requirements

Before proceeding, ensure you have:

1. URL Endpoint: Contact Rechat's support team to obtain your unique endpoint URL. sample: https://api.rechat.com/leads/channels/dc8bf004-6897-1231-bd0f-8837b426602a/webhook

2. Web Page: A web page where the lead capture form will be hosted.

3. Basic Knowledge: Familiarity with HTML and JavaScript

To obtain your URL endpoint, contact our support team.

Data Structure

The Rechat API accepts lead data in JSON, XML (LTS format), or URL-encoded formats. For this example, we'll use a JSON payload with the following potential fields:

• first_name: string

• last_name: string

• email: string

• phone_number: string

• tag: string[]

• lead_source: string

• note: string

• address: string

• referer_url: string

• listing_number: string

• agent_emails: string[]

• source_type: string (required)

Note: All fields are optional with this exception of source_type, which must be specified.

HTML Form Setup

Create a form on your webpage. This form should include input fields corresponding to the data structure provided by Rechat.

Example HTML form:

htmlCopy code<form id="leadCaptureForm">
    <input type="text" id="firstName" placeholder="First Name">
    <input type="text" id="lastName" placeholder="Last Name">
    <input type="email" id="email" placeholder="Email">
    <input type="text" id="phoneNumber" placeholder="Phone Number">
    <!-- Include other fields as needed -->
    <button type="submit">Submit</button>
</form>

JavaScript for Form Submission

Use JavaScript to handle form submission and send data to the Rechat API.

Example JavaScript code:

javascriptCopy codedocument.getElementById('leadCaptureForm').addEventListener('submit', function(event) {
    event.preventDefault();

    // Construct the payload
    var payload = {
        first_name: document.getElementById('firstName').value,
        last_name: document.getElementById('lastName').value,
        email: document.getElementById('email').value,
        phone_number: document.getElementById('phoneNumber').value,
        // Include other fields as needed
    };

    // Send the payload to Rechat API
    fetch('https://api.rechat.com/leads/channels/dc8bf004-6897-4d7b-bd0f-8837b426602a/webhook', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(response => {
        if (response.status === 204) {
            console.log('Lead submitted successfully');
            // Handle successful submission (e.g., display a thank you message)
        } else {
            console.error('Failed to submit lead');
            // Handle errors (e.g., display an error message)
        }
    })
    .catch(error => console.error('Error:', error));
});

Server-Side Considerations

If your website requires additional server-side processing or if you prefer to keep API keys confidential, you may want to handle the API request on the server side. In this case, modify your server's endpoint to accept form submissions and forward the data to Rechat's API.

4KB

LeadCapture.html

Sample HTML page