آموزش نصب چت آنلاین هدهد روی سایت، قدم‌به‌قدم

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

قبل از شروع

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

قدم ۱: صندوق وب‌سایت را بسازید

در پنل به «تنظیمات» ← «صندوق‌های ورودی» بروید و «اضافه کردن صندوق ورودی» را بزنید. از میان کانال‌ها، «وب سایت» (ساخت ویجت چت زنده) را انتخاب کنید.

قدم ۲: فرم «کانال وب‌سایت» را پر کنید

• عنوان سایت: نامی که مشتری بالای ویجت می‌بیند؛ مثلاً نام فروشگاه یا برندتان.
• دامنه سایت: دامنه‌ای که ویجت روی آن نصب می‌شود؛ مثلاً example.com.
• رنگ ویجت: رنگ برندتان را انتخاب کنید تا ویجت بخشی از سایت به نظر برسد.
• تیتر خوش آمدگویی و زیرتیتر خوش آمدگویی: متنی که مشتری در صفحهٔ اول ویجت می‌بیند.
• فعال کردن پیام پاسخگویی (اختیاری): پیامی که با شروع هر گفت‌وگو خودکار فرستاده می‌شود.

بعد «ساختن صندوق ورودی» را بزنید.

قدم ۳: اپراتورها را به صندوق اضافه کنید

در مرحلهٔ بعد، از فهرست «انتخاب اپراتورها برای این صندوق ورودی» کسانی را که باید به گفت‌وگوهای این سایت جواب بدهند انتخاب کنید و «افزودن اپراتور» را بزنید. فقط اپراتورهایی که اینجا اضافه شوند پیام‌های این صندوق را می‌بینند؛ اگر خودتان هم می‌خواهید جواب بدهید، خودتان را هم انتخاب کنید.

قدم ۴: قطعه‌کد را کپی کنید

در صفحهٔ «صندوق ورودی حاضره!» قطعه‌کد نصب را می‌بینید. دکمهٔ «کپی» را بزنید.

قطعه‌کد شبیه این است، با این تفاوت که مقدار websiteToken مخصوص صندوق شماست؛ پس همیشه کد را از پنل خودتان کپی کنید:

<script>
  (function(d,t) {
    var BASE_URL="https://hodhod.chat";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

اگر بعداً دوباره به کد نیاز داشتید: صندوق را باز کنید، در تب «تنظیمات» کادر پیش‌نمایش ویجت را ببینید و گزینهٔ «اسکریپت» را بزنید.

قدم ۵: کد را در سایت بگذارید

کد را درست پیش از تگ پایانی </body> در قالب اصلی سایت بگذارید تا روی همهٔ صفحه‌ها بارگذاری شود:

• سایت HTML ساده: در فایل هر صفحه، یا در بخش مشترک فوتر اگر دارید.
• قالب‌های PHP: معمولاً فایل footer.php یا فایل قالب اصلی (layout).
• سایت‌های تک‌صفحه‌ای (React، Vue و...): یک بار در index.html، نه در کامپوننت‌ها.
• وردپرس: راهنمای جداگانهٔ وردپرس را ببینید.
• شاپیفای، ویکس، اسکوئراسپیس، وب‌فلو یا گوگل تگ منیجر: راهنمای سایت‌سازها را ببینید.

کد غیرهم‌زمان (async) بارگذاری می‌شود و جلوی نمایش صفحه را نمی‌گیرد.

قدم ۶: نصب را امتحان کنید

سایت را (ترجیحاً در پنجرهٔ ناشناس مرورگر) باز کنید. دکمهٔ گفت‌وگو باید گوشهٔ پایین صفحه دیده شود. یک پیام آزمایشی بفرستید و در پنل، بخش «گفتگوها» ببینید که رسیده است. تمام! ویجت شما آماده است.

تنظیمات پیشنهادی بعد از نصب

زبان و پوستهٔ ویجت را با سایت هماهنگ کنید

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

<script>
  window.chatwootSettings = {
    locale: 'fa',
    darkMode: 'auto',
  };
</script>

• مقدار locale زبان ویجت است؛ مثلاً fa برای صفحه‌های فارسی و en برای صفحه‌های انگلیسی.
• مقدار darkMode می‌تواند light، dark یا auto باشد.
• اگر سایتتان دکمهٔ تغییر پوسته یا زبان دارد، هنگام تغییر، window.$chatwoot.setColorScheme('dark') یا window.$chatwoot.setLocale('en') را صدا بزنید تا ویجت هم همان لحظه عوض شود.

صف و زمان تخمینی انتظار را نشان دهید

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

چند تنظیم مهم دیگر

• تب «ساعت کاری»: ساعت پاسخ‌گویی تیم را تعیین کنید تا مشتری بیرون از این ساعت‌ها بداند کِی جواب می‌گیرد.
• تب «فرم پیش چت»: اگر لازم است، قبل از شروع گفت‌وگو نام، ایمیل یا شمارهٔ مشتری را بگیرید (چه چیزی بپرسیم؟).
• تب «رضایت مشتری»: نظرسنجی بعد از گفت‌وگو را روشن کنید؛ می‌توانید سؤال‌های تکمیلی هم اضافه کنید.
• تب «پیکربندی» ← «دامنه‌های مجاز»: مشخص کنید ویجت فقط روی دامنه‌های شما اجرا شود.
• «فعال سازی فرم دریافت ایمیل از کاربر» در تب «تنظیمات»: تا اگر مشتری از صفحه رفت، جواب از طریق ایمیل به دستش برسد.

اگر ویجت نمایش داده نشد

1. کش را پاک کنید. افزونه‌های کش یا CDN ممکن است نسخهٔ قدیمی صفحه را نشان دهند.
2. جای کد را بررسی کنید. کد باید در قالبی باشد که روی همهٔ صفحه‌ها بارگذاری می‌شود.
3. دامنه‌های مجاز را چک کنید. اگر فهرستی تعریف کرده‌اید، دامنهٔ سایت (و زیردامنه‌ها، اگر لازم است) باید در آن باشد.
4. کنسول مرورگر را ببینید. با F12 کنسول را باز کنید و دنبال خطا بگردید. اگر افزونهٔ مسدودکنندهٔ تبلیغات دارید، یک بار بدون آن امتحان کنید.

هنوز مشکل دارید؟ از همین ویجتِ پایین صفحه به ما پیام بدهید.

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