Engage your website visitors instantly with our easy-to-integrate WhatsApp chat plugin. Provide real-time support and boost customer satisfaction.
Seamless communication for your website
Connect with visitors via WhatsApp in real-time.
Add the plugin to any website with minimal setup.
Optimized for seamless use on all devices.
Add the WhatsApp chat plugin to your website in minutes
Copy the following HTML code and paste it into your website's body section, just before the closing </body> tag:
<div id="chat-widget">
<button id="chat-toggle">💬 Chat with Us</button>
<div id="chat-popup" class="hidden">
<h3>💬 Quick Chat</h3>
<input type="text" id="chat-name" placeholder="Your Name" required />
<input type="text" id="chat-phone" placeholder="Your WhatsApp Number" required />
<small id="phone-hint" style="font-size: 0.75em; color: gray; display: block; margin-top: -8px; margin-bottom: 10px;">(e.g., 94771234567) Include full international format (e.g., 94..., 1..., 44...), no leading 0</small>
<textarea id="chat-message" placeholder="Your Message" required></textarea>
<button id="chat-send">🚀 Send</button>
<p id="chat-status"></p>
</div>
</div>
Include the following CSS in your website's stylesheet or within a <style> tag in the <head> section:
#chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
font-family: Arial, sans-serif;
}
#chat-toggle {
background: linear-gradient(45deg, #25d366, #128c7e, #25d366);
background-size: 600% 600%;
color: white;
border: none;
padding: 12px 16px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
animation: gradientPulse 4s ease infinite;
transition: transform 0.3s;
}
#chat-toggle:hover {
transform: scale(1.05);
}
@keyframes gradientPulse {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
#chat-popup {
margin-top: 10px;
background: white;
border: 1px solid #ccc;
border-radius: 10px;
padding: 15px;
width: 280px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
display: none;
}
#chat-popup.show {
display: block;
opacity: 1;
transform: translateY(0);
}
#chat-popup input,
#chat-popup textarea {
width: 100%;
margin-bottom: 10px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 5px;
}
#chat-popup textarea {
resize: vertical;
height: 60px;
}
#chat-popup button {
background-color: #128c7e;
color: white;
border: none;
padding: 10px;
width: 100%;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
#chat-popup button:hover {
background-color: #0c6f63;
}
#chat-status {
font-size: 0.9em;
margin-top: 5px;
min-height: 20px;
}
#chat-status.error {
color: red;
}
#chat-status.success {
color: green;
}
Include the following JavaScript code in your website, either in a separate .js file or within a <script> tag after the HTML code:
<script>
const toggleBtn = document.getElementById('chat-toggle');
const chatPopup = document.getElementById('chat-popup');
const sendBtn = document.getElementById('chat-send');
const statusMsg = document.getElementById('chat-status');
toggleBtn.addEventListener('click', () => {
chatPopup.classList.toggle('show');
});
sendBtn.addEventListener('click', async () => {
const name = document.getElementById('chat-name').value.trim();
let phone = document.getElementById('chat-phone').value.trim();
const message = document.getElementById('chat-message').value.trim();
if (!name || !phone || !message) {
statusMsg.textContent = '⚠️ Please fill in all fields.';
statusMsg.className = 'error';
return;
}
// Normalize phone number: remove spaces, leading 0s
phone = phone.replace(/\s+/g, '');
if (phone.startsWith('0')) {
phone = phone.replace(/^0+/, '');
}
// Validate international format (minimum 9 digits, starts with digits)
if (!/^[1-9]\d{8,15}$/.test(phone)) {
statusMsg.textContent = '⚠️ Enter a valid WhatsApp number with country code (e.g., 9477xxxxxxx).';
statusMsg.className = 'error';
return;
}
const apiKey = 'YOUR_API_KEY';
const slotId = 'YOUR_SLOT_KEY';
const adminReceiver = 'ADMIN_NUMBER'; // Your number
const fullMessage = `💬 Message from ${name}:\n${message}\n📞 Reply to: ${phone}`;
try {
statusMsg.textContent = '⏳ Sending...';
statusMsg.className = '';
const response = await fetch('https://wamanager.apexinventives.com/wp/api/send_message', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-KEY': apiKey
},
body: JSON.stringify({
slot_id: slotId,
is_group: false,
receiver: adminReceiver,
message: fullMessage
})
});
const contentType = response.headers.get('content-type');
let result = contentType && contentType.includes('application/json') ? await response.json() : await response.text();
const isSuccess = result.status === 'success' && result.api_response?.success === true;
if (isSuccess) {
statusMsg.textContent = '✅ Message sent successfully!';
statusMsg.className = 'success';
document.getElementById('chat-name').value = '';
document.getElementById('chat-phone').value = '';
document.getElementById('chat-message').value = '';
// Send thank-you message to customer
await fetch('https://wamanager.apexinventives.com/wp/api/send_message', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-API-KEY': apiKey
},
body: JSON.stringify({
slot_id: slotId,
is_group: false,
receiver: phone,
message: `🙏 Hi ${name}, thank you for contacting us! We’ve received your message and will get back to you as soon as possible.`
})
});
} else {
statusMsg.textContent = '❌ Failed to send. Try again.';
statusMsg.className = 'error';
}
} catch (error) {
console.error('Fetch error:', error);
statusMsg.textContent = `❌ Failed to send. Try again.\n(${error.message})`;
statusMsg.className = 'error';
}
});
</script>
Replace the apiKey, slotId, and adminReceiver in the JavaScript code with your own WhatsApp Manager Pro API credentials and receiving phone number.
Start engaging your visitors today with our powerful chat plugin.
Get Your API Key