📲 Blogger-এ WhatsApp Chat Widget কিভাবে যোগ করবেন (Step by Step Guide)

আজকের এই টিউটোরিয়ালে আমরা শিখবো কিভাবে খুব সহজে আপনার Blogger ওয়েবসাইটে WhatsApp Chat Widget যোগ করা যায়। এটি ব্যবহার করলে ভিজিটররা সরাসরি আপনার সাথে WhatsApp-এ যোগাযোগ করতে পারবে।

---

💬 WhatsApp Widget কি?

WhatsApp Widget হলো এমন একটি ফিচার যা আপনার ওয়েবসাইটে একটি ছোট WhatsApp চ্যাট বাটন দেখায়।
এই বাটনে ক্লিক করলে ইউজার সরাসরি WhatsApp-এ আপনার সাথে চ্যাট শুরু করতে পারে।

এটি সাধারণত সাইটের নিচের কোনায় ভাসমান (floating) অবস্থায় থাকে।

---

⭐ WhatsApp Widget ব্যবহারের সুবিধা

• সহজে কাস্টমারের সাথে যোগাযোগ করা যায়

• ইউজার এক ক্লিকে মেসেজ পাঠাতে পারে

• কনভার্সন রেট বাড়ে

• বিজনেস ট্রাস্ট বৃদ্ধি পায়

• ওয়েবসাইটকে আরও প্রফেশনাল দেখায়

---

⚠️ WhatsApp Widget এর অসুবিধা

সাধারণভাবে এর বড় কোনো সমস্যা নেই। তবে কিছু বিষয় খেয়াল রাখতে হবে:

• কিছু widget JavaScript ব্যবহার করে, যা সাইট ধীর করতে পারে

• ভুল কোড ব্যবহার করলে ডিজাইন সমস্যা হতে পারে

👉 তাই lightweight CSS-based widget ব্যবহার করাই ভালো।

---

🛠️ Blogger-এ WhatsApp Widget কিভাবে যোগ করবেন

নিচের স্টেপগুলো অনুসরণ করুন:

🔹 Step 1: Blogger Dashboard এ যান

🔹 Step 2: Theme এ ক্লিক করুন

🔹 Step 3: Edit HTML সিলেক্ট করুন

🔹 Step 4: কোড খুঁজুন

]]></b:skin>

🔹 Step 5: এর উপরে নিচের CSS কোড পেস্ট করুন

---

🎨 CSS Code

:root {
  --green: #4dc247;
  --bg: #f0f5fb;
  --text: #505050;
}

.sticky-button{
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sticky-chat{
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 300px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.chat-menu:checked + .sticky-button + .sticky-chat{
  opacity: 1;
  visibility: visible;
}

---

🧩 HTML Code যোগ করুন

এখন নিচের কোডটি:

👉 Layout → Add Gadget → HTML/JavaScript
অথবা
👉 </body> ট্যাগের উপরে পেস্ট করুন

<input class="chat-menu" id="chat-toggle" type="checkbox"/>

<div class="sticky-button">
  <label for="chat-toggle">💬</label>
</div>

<div class="sticky-chat">
  <div class="chat-box">
    <p>হ্যালো 👋 আপনি কিভাবে সাহায্য চান?</p>

    <a href="https://api.whatsapp.com/send/?phone=91XXXXXXXXXX"
       target="_blank">
       WhatsApp এ চ্যাট করুন
    </a>
  </div>
</div>

---

📌 Important Instructions

• Blog Title এর জায়গায় আপনার ব্লগের নাম দিন

• 91XXXXXXXXXX এর জায়গায় আপনার WhatsApp নাম্বার দিন

• কোড ঠিকভাবে পেস্ট করতে হবে

---

🎯 Final Words

WhatsApp Chat Widget আপনার ব্লগকে আরও ইন্টারেক্টিভ এবং প্রফেশনাল করে তোলে। এটি ব্যবহার করলে ভিজিটররা সহজেই আপনার সাথে যোগাযোগ করতে পারবে এবং আপনার সাইটের এনগেজমেন্ট বাড়বে।

---