نصب چت آنلاین روی شاپیفای، ویکس، اسکوئراسپیس و وب‌فلو
قدم‌به‌قدم ویجت چت هدهد را روی شاپیفای، ویکس، اسکوئراسپیس، وب‌فلو یا هر سایتی با گوگل تگ منیجر نصب کنید: کد را کجا بگذارید و چه چیزی را چک کنید.
در این مطلب
ویجت چت آنلاین هدهد یک قطعهکد کوتاه جاوااسکریپت است، یعنی روی هر سایت‌سازی که اجازهٔ افزودن کد بدهد کار میکند. این راهنما دقیقاً نشان میدهد کد را روی شاپیفای، ویکس، اسکوئراسپیس و وب‌فلو کجا بگذارید، و اگر نمی‌خواهید به کد سایت دست بزنید، چطور با گوگل تگ منیجر اضافه‌اش کنید.
سایتتان وردپرس یا ووکامرس است؟ از راهنمای وردپرس شروع کنید؛ یک افزونهٔ آماده دارد.
قبل از شروع
قطعهکد نصب صندوقتان را لازم دارید. اگر هنوز صندوق وب‌سایت نساخته‌اید، قدم‌های ۱ تا ۴ راهنمای نصب روی سایت چند دقیقه بیشتر طول نمی‌کشد. هر وقت خواستید میتوانید دوباره کد را کپی کنید: «تنظیمات ← صندوق‌های ورودی» را باز کنید، صندوق وب‌سایت را انتخاب کنید و در تب «تنظیمات»، پیش‌نمایش ویجت را روی «اسکریپت» بگذارید.
| پلتفرم | کد کجا می‌رود | نکته |
|---|---|---|
| شاپیفای | کد پوسته، فایل theme.liquid |
در مراحل پرداخت (Checkout) نمایش داده نمی‌شود |
| ویکس | Settings ← Custom Code | سایت باید منتشر شده و دامنه‌اش وصل باشد |
| اسکوئراسپیس | Code Injection ← Footer | در پلن Basic در دسترس نیست |
| وب‌فلو | Site settings ← Custom code ← Footer code | بعد از ذخیره باید سایت را منتشر کنید |
| هر سایتی | گوگل تگ منیجر، تگ Custom HTML | میشود تا موافقت کاربر با کوکی صبر کرد |
نام منوها در ادامه متعلق به خود پلتفرم‌هاست و اگر پلتفرم به‌روز شده باشد یا پنل‌تان به زبان دیگری باشد ممکن است فرق کند.
شاپیفای
- در پنل شاپیفای به Online Store ← Themes بروید.
- کنار پوسته‌ای که می‌خواهید ویرایش کنید روی دکمهٔ «…» بزنید و Duplicate را انتخاب کنید. کار روی نسخهٔ کپی امتحان امن را ممکن میکند.
- روی کپی دوباره «…» را بزنید و Edit code را انتخاب کنید.
- در پوشهٔ Layout فایل
theme.liquidرا باز کنید. - به انتهای فایل بروید و قطعهکد هدهد را درست بالای تگ بستن
</body>بچسبانید. - ذخیره کنید، کپی را پیش‌نمایش کنید و وقتی همه‌چیز درست بود، منتشرش کنید.
نکته‌ها:
- کد داخل پوسته می‌ماند. اگر پوسته را عوض کنید باید در پوستهٔ تازه هم اضافه‌اش کنید. شاپیفای هم هشدار میدهد که تغییرات کد پوسته ممکن است در به‌روزرسانی پوسته از بین برود.
- پوسته‌ای که فقط در حال آزمایشش هستید قابل ویرایش نیست.
- بخش پرداخت (Checkout) شاپیفای جدا از پوستهٔ شماست؛ پس ویجت در صفحههای فروشگاه (خانه، مجموعه‌ها، محصول، سبد خرید) دیده میشود ولی در خود مرحله‌های پرداخت نه.
ویکس
- در داشبورد سایت به Settings بروید و در بخش «Development & integrations» گزینهٔ «Custom Code» را باز کنید.
- «+ Add Custom Code» را بزنید و قطعهکد هدهد را بچسبانید.
- یک نام قابل‌تشخیص بدهید، مثلاً «Hodhod chat».
- زیر «Add Code to Pages» گزینهٔ «All pages» و زیر «Place Code in» گزینهٔ «Body – end» را انتخاب کنید.
- تعیین کنید کد یک‌بار در هر بازدید بارگذاری شود یا در هر صفحه، و «Apply» را بزنید.
نکته‌ها:
- سایت باید منتشر شده و دامنه‌اش وصل باشد، و وصل‌کردن دامنه به پلن Premium نیاز دارد.
- قطعه‌کدها به دامنه گره خورده‌اند: اگر دامنهٔ دیگری به سایت بدهید، حذف می‌شوند.
- ویکس برای کد شخص ثالث پشتیبانی نمی‌دهد. اگر بعد از انتشار ویجت نمایش داده نشد، راهنمای کد سفارشی ویکس را برای محدودیت‌های تازه ببینید.
اسکوئراسپیس
- پنل سایتتان را باز کنید و به Website Tools ← Code Injection بروید. (اسکوئراسپیس بین نسخه‌ها منوها را عوض میکند؛ اگر مسیر فرق داشت دنبال «Code Injection» بگردید.)
- قطعهکد هدهد را در کادر «Footer» بچسبانید.
- «Save» را بزنید.
نکته‌ها:
- Code Injection در پلن‌های Core، Plus و Advanced (و بعضی پلن‌های قدیمی) هست و در Basic نیست.
- کد فوتر در همهٔ صفحهها قبل از تگ بستن
</body>اضافه میشود. - ممکن است اسکوئراسپیس تا وقتی وارد حسابتان هستید اسکریپت‌های تزریق‌شده را اجرا نکند؛ نتیجه را در یک پنجرهٔ ناشناس روی سایت منتشرشده ببینید.
وب‌فلو
- Site settings پروژه را باز کنید و به تب «Custom code» بروید.
- قطعهکد هدهد را در «Footer code» بچسبانید تا درست قبل از تگ بستن
</body>بارگذاری شود و «Save changes» را بزنید. - سایت را منتشر (Publish) کنید. کد سفارشی در پیش‌نمایش دیده میشود ولی فقط بعد از انتشار زنده میشود.
نکته‌ها:
- اگر می‌خواهید ویجت فقط روی یک صفحه باشد، از تنظیمات همان صفحه و کادر «Before
</body>tag» استفاده کنید. - اگر تنظیم را پیدا نکردید، راهنمای وب‌فلو را ببینید که پلن و نقش شما چه اجازه‌ای دارد.
هر سایتی با گوگل تگ منیجر
اگر گوگل تگ منیجر از قبل روی سایتتان هست، میتوانید بدون ویرایش سایت ویجت را اضافه کنید:
- در تگ منیجر به Tags بروید و «New» را بزنید.
- نوع تگ «Custom HTML» را انتخاب کنید و قطعهکد هدهد را بچسبانید.
- در Triggering گزینهٔ «All Pages» را انتخاب کنید.
- ذخیره کنید، بعد کانتینر را Submit و Publish کنید.
ویجت یک کوکی کوچک در مرورگر بازدیدکننده نگه می‌دارد تا گفت‌وگو از صفحه‌ای به صفحهٔ دیگر ادامه پیدا کند. اگر سایتتان از بازدیدکننده برای کوکی رضایت می‌گیرد، از تریگر ابزار مدیریت رضایتتان استفاده کنید تا تگ فقط بعد از رضایت اجرا شود.
امتحانش کنید
سایت منتشرشده را در یک پنجرهٔ ناشناس مرورگر باز کنید. دکمهٔ چت باید گوشهٔ پایین دیده شود؛ یک پیام آزمایشی بفرستید و ببینید در «گفتگوها»ی هدهد می‌رسد یا نه.
اگر در تب «پیکربندی» صندوق «دامنه‌های مجاز» را تنظیم کرده‌اید، همهٔ دامنه‌هایی را که ویجت روی آن‌ها اجرا میشود با کاما جدا کنید: دامنهٔ اصلی و هر دامنهٔ پیش‌نمایش یا پیش‌فرضی که روی آن امتحان می‌کنید (مثل your-store.myshopify.com، yoursite.wixsite.com یا yourproject.webflow.io). وگرنه ویجت روی دامنه‌هایی که جا افتاده‌اند پنهان می‌ماند.
اگر ویجت نمایش داده نشد
- مطمئن شوید منتشر کرده‌اید. ویکس و وب‌فلو کد سفارشی را فقط روی سایت منتشرشده اجرا می‌کنند.
- محل را بررسی کنید. قطعهکد باید در بخش فوتر یا «Body – end» باشد که در همهٔ صفحهها بارگذاری میشود.
- دامنه‌های مجاز را بررسی کنید. دامنه‌ای که روی آن امتحان می‌کنید باید در فهرست باشد.
- دنبال نسخهٔ دوم بگردید. اگر دو دکمهٔ چت می‌بینید، کد دو بار اضافه شده، مثلاً هم در پوسته هم در تگ منیجر. یکی را نگه دارید.
- بدون مسدودکنندهٔ تبلیغات امتحان کنید و کنسول مرورگر (F12) را برای خطا ببینید.
سؤالات متداول
هدهد برای شاپیفای یا ویکس اپ دارد؟
فعلاً نه. قطعهکد روی هر کدام از این پلتفرمها کار میکند؛ برای وردپرس افزونه داریم.
ویجت فروشگاهم را کند نمیکند؟
قطعهکد ناهمگام (async) بارگذاری میشود و جلوی رندر صفحه را نمیگیرد. برای اطمینان، صفحههایتان را قبل و بعد در PageSpeed Insights بسنجید.
میشود ویجت را فقط در بعضی صفحهها نشان داد؟
بله. ویکس موقع افزودن کد اجازهٔ انتخاب صفحههای مشخص را میدهد و در گوگل تگ منیجر میتوانید شرط نشانی صفحه را به تریگر اضافه کنید.
