কীভাবে আপনার ওয়েবসাইটে AI চ্যাটবট যোগ করবেন

চ্যাটবট উইজেট আপনার ওয়েবসাইটে একটা চ্যাট বাবল বসিয়ে দেয়। ভিজিটররা প্রশ্ন করতে পারে, আর আপনার AI Brain সেখানেই উত্তর দেয়। প্রতিটা ওয়েবসাইট চ্যাট আপনার Messenger ইনবক্সেও আসে, তাই চাইলে নিজে ঢুকে উত্তর দিতে পারবেন।

শুরু করার আগে

• Brand setup শেষ করুন, যাতে AI আপনার শপ সম্পর্কে জানে। দেখুন AI Brain সেটআপ করুন।
• এমন একটা ওয়েবসাইট লাগবে যেখানে ছোট একটা কোড পেস্ট করতে পারবেন (Shopify, WooCommerce/WordPress বা আপনার নিজের সাইট)।
• আপনার রোলে AI Brain-এর অনুমতি থাকতে হবে। চ্যাটবট একই অনুমতি ব্যবহার করে। Owner ও admin-দের ডিফল্টভাবে এটা থাকে।

ধাপসমূহ

১. উইজেটের ডিজাইন করুন

1. Engage → Chatbot-এ যান। Chatbot Builder খুলবে Appearance ট্যাবে, পাশে লাইভ প্রিভিউসহ।

   

2. Branding-এর নিচে একটা Widget name (৪০ অক্ষর পর্যন্ত) আর Header subtitle দিন। চাইলে Header logo আর Bot avatar যোগ করুন (প্রতিটা ১MB-এর কম)।
3. আপনার স্টোরের সাথে মিলিয়ে Colors, Shape & placement আর Typography বেছে নিন।
4. ওপরে Save changes-এ ক্লিক করুন। দেখবেন "Theme saved"।

২. উইজেট কেমন আচরণ করবে ঠিক করুন

1. Behavior ট্যাব খুলুন।
2. Chatbot status-এর নিচে Chatbot is live চালু রাখুন। ফোনে না দেখাতে চাইলে Hide on mobile চালু করুন।
3. একটা Welcome message দিন, যেমন "আসসালামু আলাইকুম! কিছু খুঁজতে সাহায্য লাগবে?"
4. ভিজিটররা ট্যাপ করতে পারে এমন Quick-reply questions যোগ করুন, যেমন "ডেলিভারি কতদিনে হয়?"
5. চাইলে সেট করুন: Proactive opening, Sound & typing, Availability (ব্যবসার সময়ের বাইরে একটা অফলাইন নোটিশ), Conversation options, একটা Privacy notice, আর নাম ও ইমেইল নিতে Lead capture।
6. Access control-এর নিচে ঠিক করুন AI Place orders, Cancel orders আর Edit customer info করতে পারবে কিনা। এগুলো শুধু উইজেটে না, আপনার সব চ্যানেলে কাজ করে।

   

7. Save changes-এ ক্লিক করুন।

৩. আপনার ওয়েবসাইটের ঠিকানা দিন

1. Domains ট্যাব খুলে Add a domain-এ ক্লিক করুন।
2. Base URL-এ আপনার সাইটের ঠিকানা লিখুন, যেমন https://yourstore.com।
3. Pages-এর নিচে সব পেজে চ্যাটবট দেখাতে * রেখে দিন, অথবা /products-এর মতো পাথ যোগ করুন। শেষে * দেওয়া পাথ, যেমন /blog/*, তার নিচের সব পেজ ধরে।

   

4. Save changes-এ ক্লিক করুন। সেভ করার পর আর অন্তত একটা ডোমেইন যোগ করলে Install ট্যাব খুলে যায়।

৪. পাবলিশ ও ইনস্টল করুন

1. Install ট্যাব খুলুন।
2. Publish-এ ক্লিক করুন। দেখবেন "Widget published — your live snippet is up to date"।
3. Embed snippet-এর নিচে Copy-এ ক্লিক করুন।

   

4. স্নিপেটটা আপনার ওয়েবসাইটে, শেষের </body> ট্যাগের ঠিক আগে পেস্ট করুন:
   • Shopify: Online Store → Themes → Edit code → theme.liquid খুলুন → </body>-এর ঠিক আগে পেস্ট করুন।
   • WooCommerce / WordPress: Appearance → Theme File Editor → footer.php (অথবা কোনো header/footer প্লাগইন ব্যবহার করুন) → </body>-এর ঠিক আগে পেস্ট করুন।
   • নিজের সাইট: যেসব পেজে চ্যাটবট চান, প্রতিটাতে </body>-এর আগে পেস্ট করুন।
5. আপনার ওয়েবসাইট খুলুন। আপনার বেছে নেওয়া কোণায় চ্যাট বাবল দেখাবে।

৫. Messenger থেকে উত্তর দিন

1. Engage → Messenger-এ গিয়ে Website chat ইনবক্স বেছে নিন।
2. একজন ভিজিটরের চ্যাট খুলে পড়ুন বা উত্তর দিন। আপনার উত্তর ভিজিটরের উইজেটে চলে যায়। নিজে উত্তর দিলে ওই চ্যাটে AI থেমে যায়, যতক্ষণ না আপনি Resume AI-এ ক্লিক করেন।

টিপস

• পরে ডিজাইন বদলাবেন? এডিট করুন, Save changes-এ ক্লিক করুন, তারপর Install-এ গিয়ে Publish changes-এ ক্লিক করুন। আপনার ওয়েবসাইট শুধু পাবলিশ করা ভার্সন দেখায়, আর স্নিপেট আবার পেস্ট করতে হয় না।
• আপনার ডিজাইনের ড্রাফট আপনি যে ব্রাউজার ব্যবহার করছেন সেখানে সেভ থাকে। যে ব্রাউজারে পরিবর্তন করেছেন, সেখান থেকেই পাবলিশ করুন।
• উইজেট শুধু লেখায় উত্তর দেয়। প্রোডাক্টের ছবি আর ক্যারোসেল এর ভেতরে দেখায় না।
• Facebook, Instagram আর WhatsApp-এর মতো ২৪ ঘণ্টার উত্তর দেওয়ার সীমা ওয়েবসাইট চ্যাটে নেই।
• Conversation options-এর নিচে Remember conversation চালু রাখুন, যাতে ভিজিটর ফিরে এলেও তার চ্যাট থেকে যায়।

সমস্যা সমাধান

Install ট্যাব লক করা

কারণ জানতে এর ওপর মাউস রাখুন: "Save your chatbot config first to get the install snippet" অথবা "Add at least one allowed domain in the Domains tab to get the install snippet"। সেটা করে আবার চেষ্টা করুন।

"Add at least one allowed domain before publishing."

Domains ট্যাবে আপনার ওয়েবসাইট যোগ করুন, Save changes-এ ক্লিক করুন, তারপর আবার Publish করুন।

"Publish your changes to activate this snippet before copying it."

পাবলিশ না করা পর্যন্ত Copy বাটন বন্ধ থাকে। আগে Publish-এ ক্লিক করুন।

আমার সাইটে চ্যাট বাবল দেখাচ্ছে না

• Domains-এর ঠিকানা আপনার সাইটের সাথে হুবহু মিলছে কিনা দেখুন। yourstore.com আর www.yourstore.com আলাদা, তাই আপনার সাইট দুটোই ব্যবহার করলে দুটোই যোগ করুন।
• পেজটা Pages-এ আছে কিনা দেখুন (অথবা * ব্যবহার করুন)।
• Chatbot is live চালু আছে কিনা দেখুন, আর ফোনে টেস্ট করলে Hide on mobile বন্ধ আছে কিনা দেখুন।
• Key কি রিজেনারেট করেছেন? তাহলে পুরনো স্নিপেট আর কাজ করবে না। নতুনটা কপি করে আপনার সাইটে বদলে দিন।
• শেষ এডিটের পর Publish changes-এ ক্লিক করেছেন কিনা নিশ্চিত হোন।

ওয়েবসাইটের ভিজিটরদের AI উত্তর দিচ্ছে না

Messenger-এ কেউ চ্যাটটা নিজের হাতে নিয়েছে কিনা দেখুন (Resume AI-এ ক্লিক করুন), আর আপনার প্ল্যানের AI মেসেজ লিমিট শেষ হয়েছে কিনা দেখুন।

"Regenerate the install key? Any snippet you've already pasted on your site will stop working until you replace it."

Regenerate key-এ ক্লিক করলে এটা আসে। শুধু key ফাঁস হয়ে গেলে এটা করুন। তারপর নতুন স্নিপেট কপি করে যেখানে যেখানে ইনস্টল করা আছে, সব জায়গায় পুরনোটা বদলে দিন।

ডেভেলপারদের জন্য

Embed snippet

উইজেট মাত্র একটা script ট্যাগ। সবসময় Install ট্যাব থেকে আসল স্নিপেট কপি করুন। এতে আপনার অর্গানাইজেশনের key আর সঠিক EcomUp ঠিকানা থাকে।

<script src="https://<ecomup-widget-host>/widget/loader.js" data-ecomup-key="wgt_live_xxxxxxxxxxxxxxxxxxxxxxxx" async></script>

অংশ	কী করে
src	লোডার স্ক্রিপ্ট। এটা নিজের URL থেকে EcomUp API-এর ঠিকানা বের করে, তাই ফাইলটা নিজের সার্ভারে কপি করবেন না।
data-ecomup-key	আপনার পাবলিক ইনস্টল key: wgt_live_ আর তার পরে ২৪টা অক্ষর। এটা না থাকলে লোডার ব্রাউজার কনসোলে [ecomup] missing data-ecomup-key on the widget script tag লেখে আর কিছুই করে না।
async	আপনার পেজ ধীর না করে লোড হয়।

লোডার কীভাবে কাজ করে

• ট্যাগ দুইবার থাকলেও প্রতি পেজে শুধু একবার লোড হয়।
• শুধু পাবলিশ করা কনফিগারেশন আনে। ড্রাফট কখনো আপনার লাইভ সাইটে যায় না।
• উইজেট একটা Shadow DOM-এর ভেতরে আঁকা হয়, তাই আপনার সাইটের CSS এটাকে বদলাতে পারে না, আর এর CSS-ও আপনার সাইট বদলায় না।
• প্রতিবার রুট বদলালে অনুমোদিত ডোমেইন আর পেজ চেক করে, history.pushState ব্যবহার করা single-page অ্যাপেও। অনুমোদিত নয় এমন পেজে নিজেকে লুকিয়ে রাখে।
• Key ইচ্ছে করেই পাবলিক (আপনার পেজের সোর্সে যে কেউ দেখতে পারে)। অনুমোদিত ডোমেইনের তালিকাই এটাকে অন্য জায়গায় দেখানো থেকে আটকায়। অপব্যবহার হচ্ছে মনে হলে Regenerate key-এ ক্লিক করুন।
• কিছু ব্যর্থ হলে লোডার ব্রাউজার কনসোলে [ecomup] দিয়ে শুরু হওয়া একটা সতর্কবার্তা লেখে, যেমন [ecomup] widget not loaded: …।

সম্পর্কিত আর্টিকেল

• AI Brain সেটআপ করুন
• Messenger ইনবক্স ব্যবহার করুন
• AI-এর কাছ থেকে চ্যাট নিজের হাতে নিন
• আপনার স্টোরে কাস্টম কোড যোগ করুন
• ডেভেলপার ওভারভিউ