Skip to Content
ویجت فلوچت

نصب ویجت فلوچت

ویجت، رابط چت برای کاربران نهایی است. بعد از انتشار فلو در فلو استودیو، اسکریپت ویجت را روی سایت قرار می‌دهید تا مکالمه شروع شود.

📌

مرجع کامل API برنامه‌نویسی: API جاوااسکریپت ویجت

پیش‌نیازها

  • یک چت‌بات ساخته و فلو آن منتشر شده باشد
  • دسترسی ویرایش HTML سایت (قبل از </body>)
  • شناسه چت‌بات (chatbot_id) از پنل یا پس از انتشار

مراحل نصب

کپی اسکریپت

پس از انتشار در فلو استودیو، کد ویجت نمایش داده می‌شود. همان را کپی کنید یا از نمونهٔ زیر استفاده کنید:

index.html
<!-- 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_idstringالزامی — شناسه چت‌بات
langstringزبان رابط: fa، en، es (پیش‌فرض: fa)
debugbooleanنمایش خطا در کنسول مرورگر
namestringنام کاربر (اختیاری)
emailstringایمیل کاربر (اختیاری)
phonestringموبایل کاربر (اختیاری)
سایر فیلدها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 اشتباه یا فلو منتشر نشدهشناسه و انتشار را بررسی کنید
فلو قدیمی اجرا می‌شودنسخهٔ فعال قدیمی استآخرین نسخه را در فلو استودیو فعال کنید
خطا در کنسولاسکریپت ناقص یا تداخل JSdebug: true بگذارید و ترتیب بارگذاری را چک کنید
ظاهر ویجت درست نیستتنظیمات طراحی ذخیره نشدهتب طراحی را بررسی کنید
⚠️

اسکریپت را در <head> قرار ندهید. همیشه قبل از </body> بگذارید و از HTTPS استفاده کنید.

آخرین تغییر در