Lead Capture Integration

Integrating lead capture functionality into your website allows for seamless collection of lead data into Rechat's CRM. This guide provides step-by-step instructions and sample code snippets to facilitate this process in two ways: using the Rechat API directly, or by leveraging the Rechat SDK.

Requirements

Before proceeding, ensure you have:

  1. Lead Channel: This will serve as both an endpoint identifier and an authentication key for lead capture in the form of https://api.rechat.com/leads/channels/{lead_channel}/webhook. (See How to get your Lead Channel ID for details).

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

  3. Basic Knowledge: Familiarity with HTML and JavaScript.

How to get your Lead Channel ID

Navigate to the People Center from anywhere in Rechat by clicking on People in the sidebar.

Rechat landing page dashboard with People highlight in the left-hand sidebar.

Click on Lead Routing in the upper right-hand corner.

People Center with pointer hovering over "Lead Routing" button. Tooltip reads Manage lead sources, rules, and routing settings.

For a given route, click Connect Source located in the Actions column.

Lead Routing interface with Connect Sources button highlighted.

The Connect Sources panel will open. Click "Other sources (website, etc.) to expand.

Connect sources panel with other sources section expanded.

Click to copy your Lead Channel ID. This will serve as both an endpoint identifier and an authentication key for lead capture.

Lead route connect sources panel with Lead Channel field highlighted.

Note: Each Route you define will have a unique Lead Channel ID. You can learn more about Lead Routing in our Lead Routing help documentation.

Integration Using the Rechat API

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:

<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:

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

Integration Using the Rechat SDK

The Rechat SDK JavaScript library (@rechat/sdk) simplifies lead capture by providing pre-built functions for submitting leads directly from the browser to the Rechat CRM (as well as additional capabilities you can explore in the Rechat SDK documentation).

Installation and Setup

The Rechat SDK provides UMD loading, making it easy to use everywhere.

You can install it locally via npm:

npm install @rechat/sdk

Or you can include it directly:

<script src="https://unpkg.com/@rechat/sdk@latest/dist/rechat.min.js" type="text/javascript"></script>

To get started, you simply initialize the SDK with the Sdk constructor:

const sdk = new Rechat.Sdk()

Example with sdk.Leads.capture()

In this simple example, we'll initialize the SDK, provide our lead_channel ID, and capture a lead using the sdk.Leads.capture() method.

Remember that the lead_channel serves as both an endpoint identifier and an authentication key for lead capture.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/@rechat/sdk@latest/dist/rechat.min.js"></script>
</head>
<body>

  <button id="capture-1">Lead Capture</button>

  <script>
    const sdk = new Rechat.Sdk()
    
    // Set your lead channel ID
    const channel = {
      lead_channel: '2c55e69d-adbe-42d9-97a5-bedb43783b80'
    }

    const input =  {
      first_name: 'John', 
      last_name: 'Doe',
      email: '[email protected]',
      phone: '+18189191212',
    }

    document.getElementById('capture-1').addEventListener('click', () => {
      sdk.Leads.capture(channel, input)
        .then(() => {
          console.log('Done')
        })
        .catch((e) => {
          console.log('Error:', e)
        })
    })
  </script>
</body>
</html>

Example with sdk.Leads.form()

The sdk.Leads.form() method allows you to bind a form element to the SDK, enabling automatic submission and handling of lead data. You can also use pre-defined interfaces, such as ILeadMetaData and ILeadInput, to ensure your form data matches the expected structure.

HTML Form Setup

<script src="https://unpkg.com/@rechat/sdk@latest/dist/rechat.min.js"></script>
<h1>Contact us!</h1>
<form id="lead-form">
  <fieldset>
    <legend><h2>Contact Information</h2></legend>
    <label>
      First Name:
      <input type="text" name="first_name" placeholder="John" required/>
    </label><br/>
    <label>
      Last Name:
      <input type="text" name="last_name" placeholder="Doe" required />
    </label><br/>
    <label>
      Email:
      <input type="email" name="email" placeholder="[email protected]" required />
    </label><br/>
    <label>
      Phone Number:
      <input type="tel" name="phone_number" placeholder="(555) 123-4567"/>
    </label><br/>
  </fieldset>
  <fieldset>
    <legend><h2>Additional Information</h2></legend>
    <label>
      Property Address:
      <input type="text" name="address" placeholder="123 Main St, City, State 12345"/>
    </label><br/>
    <label>
      Referer URL:
      <input type="text" name="referer_url" placeholder="https://example.com/property/123"/>
    </label><br/>
    <label>
      Note:
      <input type="text" name="note" placeholder="Additional note or message..."/>
    </label><br/>
  </fieldset>
  <button type="submit">Submit</button>
</form>

JavaScript for Form Submission

const sdk = new Rechat.Sdk()

    // interface LeadMetaData {
    //   lead_channel: string
    //   user_id: string
    //   brand_id: string
    //   agent_emails: string[]
    //   email_campaign_id: string
    //   ad_campaign_id: string
    // }

// Use LeadMetaData interface for channel
const leadMetaData = {
  lead_channel: '2c55e69d-adbe-42d9-97a5-bedb43783b80'
};
    // interface LeadInput {
    //   first_name: string
    //   last_name: string
    //   email: string
    //   phone_number: string
    //   tag: string
    //   lead_source: string
    //   note: string
    //   address: string
    //   referer_url: string
    //   mlsid: string
    //   agent_mlsid: string
    //   source_type: string
    // }

const formElement = document.getElementById('lead-form');

// Use sdk.Leads.form() integration
sdk.Leads.form(formElement, leadMetaData, {
  validate: (form) => {
    if (!form.first_name || !form.last_name || !form.email) {
      alert('First name, last name, and email are required.');
      return false;
    }
    return true;
  },
  onSuccess: () => {
    alert('Lead submitted successfully!');
    formElement.reset();
  },
  onError: (e) => {
    alert('Error submitting lead: ' + (e?.message || e));
  }
});

// Add required source_type as a hidden field before submit
formElement.addEventListener('submit', function(e) {
  let input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'source_type';
  input.value = 'Website';
  this.appendChild(input);

  setTimeout(() => {
    this.removeChild(input);
  }, 0);
});
PreviousSetup DNS RecordsNextWhitelisting Rechat bot in Cloudflare

Last updated

Was this helpful?