چگونه چت یاد را در سایت خود نصب کنیم؟ راهنمای گام‌به‌گام

تبریک می‌گویم! شما تصمیم گرفته‌اید چت‌بات هوشمند به سایت خود اضافه کنید. این یکی از بهترین تصمیمات برای رشد کسب‌وکار شماست.

خبر خوب این است که نصب چت یاد فوق‌العاده ساده است - حتی اگر هیچ دانشی از برنامه‌نویسی نداشته باشید! در این راهنما، گام‌به‌گام نشان می‌دهیم چگونه در کمتر از 5 دقیقه چت یاد را نصب کنید.

⏱ زمان نصب: 5-10 دقیقه
🔧 نیاز به دانش فنی: خیر
💻 پلتفرم‌های پشتیبانی شده: WordPress, HTML, React, Vue, Angular, Webflow, Wix, Shopify و...

📋 آنچه قبل از شروع نیاز دارید

✅ یک اکانت چت یاد (رایگان یا پولی)
✅ دسترسی به فایل‌های سایت خود یا پنل مدیریت
✅ 5 دقیقه وقت!

اگر هنوز اکانت ندارید، اینجا کلیک کنید و یک اکانت رایگان بسازید.

🎯 مرحله 1: ساخت چت‌بات و دریافت کد نصب

بعد از ورود به داشبورد چت یاد:

ایجاد پروژه جدید:
- روی دکمه "ایجاد چت‌بات جدید" کلیک کنید
- نام کسب‌وکار خود را وارد کنید
- آدرس وب‌سایت را وارد کنید (اختیاری)
آپلود داده‌ها:
- فایل‌های PDF، Word، Excel و... خود را آپلود کنید
- یا آدرس سایت خود را وارد کنید تا محتوا خوانده شود
- یا متن‌های خود را مستقیماً کپی و پیست کنید
سفارشی‌سازی (اختیاری):
- رنگ چت‌بات را با برند خود هماهنگ کنید
- لوگو آپلود کنید
- پیام خوش‌آمدگویی را تنظیم کنید
دریافت کد نصب:
- روی تب "نصب و تنظیمات" بروید
- کد embed خود را کپی کنید
- کد شبیه این است:

<script>
  window.ChatbotConfig = {
    embedKey: "YOUR-UNIQUE-KEY",
    apiUrl: "https://api.chatyad.ir"
  };
</script>
<script src="https://api.chatyad.ir/widget.js" async></script>

⚠️ مهم: کلید YOUR-UNIQUE-KEY منحصر به شماست. این کلید را با کسی به اشتراک نگذارید.

🚀 مرحله 2: نصب کد در سایت

بسته به نوع سایت شما، روش نصب متفاوت است. روش مناسب خود را انتخاب کنید:

📌 روش 1: نصب در وردپرس (WordPress)

راه A: استفاده از افزونه WPCode (توصیه می‌شود)

وارد پنل مدیریت وردپرس شوید
به افزونه‌ها → افزودن افزونه بروید
جستجو کنید: WPCode
افزونه را نصب و فعال کنید
به Code Snippets → Add Snippet بروید
گزینه "Add Your Custom Code" را انتخاب کنید
نوع کد را HTML انتخاب کنید
کد چت یاد را paste کنید
در بخش Insertion گزینه "Auto Insert" و "Site Wide Footer" را انتخاب کنید
روی Save Snippet کلیک کنید

راه B: ویرایش مستقیم فایل theme (برای کاربران پیشرفته)

به ظاهر → ویرایشگر قالب بروید
فایل footer.php را باز کنید
قبل از تگ </body> کد چت یاد را paste کنید
روی به‌روزرسانی فایل کلیک کنید

⚠️ هشدار: قبل از ویرایش مستقیم فایل‌ها، حتماً یک Backup تهیه کنید!

📌 روش 2: نصب در سایت HTML ساده

اگر سایت شما HTML ساده است (بدون وردپرس یا CMS):

فایل index.html (یا هر صفحه‌ای که می‌خواهید چت‌بات داشته باشد) را باز کنید
به انتهای فایل بروید و تگ </body> را پیدا کنید
دقیقاً قبل از </body> کد چت یاد را paste کنید
فایل را ذخیره کنید
فایل را روی سرور آپلود کنید

مثال کامل:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>سایت من</title>
</head>
<body>
    <h1>محتوای سایت</h1>
    
    /* کد چت یاد را اینجا قرار دهید */
    <script>
      window.ChatbotConfig = {
        embedKey: "YOUR-UNIQUE-KEY",
        apiUrl: "https://api.chatyad.ir"
      };
    </script>
    <script src="https://api.chatyad.ir/widget.js" async></script>
</body>
</html>

📌 روش 3: نصب در React, Vue, Angular

React (در component اصلی یا App.js):

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // تنظیم config
    window.ChatbotConfig = {
      embedKey: "YOUR-UNIQUE-KEY",
      apiUrl: "https://api.chatyad.ir"
    };

    // بارگذاری اسکریپت
    const script = document.createElement('script');
    script.src = 'https://api.chatyad.ir/widget.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      {/* محتوای اپلیکیشن */}
    </div>
  );
}

Vue.js (در App.vue یا main.js):

export default {
  mounted() {
    window.ChatbotConfig = {
      embedKey: "YOUR-UNIQUE-KEY",
      apiUrl: "https://api.chatyad.ir"
    };

    const script = document.createElement('script');
    script.src = 'https://api.chatyad.ir/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}

📌 روش 4: نصب در Webflow, Wix, Shopify

Webflow:

Project Settings → Custom Code بروید
در بخش Footer Code کد را paste کنید
Save کنید و سایت را Publish کنید

Wix:

Settings → Custom Code → Add Custom Code بروید
کد را paste کنید
در قسمت "Load code on" گزینه All pages را انتخاب کنید
Place code in: Body - end
Apply کنید

Shopify:

Online Store → Themes → Edit Code بروید
فایل theme.liquid را باز کنید
قبل از </body> کد را paste کنید
Save کنید

✅ مرحله 3: تست و بررسی

بعد از نصب کد، حتماً چک کنید که همه چیز درست کار می‌کند:

باز کردن سایت:
- سایت خود را باز کنید (حتی در یک تب incognito/private)
- باید در گوشه پایین راست یک آیکون چت ببینید
تست کردن چت‌بات:
- روی آیکون کلیک کنید
- یک سوال آزمایشی بپرسید
- چک کنید که پاسخ درست می‌دهد
چک کردن در موبایل:
- سایت را از گوشی باز کنید
- مطمئن شوید که چت‌بات responsive است

✅ چک‌لیست نصب موفق:

☑ آیکون چت در گوشه پایین راست نمایش داده می‌شود
☑ با کلیک روی آیکون، پنجره چت باز می‌شود
☑ پیام خوش‌آمدگویی نمایش داده می‌شود
☑ پاسخ به سوالات آزمایشی صحیح است
☑ در موبایل به درستی کار می‌کند
☑ سرعت سایت تحت تاثیر قرار نگرفته (async loading)

🎨 مرحله 4: سفارشی‌سازی ظاهر (اختیاری)

می‌توانید ظاهر چت‌بات را با برند خود هماهنگ کنید:

تنظیمات پیشرفته:

می‌توانید config بیشتری اضافه کنید:

<script>
  window.ChatbotConfig = {
    embedKey: "YOUR-UNIQUE-KEY",
    apiUrl: "https://api.chatyad.ir",
    
    // تنظیمات ظاهری
    theme: {
      primaryColor: "#e43b44",        // رنگ اصلی
      position: "right",             // موقعیت: right یا left
      bottomOffset: "20px",          // فاصله از پایین
      sideOffset: "20px"             // فاصله از کنار
    },
    
    // پیام‌های سفارشی
    messages: {
      welcome: "سلام! چطور می‌توانم کمکتان کنم؟",
      placeholder: "سوال خود را بپرسید..."
    },
    
    // تنظیمات رفتاری
    autoOpen: false,                   // باز شدن خودکار
    autoOpenDelay: 3000,               // تاخیر باز شدن (میلی‌ثانیه)
    showOnPages: ["*"]                 // صفحاتی که نمایش داده شود
  };
</script>
<script src="https://api.chatyad.ir/widget.js" async></script>

🐛 عیب‌یابی: مشکلات رایج و راه‌حل

❌ مشکل 1: چت‌بات نمایش داده نمی‌شود

راه‌حل‌ها:

✅ مطمئن شوید کد را درست copy کرده‌اید (بدون کاراکتر اضافی)
✅ مطمئن شوید کد قبل از </body> قرار دارد
✅ Cache مرورگر را پاک کنید (Ctrl+Shift+Delete)
✅ اگر وردپرس استفاده می‌کنید، Cache افزونه‌ها را پاک کنید
✅ در Console مرورگر (F12) خطایی نیست؟

❌ مشکل 2: چت‌بات نمایش داده می‌شود اما پاسخ نمی‌دهد

راه‌حل‌ها:

✅ مطمئن شوید embedKey صحیح است
✅ چک کنید که چت‌بات در داشبورد فعال است
✅ مطمئن شوید داده‌ها آپلود شده‌اند
✅ اینترنت کاربر را چک کنید

❌ مشکل 3: چت‌بات روی سایر صفحات نمایش داده نمی‌شود

راه‌حل‌ها:

✅ مطمئن شوید کد در یک فایل مشترک (مثل footer.php) قرار دارد
✅ اگر SPA (React/Vue) استفاده می‌کنید، کد را در component اصلی قرار دهید
✅ در وردپرس، از افزونه WPCode با گزینه "Site Wide" استفاده کنید

❌ مشکل 4: سایت کند شده

راه‌حل:

✅ مطمئن شوید attribute async در تگ script وجود دارد
✅ کد چت یاد قبل از </body> است (نه در <head>)
✅ اسکریپت چت یاد از CDN سریع ما بارگذاری می‌شود

📊 مرحله 5: رصد و بهینه‌سازی

بعد از نصب، به داشبورد چت یاد بروید و:

📈 آمار گفتگوها را بررسی کنید
❓ سوالات پرتکرار را شناسایی کنید
⭐ نرخ رضایت را چک کنید
🔍 سوالاتی که چت‌بات نتوانسته پاسخ دهد را پیدا کنید
📝 محتوای بیشتری برای بهبود پاسخ‌ها آپلود کنید

💡 نکات حرفه‌ای برای بهترین نتیجه

پیام خوش‌آمدگویی جذاب:
به جای "سلام، چطور می‌توانم کمک کنم؟"، چیزی مثل این بنویسید:

"سلام! من دستیار هوشمند فروشگاه هستم 👋
می‌توانم درباره محصولات، قیمت‌ها، ارسال و گارانتی به شما کمک کنم.
چه سوالی دارید؟"
گزینه‌های پیشنهادی:
چند دکمه پیشنهادی برای سوالات متداول اضافه کنید تا کاربران راحت‌تر شروع کنند.
به‌روزرسانی مستمر:
هر بار که محصول، قیمت یا سیاستی تغییر کرد، فایل‌های چت‌بات را به‌روز کنید.
A/B Testing:
پیام‌های مختلف امتحان کنید و ببینید کدام بیشترین engagement را دارد.

🎯 جمع‌بندی

تبریک می‌گویم! شما با موفقیت چت یاد را در سایت خود نصب کردید. 🎉

✅ چیزهایی که انجام دادید:

✓ اکانت چت یاد ساختید
✓ چت‌بات خود را ساختید و داده‌ها آپلود کردید
✓ کد embed را در سایت نصب کردید
✓ تست کردید که همه چیز کار می‌کند
✓ ظاهر را با برند خود هماهنگ کردید

🚀 گام‌های بعدی:

📊 هر هفته آمار را بررسی کنید
📝 محتوای بیشتری آپلود کنید
💬 بازخورد کاربران را بخوانید
🔧 چت‌بات را بهینه کنید

❓ سوالات متداول نصب

Q: آیا نیاز به دانش برنامه‌نویسی دارم؟

A: اصلاً! فقط باید بتوانید یک کد را copy-paste کنید.

Q: آیا روی سرعت سایت تاثیر می‌گذارد؟

A: خیر. اسکریپت به صورت async بارگذاری می‌شود و سایت را کند نمی‌کند.

Q: آیا می‌توانم در صفحات خاص نمایش دهم؟

A: بله! با استفاده از تنظیمات showOnPages می‌توانید کنترل کنید.

Q: اگر مشکلی داشتم چطور؟

A: تیم پشتیبانی ما 24/7 آماده کمک است. فقط در داشبورد روی "پشتیبانی" کلیک کنید.

🎉 آماده شروع هستید؟

در کمتر از 10 دقیقه یک چت‌بات حرفه‌ای بسازید و در سایت خود نصب کنید!

شروع رایگان مستندات کامل

درباره نویسنده: این راهنما توسط تیم فنی چت یاد تهیه شده و با نصب صدها چت‌بات در پلتفرم‌های مختلف تست شده است.