বর্তমান সময়ে ওয়েবসাইটের স্পিড এবং ইউজার এক্সপেরিয়েন্স (UX) সবচেয়ে গুরুত্বপূর্ণ। অনেক সময় আমরা ছোটখাটো ফিচারের জন্য ভারী ভারী প্লাগইন ব্যবহার করি, যা আমাদের সাইটকে স্লো করে দেয়। আজ আমি আপনাদের সাথে শেয়ার করব কীভাবে কোনো প্রকার প্লাগইন ছাড়াই একটি Modern Floating Contact Widget আপনার ওয়েবসাইটে যুক্ত করবেন।
এই বাটনটির বিশেষত্ব হলো এতে WhatsApp, Messenger, Call এবং Email—সবগুলো অপশন একসাথে পাওয়া যাবে এবং এটি সম্পূর্ণ অ্যানিমেটেড।
কেন আপনি এই বাটনটি ব্যবহার করবেন? (Key Benefits)
প্লাগইন ব্যবহার না করে এই কাস্টম কোডটি ব্যবহার করলে আপনি যে সুবিধাগুলো পাবেন:
সুপার ফাস্ট লোডিং: কোনো এক্সট্রা জাভাস্ক্রিপ্ট লাইব্রেরি নেই, তাই সাইটের স্পিড একদম ঠিক থাকবে।
অল-ইন-ওয়ান কন্টাক্ট: একটি বাটনের ভেতরেই হোয়াটসঅ্যাপ, মেসেঞ্জার এবং কল করার সুবিধা।
মোবাইল ফ্রেন্ডলি: এটি রেসপনসিভ ডিজাইন, যা মোবাইল এবং ডেস্কটপ সব ডিভাইসেই সুন্দর দেখাবে।
কোনো মান্থলি ফি নেই: অনেক চ্যাট প্লাগইন প্রিমিয়াম ফি নেয়, কিন্তু এটি আপনি সারাজীবন ফ্রিতে ব্যবহার করতে পারবেন।
অ্যানিমেটেড ডিজাইন: এর Pulse Effect ইউজারের দৃষ্টি আকর্ষণ করবে, যা আপনার কনভার্সন রেট বাড়াতে সাহায্য করবে।
কীভাবে আপনার ওয়েবসাইটে এই কোডটি যুক্ত করবেন? (Step-by-Step Guide)
আপনার সাইটে এই বাটনটি যুক্ত করা খুব সহজ। নিচের ধাপগুলো অনুসরণ করুন:
১. HTML এবং CSS অংশ যুক্ত করা
প্রথমে আপনার ওয়েবসাইটের footer.php অথবা থিমের Custom HTML সেকশনে নিচের কোডটি পেস্ট করুন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Floating Contact Widget</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root {
/* Brand Color Updated to #f94d00 */
--brand-primary: #f94d00;
--brand-accent: #ff7539;
--whatsapp: #25D366;
--messenger: #0084FF;
--phone: #00B4FF;
--email: #FF4B4B;
}
body {
font-family: 'Inter', sans-serif;
background: transparent;
margin: 0;
padding: 0;
}
/* Widget Container */
#widgetWrapper {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
}
/* Menu logic */
#contactMenu {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 15px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(30px) scale(0.5);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.menu-active #contactMenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* Common Button Styles */
.ai-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: 0.3s ease;
box-shadow: 0 6px 14px rgba(0,0,0,0.3);
position: relative;
}
.ai-btn svg {
width: 24px;
height: 24px;
fill: #fff;
transition: 0.3s;
}
.ai-btn:hover {
transform: scale(1.15);
box-shadow: 0 0 20px rgba(249, 77, 0, 0.6);
background-color: var(--brand-primary) !important;
}
/* Icons Colors */
.whatsapp { background: var(--whatsapp); }
.messenger { background: var(--messenger); }
.phone { background: var(--phone); }
.email { background: var(--email); }
/* Main Toggle Button - Updated to Orange */
#mainToggle {
width: 65px;
height: 65px;
border-radius: 50%;
background: var(--brand-primary);
border: 3px solid #ffffff;
color: #ffffff;
cursor: pointer;
box-shadow: 0 0 15px rgba(249, 77, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
#mainToggle:hover {
transform: scale(1.1);
background: #d44100;
}
#mainToggle svg {
width: 30px;
height: 30px;
fill: currentColor;
transition: transform 0.3s;
}
/* Animations */
@keyframes attention-shake {
0%, 90%, 100% { transform: scale(1); }
92% { transform: scale(1.1) translateY(-5px); }
94% { transform: scale(1.1) translateY(0) rotate(-10deg); }
96% { transform: scale(1.1) rotate(10deg); }
98% { transform: scale(1.1) rotate(0); }
}
@keyframes shadow-pulse {
0% { box-shadow: 0 0 0 0px rgba(249, 77, 0, 0.7); }
100% { box-shadow: 0 0 0 15px rgba(249, 77, 0, 0); }
}
.pulse-active {
animation: shadow-pulse 2s infinite, attention-shake 5s infinite;
}
/* Tooltip */
.tooltip {
position: absolute;
right: 65px;
background: #1a1a1a;
color: white;
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: 0.2s;
border: 1px solid #333;
}
.ai-btn:hover .tooltip {
opacity: 1;
right: 62px;
}
/* Back to Top */
#backToTop {
margin-top: 12px;
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--brand-primary);
border: none;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
transition: 0.3s;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
#backToTop svg {
fill: white;
}
</style>
</head>
<body>
<div id="widgetWrapper">
<!-- POPUP MENU -->
<div id="contactMenu">
<!-- Information Updated -->
<a href="https://wa.me/8801338599656" target="_blank" class="ai-btn whatsapp">
<span class="tooltip">WhatsApp</span>
<svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</a>
<a href="https://m.me/sharminsufia24bd" target="_blank" class="ai-btn messenger">
<span class="tooltip">Messenger</span>
<svg viewBox="0 0 24 24"><path d="M12 0C5.373 0 0 4.974 0 11.111c0 3.498 1.744 6.614 4.469 8.654V24l4.088-2.242c1.092.303 2.25.464 3.443.464 6.627 0 12-4.974 12-11.111C24 4.974 18.627 0 12 0zm1.291 14.193l-3.076-3.275-5.995 3.275 6.591-7.002 3.128 3.275 5.943-3.275-6.591 7.002z"/></svg>
</a>
<a href="tel:+8801338599656" class="ai-btn phone">
<span class="tooltip">Call Us</span>
<svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.82 3.76 5.14 6.58 6.58l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
</a>
<a href="mailto:sharminsufia1991@gmail.com" class="ai-btn email">
<span class="tooltip">Email</span>
<svg viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>
</a>
</div>
<!-- MAIN TOGGLE -->
<button id="mainToggle" class="pulse-active">
<span id="toggleIcon">
<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
</span>
</button>
<!-- BACK TO TOP -->
<button id="backToTop">
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
</button>
</div>
<script>
const widget = document.getElementById("widgetWrapper");
const toggle = document.getElementById("mainToggle");
const back = document.getElementById("backToTop");
const toggleIcon = document.getElementById("toggleIcon");
const chatIcon = '<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>';
const closeIcon = '<svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
toggle.onclick = (e) => {
e.stopPropagation();
const isActive = widget.classList.toggle("menu-active");
toggleIcon.innerHTML = isActive ? closeIcon : chatIcon;
if(isActive) {
toggle.classList.remove('pulse-active');
} else {
toggle.classList.add('pulse-active');
}
}
window.addEventListener("scroll", () => {
if(window.pageYOffset > 300){
back.style.display = "flex";
} else {
back.style.display = "none";
}
});
back.onclick = () => {
window.scrollTo({top: 0, behavior: "smooth"});
}
window.addEventListener('click', (e) => {
if (!widget.contains(e.target)) {
widget.classList.remove('menu-active');
toggleIcon.innerHTML = chatIcon;
toggle.classList.add('pulse-active');
}
});
</script>
</body>
</html>
টিপস: আপনি যদি শুধু একটি পেজে দেখাতে চান, তবে এলিমেন্টর (Elementor) বা অন্য বিল্ডারের HTML উইজেট ব্যবহার করতে পারেন।
২. ইনফরমেশন আপডেট করা
কোডের ভেতরে নিচের অংশগুলো খুঁজে আপনার নিজের তথ্য বসিয়ে দিন:
WhatsApp: 8801338599656 এর জায়গায় আপনার নম্বর দিন।
Messenger: sharminsufia24bd এর জায়গায় আপনার পেজের ইউজারনেম দিন।
Phone: আপনার ফোন নম্বরটি পরিবর্তন করুন।
Email: আপনার ইমেইল এড্রেসটি বসিয়ে দিন।
প্রফেশনাল অ্যানিমেটেড কন্টাক্ট উইজেট কোড:
(এখানে আপনি আপনার আগের দেওয়া সম্পূর্ণ HTML, CSS এবং JS কোডটি একটি কোড বক্সের ভেতর দিয়ে দিবেন)
বাটনটি যেভাবে কাজ করে (Visual Presentation)
নিচের ছবিতে দেখুন বাটনটি ব্যবহারের আগে এবং পরে দেখতে কেমন হবে:
শেষ কথা
একটি প্রফেশনাল ওয়েবসাইট মানেই হলো সহজ নেভিগেশন এবং দ্রুত লোডিং। এই কাস্টম ফ্লোটিং বাটনটি আপনার ভিজিটরদের জন্য আপনার সাথে যোগাযোগ করা আরও সহজ করে দেবে। কোডটি ব্যবহার করতে কোনো সমস্যা হলে নিচে কমেন্ট করে আমাকে জানাতে পারেন।
