نصب ویجت فلوچت
ویجت، رابط چت برای کاربران نهایی است. بعد از انتشار فلو در فلو استودیو، اسکریپت ویجت را روی سایت قرار میدهید تا مکالمه شروع شود.
مرجع کامل API برنامهنویسی: API جاوااسکریپت ویجت
پیشنیازها
- یک چتبات ساخته و فلو آن منتشر شده باشد
- دسترسی ویرایش HTML سایت (قبل از
</body>) - شناسه چتبات (
chatbot_id) از پنل یا پس از انتشار
مراحل نصب
کپی اسکریپت
پس از انتشار در فلو استودیو، کد ویجت نمایش داده میشود. همان را کپی کنید یا از نمونهٔ زیر استفاده کنید:
<!-- Start FlowChat Widget -->
<script>
window.flowchatSettings = {
chatbot_id: "YOUR_CHATBOT_ID",
};
</script>
<script>
(()=>{var t=window,e=document;if(!t.FlowChat){var a=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];a.storeArguments(t)};a.commandQueue=[],a.storeArguments=function(t){a.commandQueue.push(t)},t.FlowChat=a;var n=function(){var n,o=e.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://widget.flowchat.tech/assets/script.js",o.onload=function(){a.commandQueue.forEach((function(e){t.FlowChat.apply(t,e)}))};var r=e.getElementsByTagName("script")[0];null===(n=r.parentNode)||void 0===n||n.insertBefore(o,r)};"complete"===e.readyState?n():t.attachEvent?t.attachEvent("onload",n):t.addEventListener("load",n,!1)}})();
</script>
<!-- End FlowChat Widget -->قرار دادن در سایت
کد را قبل از </body> در صفحاتی که ویجت باید نمایش داده شود قرار دهید.
نتیجه: دکمهٔ چت در گوشهٔ صفحه ظاهر میشود و با کلیک، فلو منتشرشده اجرا میشود.
تنظیم شناسه و زبان
chatbot_id را با شناسه واقعی چتبات جایگزین کنید. برای زبان رابط:
<script>
window.flowchatSettings = {
chatbot_id: "YOUR_CHATBOT_ID",
lang: "fa",
};
</script>پارامترهای flowchatSettings
| پارامتر | نوع | توضیح |
|---|---|---|
chatbot_id | string | الزامی — شناسه چتبات |
lang | string | زبان رابط: fa، en، es (پیشفرض: fa) |
debug | boolean | نمایش خطا در کنسول مرورگر |
name | string | نام کاربر (اختیاری) |
email | string | ایمیل کاربر (اختیاری) |
phone | string | موبایل کاربر (اختیاری) |
| سایر فیلدها | any | ویژگیهای سفارشی |
مثال با ویژگیهای سفارشی
<script>
window.flowchatSettings = {
chatbot_id: "YOUR_CHATBOT_ID",
name: "سارا احمدی",
email: "sara@example.com",
phone: "09120000000",
lang: "fa",
subscription_plan: "طلایی",
signed_up: true,
};
</script>برای ارسال امن ویژگیهای حساس از امنیت چتبات و JWT استفاده کنید.
کنترل از طریق JavaScript
بعد از بارگذاری ویجت میتوانید باز/بسته کردن و بهروزرسانی تنظیمات را از کد سایت انجام دهید:
// باز کردن ویجت از دکمهٔ کمک
document.querySelector("#help-button").addEventListener("click", () => {
if (window.FlowChat) FlowChat("open");
});
// بهروزرسانی اطلاعات کاربر
FlowChat("update", {
name: "کاربر مهمان",
email: "guest@example.com",
});جزئیات همهٔ متدها: API جاوااسکریپت.
عیبیابی
| مشکل | علت محتمل | راهحل |
|---|---|---|
| ویجت دیده نمیشود | chatbot_id اشتباه یا فلو منتشر نشده | شناسه و انتشار را بررسی کنید |
| فلو قدیمی اجرا میشود | نسخهٔ فعال قدیمی است | آخرین نسخه را در فلو استودیو فعال کنید |
| خطا در کنسول | اسکریپت ناقص یا تداخل JS | debug: true بگذارید و ترتیب بارگذاری را چک کنید |
| ظاهر ویجت درست نیست | تنظیمات طراحی ذخیره نشده | تب طراحی را بررسی کنید |
اسکریپت را در <head> قرار ندهید. همیشه قبل از </body> بگذارید و از HTTPS
استفاده کنید.