In this article, we’ll explore how to use Endless Data's WhatsApp API to send WhatsApp messages from a simple web application built with HTML and JavaScript. This API allows developers to integrate WhatsApp messaging into web applications for purposes like customer notifications, marketing, and support.
The steps in this tutorial include:
- Setting up a basic HTML form to input the message details.
- Using JavaScript to send a message request to the API.
- Handling the response to display success or error messages. ________________________________________ Step 1: Link Your WhatsApp Number with the API To get started with the Endless Data WhatsApp API, you need to link your WhatsApp account.
- Log into the Endless Data portal using your WhatsApp-registered phone number.
- Scan the QR code displayed on the portal by opening WhatsApp on your mobile, navigating to Linked Devices, and scanning the code.
- Once linked, access your API Key from the portal. This key is required for authenticating requests from your web application. ________________________________________ Step 2: Create an HTML Interface for Sending Messages Create a simple HTML form to capture message details like the recipient’s phone number, message text, and the API key.
<!DOCTYPE html>
Send WhatsApp Message
<br> .input-group { margin: 10px 0; }<br> .btn { padding: 10px 20px; cursor: pointer; }<br>
Send WhatsApp Message
API Key:
To (Phone Number):
Message:
Send Message
<div id="responseMessage"></div>
<script src="whatsapp.js"></script>
This HTML structure provides an input form for the API key, recipient phone number, and message text. The button triggers the sendMessage() function to send the message.
Step 3: JavaScript to Send Message Using the API
Create a JavaScript file (whatsapp.js) to handle the form submission, construct the request, and display the response.
JavaScript Code
async function sendMessage() {
const apiKey = document.getElementById('apiKey').value;
const phoneNumber = document.getElementById('phoneNumber').value;
const messageText = document.getElementById('messageText').value;
const apiUrl = 'https://w1.endlessmessages.com/send_message';
// Construct request payload
const payload = {
apikey: apiKey,
number: phoneNumber,
text: messageText,
};
// Send POST request
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
const result = await response.json();
// Display response
if (response.ok) {
document.getElementById('responseMessage').innerText = 'Message sent successfully: ' + result.message_id;
} else {
document.getElementById('responseMessage').innerText = 'Error: ' + result.message;
}
} catch (error) {
document.getElementById('responseMessage').innerText = 'Error: ' + error.message;
}
}
Explanation of the JavaScript Code
- Form Input Retrieval: We get the values for the API key, recipient’s phone number, and message text from the HTML form.
- Define the API URL: The apiUrl variable stores the endpoint to send messages.
- Create Payload: The payload object is structured based on the API requirements, with fields for apikey, number, and text.
- Send POST Request: The fetch() function sends an HTTP POST request to the API with the payload as JSON.
- Display Response: If the message is sent successfully, we display a success message with the message ID. If there’s an error, the error message is shown. ________________________________________ Step 4: Handling Errors and Responses The API may return various response codes indicating the status of the request. Below are common response codes you might encounter: • 0: Message sent successfully. • -1: Invalid API key. • -2: Missing parameter. • -5: Unpaired device. • -6: Missing message text. You can customize the JavaScript to interpret and display different messages based on these codes:
if (response.ok) {
document.getElementById('responseMessage').innerText = 'Message sent successfully: ' + result.message_id;
} else {
switch (result.code) {
case -1:
document.getElementById('responseMessage').innerText = 'Error: Invalid API key.';
break;
case -2:
document.getElementById('responseMessage').innerText = 'Error: Missing parameter.';
break;
case -5:
document.getElementById('responseMessage').innerText = 'Error: Device not paired.';
break;
case -6:
document.getElementById('responseMessage').innerText = 'Error: Message text is missing.';
break;
default:
document.getElementById('responseMessage').innerText = 'Error: Unknown error occurred.';
break;
}
}
This additional code block categorizes errors and provides feedback based on specific error codes, making it easier for users to understand what went wrong.
Conclusion
Using the Endless Data WhatsApp API with HTML and JavaScript, you can quickly set up a web interface to send WhatsApp messages. This approach is lightweight, easy to integrate, and provides real-time feedback on message status.
This example covers the basics, but you can expand the functionality by adding file attachments, scheduling messages, or integrating it into a larger system for customer engagement. For more details on the Endless Data WhatsApp API, refer to the official documentation Endless Data Documentation .
To access a free API key visit whatsapp-api APIKEY.
Top comments (0)