نصب چت‌بات روی سایت با یک خط کد: راهنمای قدم‌به‌قدم

دستیار آیوا را ساخته‌اید، پایگاه دانشش را پر کرده‌اید و در پیش‌نمایش هم جواب‌های خوبی می‌دهد. حالا نوبت آخرین قدم است: اینکه روی سایت واقعی‌تان ظاهر شود و مشتری‌ها بتوانند با آن گفتگو کنند.

این کار ساده‌تر از چیزی است که به نظر می‌رسد. کافی است یک خط کد را در جای درست سایت بگذارید. در این راهنما می‌گوییم کد را از کجا بردارید، در سایت HTML ساده، سایت‌سازها و وردپرس کجا بگذارید، چطور مطمئن شوید ویجت درست کار می‌کند و اگر دیده نشد، چه چیزهایی را بررسی کنید. اگر هنوز دستیارتان را نساخته‌اید، اول آموزش ساخت چت‌بات با آیوا را بخوانید.

کد نصب را از کجا بردارید؟

کد نصب در قدم آخر ویزارد ساخت دستیار است. وقتی صفحه «تبریک! دستیار شما آماده است» باز شد، در بخش «نصب در سایت» گزینه «HTML/JS» را با توضیح «برای اکثر سایت‌ها» انتخاب کنید. زیر عنوان «کد نصب»، کد آماده را می‌بینید و با دکمه کپی کنار آن برمی‌دارید. این روش در همه پلن‌ها، از جمله دوره آزمایشی، در دسترس است.

اگر ویزارد را بسته‌اید، در داشبورد به «مدیریت چت‌بات» بروید، منوی عملیات کنار دستیار را باز کنید و «ویرایش» را بزنید. بعد در نوار پیشرفت بالای صفحه، روی «نصب و راه‌اندازی» بزنید تا دوباره به همین صفحه برسید.

کد نصب چیزی شبیه این است:

<script src="https://aivarobot.com/api/public/widget/chatbot-widget.js?apiEndpoint=https://aivarobot.com/api/public&botUUID=YOUR-BOT-UUID"></script>

در کدی که پنل به شما می‌دهد، به‌جای YOUR-BOT-UUID شناسه اختصاصی دستیار خودتان نوشته شده است. کد را دقیقاً همان‌طور که هست کپی کنید و چیزی به آن اضافه یا از آن کم نکنید. اگر حتی یک حرف از شناسه جا بیفتد، ویجت نمی‌تواند دستیار شما را پیدا کند.

کد را کجای سایت بگذارید؟

راهنمای خود پنل پنج قدم را پیشنهاد می‌کند: کد را کپی کنید، فایل HTML سایت را باز کنید، کد را در بخش <head> یا قبل از </body> بگذارید، فایل را ذخیره و بارگذاری کنید و در پایان سایت را بررسی کنید. هر دو جا کار می‌کند؛ اگر مطمئن نیستید، کد را درست پیش از </body> بگذارید. مستندات ویجت هم همین را پیشنهاد می‌کند.

مهم‌ترین نکته این است که کد باید در همه صفحه‌هایی باشد که می‌خواهید ویجت در آن‌ها دیده شود. اگر آن را فقط در صفحه اصلی بگذارید، مشتری در صفحه محصول دکمه چت را نمی‌بیند.

سایت HTML ساده

اگر سایتتان از چند فایل HTML ساخته شده، کد را در هر فایل پیش از </body> بگذارید. اگر سایت یک فایل مشترک برای پاورقی یا سربرگ دارد، کافی است کد را یک بار در همان فایل بگذارید تا در همه صفحه‌ها بیاید. بعد فایل‌های تغییرکرده را دوباره روی هاست بارگذاری کنید.

سایت‌سازها و سیستم‌های مدیریت محتوا

بیشتر سایت‌سازها و سیستم‌های مدیریت محتوا بخشی برای افزودن کد سفارشی دارند. نام این بخش در هر سرویس فرق می‌کند، اما معمولاً چیزی شبیه «کد سفارشی»، «کدهای سربرگ و پاورقی»، «اسکریپت‌ها» یا «تنظیمات پیشرفته» است. در این بخش دنبال گزینه‌ای بگردید که کد را به همه صفحه‌ها اضافه کند و ترجیحاً آن را در پاورقی یا انتهای بدنه صفحه بگذارد. کد را آنجا بچسبانید و تغییرات را ذخیره یا منتشر کنید.

دو نکته را فراموش نکنید:

• کد را در ویرایشگر متن یک صفحه یا نوشته نچسبانید. این ویرایشگرها معمولاً کد را به متن معمولی تبدیل می‌کنند و به‌جای ویجت، خود کد روی صفحه دیده می‌شود.
• بعضی سرویس‌ها افزودن کد سفارشی را فقط در طرح‌های خاص خودشان ممکن می‌کنند. اگر این بخش را پیدا نکردید، راهنمای همان سرویس را ببینید یا از پشتیبانی آن بپرسید.

سایت وردپرسی دارید؟

برای وردپرس دو راه دارید و فقط باید یکی از آن‌ها را به کار ببرید:

1. افزونه وردپرس آیوا (آیوا هوشمند و بالاتر): در صفحه نصب، گزینه «PLUGIN» با توضیح «سایت‌های وردپرسی» را انتخاب کنید، افزونه را با دکمه «دانلود» بگیرید و در وردپرس نصب کنید. سپس سه مقدار BaseUrl، Uuid و Secret را که در همان صفحه می‌بینید، در صفحه تنظیمات افزونه و به ترتیب در فیلدهای API URL، Bot UUID و Webhook Secret وارد کنید. افزونه ویجت را خودش به پاورقی همه صفحه‌ها اضافه می‌کند. علاوه بر این، نوشته‌های منتشرشده سایت را به پایگاه دانش دستیار می‌فرستد و بعد از هر انتشار، ویرایش یا حذف، آن‌ها را همگام نگه می‌دارد. افزونه به وردپرس نسخه ۵٫۹ و PHP نسخه ۷٫۴ یا جدیدتر نیاز دارد.
2. کد نصب (همه پلن‌ها): اگر پلنتان آیوا هوشمند یا بالاتر نیست، همان کد HTML/JS را از بخش کدهای سفارشی قالب یا با افزونه‌ای که کد را به سربرگ و پاورقی همه صفحه‌ها اضافه می‌کند، در سایت قرار دهید.

اگر هم افزونه را نصب کنید و هم کد را دستی بگذارید، ممکن است ویجت دو بار بارگذاری شود. جزئیات نصب و تنظیم افزونه را در راهنمای افزونه وردپرس آیوا نوشته‌ایم.

مطمئن شوید ویجت درست کار می‌کند

بعد از نصب، این چند کار را به ترتیب انجام دهید:

1. چند دقیقه صبر کنید. به گفته خود پنل، ممکن است تا چند دقیقه طول بکشد تا دستیار در سایت فعال شود.
2. سایت را در یک پنجره خصوصی مرورگر باز کنید تا نسخه ذخیره‌شده قدیمی صفحه نمایش داده نشود.
3. دکمه چت را در گوشه‌ای که در «موقعیت نمایش» انتخاب کرده بودید، یعنی پایین راست یا پایین چپ، پیدا کنید.
4. روی دکمه بزنید و یکی از سؤال‌های واقعی مشتری‌ها را بپرسید. جواب به‌تدریج و هم‌زمان با نوشته شدن روی صفحه می‌آید.
5. یکی از سؤال‌های پیشنهادی را انتخاب کنید و ببینید همان جوابی که در «سوالات متداول» نوشته بودید نمایش داده می‌شود.
6. اگر در «اطلاعات ضروری» نام، موبایل یا ایمیل را الزامی کرده‌اید، مطمئن شوید فرم پیش از شروع گفتگو باز می‌شود.
7. سایت را با گوشی هم باز کنید. روی صفحه‌های کوچک، پنجره گفتگو تمام‌صفحه باز می‌شود.

نکته: گفتگوهای آزمایشی شما هم گفتگوی واقعی حساب می‌شوند. در آمار میزکار می‌آیند و جز جواب‌های سؤالات متداول، اعتبار پیام مصرف می‌کنند.

اشتباه‌های رایج و راه‌حل آن‌ها

اگر ویجت دیده نشد یا درست کار نکرد، معمولاً یکی از این موارد علت است:

مشکل	علت احتمالی	راه‌حل
دکمه چت در هیچ صفحه‌ای دیده نمی‌شود	کد در جای اشتباه گذاشته شده یا تغییرات ذخیره و منتشر نشده است	کد را در بخش کد سراسری سایت، ترجیحاً پیش از </body>، بگذارید و دوباره منتشر کنید
خود کد به‌صورت متن روی صفحه دیده می‌شود	کد در ویرایشگر متن صفحه چسبانده شده است	کد را از متن صفحه پاک کنید و در بخش کد سفارشی بگذارید
ویجت فقط در بعضی صفحه‌ها هست	کد فقط در یک قالب یا یک فایل قرار گرفته است	کد را در فایل یا بخشی بگذارید که در همه صفحه‌ها مشترک است
بعد از نصب، صفحه هنوز بدون ویجت است	افزونه یا سرویس کش، نسخه قدیمی صفحه را نشان می‌دهد	کش سایت و مرورگر را پاک کنید و در پنجره خصوصی دوباره ببینید
ویجت هست ولی جواب نمی‌دهد	کد دست‌کاری شده، چت‌بات غیرفعال است یا دوره آزمایشی یا پلن تمام شده است	کد را دوباره از پنل کپی کنید، کلید فعال بودن را در «مدیریت چت‌بات» و وضعیت پلن را در «مالی» ببینید
دکمه چت روی دکمه دیگری افتاده است	دکمه‌های شناور دیگر سایت در همان گوشه‌اند	«موقعیت نمایش» را عوض کنید یا ویجت را با CSS بالاتر ببرید

چند مورد دیگر هم هست که کمتر پیش می‌آید. اگر سایتتان سیاست امنیتی محتوا (CSP) دارد که بارگذاری اسکریپت از دامنه‌های دیگر را محدود می‌کند، برنامه‌نویس سایت باید دامنه aivarobot.com را در آن مجاز کند. اگر هم ویجت درست نصب شده اما جواب‌ها ناقص یا نادرست است، مشکل از نصب نیست و باید سراغ محتوا بروید؛ هشت علت رایج ندانستن جواب در چت‌بات و راه‌حلشان را بخوانید.

تغییر جای ویجت و کنترل بیشتر با کد

ظاهر ویجت را از قدم «تنظیمات ظاهری دستیار» تغییر می‌دهید: رنگ‌ها، اندازه دکمه، گوشه نمایش و در آیوا هوشمند و بالاتر، لوگو. نکته‌های انتخاب این گزینه‌ها را در راهنمای شخصی‌سازی ظاهر ویجت چت آورده‌ایم.

گاهی دکمه چت با دکمه‌های دیگر سایت، مثل دکمه بازگشت به بالا یا نوار خرید چسبان در موبایل، روی هم می‌افتد. اگر عوض کردن گوشه نمایش کافی نبود، می‌توانید با یک قطعه CSS کوتاه، ویجت را کمی بالاتر ببرید. برنامه‌نویس‌ها می‌توانند ویجت را با جاوااسکریپت هم کنترل کنند؛ مثلاً آن را با یک دکمه دلخواه در صفحه تماس باز کنند یا کاربر واردشده به سایت را به دستیار معرفی کنند. نمونه‌کدها در راهنمای جاوااسکریپت ویجت آیوا و مستندات کامل در صفحه مستندات ویجت آمده است.

سؤالات متداول

برای نصب چت‌بات به برنامه‌نویس نیاز دارم؟

معمولاً نه. اگر سایتتان بخش کد سفارشی دارد یا با وردپرس ساخته شده، خودتان می‌توانید کد را بگذارید. برنامه‌نویس فقط برای کارهای پیشرفته‌تر لازم است، مثل باز کردن ویجت با دکمه‌های اختصاصی یا یکی کردن تاریخچه گفتگو برای کاربرانی که در سایت حساب دارند.

می‌توانم ویجت را فقط در چند صفحه خاص نشان بدهم؟

بله. ویجت فقط در صفحه‌هایی ظاهر می‌شود که کد نصب در آن‌ها باشد. اگر می‌خواهید دستیار مثلاً فقط در صفحه‌های محصول دیده شود، کد را فقط در قالب همان صفحه‌ها بگذارید.

اگر بعداً رنگ یا تنظیمات دستیار را عوض کنم، باید کد را دوباره نصب کنم؟

نه. کد نصب فقط شناسه دستیار را در خود دارد و ویجت تنظیمات را از آیوا می‌خواند. تغییر رنگ، سؤالات متداول یا پایگاه دانش بدون دست زدن به کد سایت اعمال می‌شود.

جمع‌بندی

نصب چت‌بات روی سایت سه کار دارد: کپی کردن کد از بخش «نصب در سایت»، گذاشتن آن در بخش کد سراسری سایت و آزمایش ویجت روی رایانه و گوشی. در وردپرس، اگر پلن آیوا هوشمند یا بالاتر دارید، افزونه آیوا کار را ساده‌تر می‌کند. اگر ویجت دیده نشد، اول جای کد و کش سایت را بررسی کنید.

اگر هنوز دستیاری نساخته‌اید، ساخت دستیار را رایگان شروع کنید و کد نصب را در قدم آخر بردارید.