<!-- Advendere WhatsApp Floating Widget (wa.advendere.com) -->
<div id="advendere-wa-widget-root">
<style>
#advendere-wa-widget-root {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
#advendere-wa-widget-root * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.awa-launcher {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #25D366;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
position: relative;
}
.awa-launcher:hover {
transform: scale(1.08);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
.awa-badge-dot {
position: absolute;
top: 2px;
right: 2px;
width: 14px;
height: 14px;
background-color: #48BB78;
border: 2px solid #FFFFFF;
border-radius: 50%;
}
.awa-callout {
position: absolute;
bottom: 72px;
right: 0;
background: #ffffff;
color: #111111;
padding: 8px 14px;
border-radius: 12px;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
border: 1px solid #eaeaea;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
animation: awaFadeIn 0.3s ease;
}
.awa-popup {
display: none;
position: absolute;
bottom: 75px;
right: 0;
width: 340px;
max-width: calc(100vw - 48px);
background: #FFFFFF;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
border: 1px solid #EAEAEA;
animation: awaPopUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.awa-popup.awa-open {
display: block;
}
.awa-header {
background: #075E54;
color: #FFFFFF;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.awa-avatar-wrap {
position: relative;
width: 44px;
height: 44px;
flex-shrink: 0;
}
.awa-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid #FFFFFF;
}
.awa-avatar-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: #25D366;
border: 2px solid #FFFFFF;
border-radius: 50%;
}
.awa-header-info {
flex: 1;
min-width: 0;
}
.awa-header-title {
font-size: 15px;
font-weight: 700;
line-height: 1.2;
color: #FFFFFF;
}
.awa-header-status {
font-size: 12px;
opacity: 0.9;
margin-top: 3px;
color: #E0F2FE;
}
.awa-close-btn {
background: transparent;
border: none;
color: #FFFFFF;
cursor: pointer;
padding: 4px;
opacity: 0.8;
transition: opacity 0.2s;
}
.awa-close-btn:hover {
opacity: 1;
}
.awa-body {
background: #EFEAE2;
background-image: radial-gradient(#d1c7b7 0.75px, transparent 0.75px);
background-size: 16px 16px;
padding: 16px;
min-height: 100px;
max-height: 220px;
overflow-y: auto;
}
.awa-chat-bubble {
background: #FFFFFF;
color: #111111;
padding: 12px 14px;
border-radius: 0 12px 12px 12px;
font-size: 13.5px;
line-height: 1.45;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
}
.awa-chat-time {
font-size: 10px;
color: #888888;
text-align: right;
margin-top: 4px;
}
.awa-footer {
background: #FFFFFF;
padding: 12px;
display: flex;
gap: 8px;
border-top: 1px solid #EAEAEA;
align-items: center;
}
.awa-input {
flex: 1;
padding: 10px 14px;
border-radius: 20px;
border: 1px solid #EAEAEA;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
.awa-input:focus {
border-color: #25D366;
}
.awa-send-btn {
background: #25D366;
color: #FFFFFF;
border: none;
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.15s, background-color 0.2s;
}
.awa-send-btn:hover {
background: #1EBE5D;
transform: scale(1.05);
}
@keyframes awaPopUp {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes awaFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<div class="awa-callout" id="awaCallout" onclick="advendereToggleWidget()">Need help? Chat with us!</div>
<div class="awa-popup" id="awaPopup">
<div class="awa-header">
<div class="awa-avatar-wrap">
<img class="awa-avatar" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120&auto=format&fit=crop&q=80" alt="WhatsApp Support" />
<span class="awa-avatar-dot"></span>
</div>
<div class="awa-header-info">
<div class="awa-header-title">WhatsApp Support</div>
<div class="awa-header-status">Typically replies within minutes</div>
</div>
<button class="awa-close-btn" onclick="advendereToggleWidget()" aria-label="Close">✕</button>
</div>
<div class="awa-body">
<div class="awa-chat-bubble">
<div>Hi there! 👋 How can we help you today?</div>
<div class="awa-chat-time">Just now</div>
</div>
</div>
<div class="awa-footer">
<input type="text" id="awaUserMsg" class="awa-input" placeholder="Type a message..." value="Hi! I have a question about your services." />
<button class="awa-send-btn" onclick="advendereSendWaMessage()" aria-label="Send WhatsApp message">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
</button>
</div>
</div>
<div class="awa-launcher" onclick="advendereToggleWidget()" aria-label="Chat on WhatsApp">
<span class="awa-badge-dot"></span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.04 14.69 2 12.04 2ZM12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.16 12.04 20.16C10.64 20.16 9.27 19.8 8.07 19.09L7.79 18.92L4.67 19.74L5.5 16.7L5.31 16.4C4.51 15.13 4.09 13.54 4.09 11.91C4.09 7.37 7.79 3.67 12.05 3.67ZM8.84 7.23C8.67 7.23 8.4 7.29 8.16 7.55C7.93 7.82 7.26 8.44 7.26 9.71C7.26 10.98 8.19 12.21 8.32 12.38C8.45 12.55 10.15 15.17 12.75 16.29C13.37 16.56 13.85 16.72 14.23 16.84C14.85 17.04 15.42 17.01 15.86 16.94C16.36 16.87 17.39 16.32 17.61 15.71C17.83 15.09 17.83 14.57 17.76 14.46C17.7 14.35 17.52 14.28 17.26 14.15C17 14.02 15.73 13.39 15.5 13.31C15.26 13.22 15.09 13.18 14.92 13.44C14.75 13.7 14.26 14.28 14.11 14.45C13.96 14.63 13.81 14.65 13.55 14.52C13.29 14.39 12.44 14.11 11.44 13.22C10.66 12.52 10.13 11.66 9.98 11.41C9.83 11.15 9.97 11.01 10.1 10.88C10.22 10.76 10.37 10.57 10.5 10.42C10.63 10.27 10.68 10.16 10.76 10C10.84 9.83 10.8 9.69 10.74 9.56C10.68 9.43 10.18 8.21 9.98 7.71C9.78 7.23 9.58 7.29 9.42 7.28C9.28 7.28 9.11 7.23 8.84 7.23Z"/></svg>
</div>
<script>
function advendereToggleWidget() {
var p = document.getElementById("awaPopup");
var c = document.getElementById("awaCallout");
if (p.classList.contains("awa-open")) {
p.classList.remove("awa-open");
if (c) c.style.display = "flex";
} else {
p.classList.add("awa-open");
if (c) c.style.display = "none";
var inp = document.getElementById("awaUserMsg");
if (inp) setTimeout(function(){ inp.focus(); }, 150);
}
}
function advendereSendWaMessage() {
var phone = "1";
var inp = document.getElementById("awaUserMsg");
var msg = inp ? inp.value.trim() : "";
var url = "https://wa.me/" + phone + (msg ? "?text=" + encodeURIComponent(msg) : "");
window.open(url, "_blank", "noopener,noreferrer");
}
(function() {
var input = document.getElementById("awaUserMsg");
if (input) {
input.addEventListener("keydown", function(e) {
if (e.key === "Enter") {
advendereSendWaMessage();
}
});
}
})();
</script>
</div>
