WhatsApp widget

Integrating Your Application with the WhatsApp Widget

Enhance your customer support and lead engagement by integrating the WhatsApp widget into your application. Whatsapp widget can be integrated into your website and can help capture leads from website into your Inleads account. This guide will walk you through the steps to add the WhatsApp widget script to your HTML, enabling seamless communication between your users and your team.

Step-by-Step Guide to Adding the WhatsApp Widget

Step 1: Obtain the WhatsApp Widget Script

  1. Log in to InLeads: Start by logging into your InLeads account. If you don't have an account, sign up and complete the initial setup.

  2. Navigate to the Settings -> Integrations tab

  3. Locate the WhatsApp Widget Script: Look for the WhatsApp widget script, which will be displayed with instructions on how to implement it.

Step 2: Copy the Widget Script

  1. Copy the Script: Copy the entire script provided by InLeads. The script should look similar to the following example:

    <script src="https://www.inleads.ai/widgets/whatsapp-widget/whatsapp-injector.js?v=1679563152&apiKey=xxxx-xxxx-xxxx-xxxx-xxxxxxx&phone=Replace with your phone number#&header=Chat+with+us&background=#4dc247"></script>

Step 3: Customize the Script

  1. Replace Placeholder Text: Modify the script to include your specific details:

    • Phone Number: Replace #Replace with your phone number# with your actual WhatsApp phone number, including the country code (e.g., +1234567890).

    • Header: Customize the header parameter to display a personalized message (e.g., Chat+with+us).

    • Background Color: Change the background parameter to match your brand's color scheme (e.g., #4dc247).

    Your customized script should look like this:

    <script src="https://www.inleads.ai/widgets/whatsapp-widget/whatsapp-injector.js?v=1679563152&apiKey=xxxx-xxxx-xxxx-xxxx-xxxxxxx&phone=Replace&header=Chat+with+us&background=#4dc247"></script>

Step 4: Add the Script to Your HTML

  1. Open Your HTML File: Open the HTML file where you want the WhatsApp widget to appear.

  2. Insert the Script: Place the copied and customized script within the <head> or <body> tag of your HTML file. For example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Application</title>
    <!-- WhatsApp Widget Script -->
    <script src="https://www.inleads.ai/widgets/whatsapp-widget/whatsapp-injector.js?v=1679563152&apiKey=xxxx-xxxx-xxxx-xxxx-xxxxxxx&phone=Replace&header=Chat+with+us&background=#4dc247"></script>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Step 5: Save and Publish

  1. Save Your Changes: Save the HTML file after adding the WhatsApp widget script.

  2. Publish Your Application: Deploy your updated HTML file to your web server or hosting platform.

Step 6: Test the Integration

  1. Access Your Application: Open your web application in a browser.

  2. Verify Widget Appearance: Check that the WhatsApp widget appears as expected, typically in the bottom right corner of your application.

  3. Test Functionality: Click on the widget to ensure it opens a WhatsApp chat window with your specified phone number.

PreviousSegmentNextInleads SDK

Last updated