شخصی‌سازی ظاهر ویجت چت: رنگ، لوگو، اندازه و جای دکمه
رنگ، لوگو، اندازه و جای دکمه ویجت چت آیوا را چطور تنظیم کنید؛ هر گزینه کجای ویجت دیده می‌شود، در کدام پلن فعال است و چطور ظاهر ویجت را با برندتان هماهنگ کنید.
ویجت چت نخستین چیزی است که بازدیدکننده از دستیار شما می‌بیند؛ حتی پیش از آنکه سؤالی بپرسد. ویجتی که رنگ و نشانش با سایت هماهنگ است، بخشی از خود سایت به نظر می‌رسد و کاربر با اطمینان بیشتری با آن گفتگو می‌کند. ویجتی با رنگ نامربوط یا دکمه‌ای که روی بخش مهمی از صفحه افتاده، بیشتر شبیه یک افزودنی مزاحم است.
در این راهنما همه گزینه‌های قدم «تنظیمات ظاهری دستیار» را مرور می‌کنیم: دو رنگ ویجت، لوگو، اندازه دکمه و جای آن. برای هر گزینه می‌گوییم کجای ویجت دیده می‌شود و در کدام پلن فعال است. بعد سراغ رفتار ویجت در موبایل و چند توصیه برای هماهنگی با برند می‌رویم.
تنظیمات ظاهری کجاست؟
این تنظیمات قدم دوم ویزارد ساخت دستیار است و در پنل با عنوان «تنظیمات ظاهری دستیار» دیده می‌شود. اگر دستیار را قبلاً ساخته‌اید، در «مدیریت چت‌بات» منوی عملیات کنار آن را باز کنید، «ویرایش» را بزنید و در نوار پیشرفت به «تنظیمات ظاهری» بروید. مرور همه قدم‌ها را در آموزش ساخت چت‌بات با آیوا آورده‌ایم.
کنار این قدم، پیش‌نمایش زنده ویجت را می‌بینید و هر تغییری بلافاصله در آن اعمال می‌شود. وقتی از نتیجه راضی بودید، «ثبت و ادامه» را بزنید تا تنظیمات ذخیره شود.
پلن هر گزینه این‌طور است:
- «رنگ چت‌بات»، «رنگ پس‌زمینه چت»، «اندازه دکمه چت» و «موقعیت نمایش»: همه پلن‌ها، از جمله دوره آزمایشی
- «لوگوی چت‌بات»: آیوا هوشمند و بالاتر
نامی که بالای پنجره گفتگو می‌بینید هم از فیلد «نام دستیار» در قدم اول می‌آید. پس اگر می‌خواهید ویجت نام برندتان را نشان دهد، آنجا را هم بررسی کنید.
دو رنگ ویجت: «رنگ چت‌بات» و «رنگ پس‌زمینه چت»
ویجت آیوا دو رنگ قابل تنظیم دارد و هر کدام نقش جداگانه‌ای دارد:
| رنگ | کجا دیده می‌شود |
|---|---|
| «رنگ چت‌بات» | دکمه گرد چت، نوار بالای پنجره گفتگو، حباب پیام‌های کاربر، دکمه ارسال، سؤال‌های پیشنهادی و گزینه‌های منوی ویجت |
| «رنگ پس‌زمینه چت» | ته‌رنگ ملایم پس‌زمینه پنجره گفتگو و دکمه منو |
برای هر رنگ، هفت رنگ آماده دارید: صورتی، بنفش، سبز، آبی، کهربایی، سبزآبی و مرجانی. اگر رنگ دقیق برندتان را می‌خواهید، کد رنگ را، که شش نویسه دارد و با علامت # شروع می‌شود، در کادر کنار عنوان وارد کنید یا رنگ را از پالت انتخاب کنید.
چند توصیه برای انتخاب رنگ:
- برای «رنگ چت‌بات» از رنگ اصلی برندتان استفاده کنید، همان رنگی که دکمه‌های اصلی سایت دارند. این‌طور ویجت بخشی از طراحی سایت به نظر می‌رسد.
- به خوانایی دقت کنید. نام دستیار در نوار بالا و متن پیام‌های کاربر روی «رنگ چت‌بات» به رنگ سفید نوشته می‌شوند. رنگ‌های خیلی روشن، مثل زرد کم‌رنگ یا خاکستری روشن، این متن‌ها را کم‌خوانا می‌کنند. اگر رنگ برندتان روشن است، یک درجه تیره‌تر از آن را انتخاب کنید.
- «رنگ پس‌زمینه چت» کم‌رنگ دیده می‌شود. این رنگ فقط به‌صورت ته‌رنگ روی زمینه سفید می‌نشیند، پس می‌توانید رنگ دوم برندتان را برایش بگذارید. نتیجه را حتماً در پیش‌نمایش ببینید.
- کد رنگ را حدسی انتخاب نکنید. کد دقیق را از راهنمای برند یا از طراح سایت بگیرید تا رنگ ویجت با بقیه سایت یکی باشد.
لوگوی چت‌بات
«لوگوی چت‌بات» در آیوا هوشمند و بالاتر فعال است. فایل باید PNG، JPG یا SVG و حداکثر ۳ مگابایت باشد. با «انتخاب فایل» آن را بارگذاری می‌کنید و بعد از آن، دکمه‌های «حذف» و «تغییر» را برای عوض کردنش دارید. در پلن‌های دیگر، به‌جای لوگوی شما نشان آیوا نمایش داده می‌شود.
لوگو در دو جا دیده می‌شود: داخل دکمه گرد چت که زمینه‌اش «رنگ چت‌بات» است، و بالای پنجره گفتگو کنار نام دستیار. خود پنل هم یادآوری می‌کند که لوگو اعتماد کاربران را بیشتر می‌کند؛ چون کاربر مطمئن می‌شود با دستیار همان کسب‌وکار حرف می‌زند.
برای اینکه لوگو در این اندازه کوچک خوب دیده شود:
- از نسخه مربعی یا نشانه تصویری برند استفاده کنید، نه لوگوی نوشتاری پهن. لوگوی پهن در دایره کوچک بسیار ریز می‌شود.
- فایل با پس‌زمینه شفاف، یعنی PNG یا SVG، بهتر است؛ این‌طور «رنگ چت‌بات» دور لوگو دیده می‌شود و کادر سفید اضافه ندارد.
- جزئیات ریز و نوشته‌های کوچک در این اندازه خوانده نمی‌شوند. نشانه ساده‌تر نتیجه بهتری دارد.
اندازه و جای دکمه چت
در بخش «تنظیمات دکمه چت» دو گزینه دارید که در همه پلن‌ها فعال‌اند:
- «اندازه دکمه چت»: کوچک، متوسط یا بزرگ.
- «موقعیت نمایش»: پایین راست، که پنل آن را «موقعیت استاندارد و محبوب» معرفی می‌کند، یا پایین چپ، که «مناسب سایت‌های چپ‌چین» توضیح داده شده است.
برای انتخاب اندازه، به نوع سایت فکر کنید. در سایت‌های پرمحتوا و فروشگاه‌هایی که صفحه‌هایشان شلوغ است، دکمه کوچک کمتر جلوی چشم را می‌گیرد. اگر پشتیبانی آنلاین برایتان مهم است و می‌خواهید کاربر حتماً دکمه را ببیند، متوسط یا بزرگ را امتحان کنید.
برای انتخاب گوشه، به عناصر شناور سایتتان نگاه کنید: دکمه بازگشت به بالا، دکمه تماس تلفنی، نوار پذیرش کوکی یا نوار چسبان «افزودن به سبد» در موبایل. گوشه‌ای را انتخاب کنید که خالی است. اگر هیچ گوشه‌ای کاملاً خالی نبود، می‌توانید با یک خط CSS ویجت را کمی بالاتر ببرید؛ در بخش آخر همین مقاله توضیح داده‌ایم.
ویجت روی موبایل چطور دیده می‌شود؟
روی گوشی و صفحه‌های کوچک، دکمه چت در همان گوشه‌ای که انتخاب کرده‌اید می‌ماند، اما پنجره گفتگو پس از باز شدن تمام صفحه را می‌گیرد. این کار خواندن جواب‌ها و تایپ کردن را روی صفحه کوچک راحت‌تر می‌کند. رابط ویجت فارسی و راست‌به‌چپ است و با فونت وزیرمتن نمایش داده می‌شود.
پیش از انتشار، ویجت را روی گوشی خودتان آزمایش کنید:
- سایت را با گوشی باز کنید و ببینید دکمه چت روی چیز مهمی، مثل منوی پایین صفحه یا دکمه خرید، نیفتاده باشد.
- روی دکمه بزنید و خوانایی نوار بالای پنجره را با «رنگ چت‌بات» فعلی بررسی کنید.
- اگر در قدم اول «اطلاعات ضروری» را فعال کرده‌اید، ببینید فرم پیش از گفتگو روی صفحه کوچک راحت پر می‌شود.
- یک سؤال بپرسید و دکمه بستن را بزنید تا مطمئن شوید کاربر به‌راحتی به صفحه سایت برمی‌گردد.
نکته: اگر بیشتر بازدیدکنندگانتان از گوشی می‌آیند، تصمیم نهایی درباره رنگ، اندازه و جای دکمه را بر اساس آزمایش روی گوشی بگیرید، نه روی رایانه.
هماهنگی ویجت با برند: یک چک‌لیست کوتاه
ظاهر ویجت فقط رنگ نیست. پیش از انتشار این موارد را مرور کنید:
- «نام دستیار» همان نام برند یا کسب‌وکار شماست و بالای پنجره گفتگو دیده می‌شود.
- «رنگ چت‌بات» با رنگ دکمه‌های اصلی سایت یکی است و متن سفید روی آن خواناست.
- اگر پلن آیوا هوشمند یا بالاتر دارید، لوگوی مربعی و ساده بارگذاری کرده‌اید.
- لحن جواب‌ها با صدای برندتان جور است. انتخاب لحن را در راهنمای تنظیمات پاسخ‌گویی چت‌بات توضیح داده‌ایم.
- دکمه چت روی هیچ عنصر مهمی در رایانه و گوشی نیفتاده است.
این را هم بدانید که پایین پنجره گفتگو عبارت «قدرت گرفته از آیوا» در همه پلن‌ها نمایش داده می‌شود. همچنین استایل‌های ویجت از استایل‌های سایت شما جدا نگه داشته می‌شوند؛ پس ویجت ظاهر منو، دکمه‌ها و فرم‌های سایتتان را به هم نمی‌ریزد.
تغییرات پیشرفته‌تر با کد
اگر برنامه‌نویس دارید، دو کار دیگر هم ممکن است. اول، جابه‌جایی عمودی ویجت با CSS. فاصله پیش‌فرض ویجت از پایین صفحه ۲۰ پیکسل است و با این قاعده CSS می‌توانید آن را بیشتر کنید:
#aiva-chatbot-root .chatbot-container { bottom: 80px !important; }
دوم، تغییر ظاهر در یک صفحه خاص با جاوااسکریپت؛ مثلاً رنگ یا نام دیگری برای صفحه یک کمپین. این تغییرها فقط در همان صفحه اعمال می‌شوند و تنظیمات ذخیره‌شده در پنل را عوض نمی‌کنند. نمونه‌کدها را در راهنمای جاوااسکریپت ویجت آیوا و صفحه مستندات ویجت ببینید.
سؤالات متداول
بعد از تغییر رنگ یا لوگو، باید کد نصب را عوض کنم؟
نه. کد نصب فقط شناسه دستیار را دارد و ویجت تنظیمات ظاهری را از آیوا می‌خواند. بعد از ذخیره، ظاهر جدید بدون دست زدن به کد سایت اعمال می‌شود. اگر هنوز ویجت را نصب نکرده‌اید، راهنمای نصب چت‌بات روی سایت را ببینید.
می‌توانم متن پیام خوشامد را عوض کنم؟
نه. متن پیام خوشامد ثابت است و فقط می‌توانید آن را با گزینه «خوشامدگویی خودکار» در «تنظیمات پاسخ‌گویی» روشن یا خاموش کنید. این گزینه در آیوا هوشمند و بالاتر فعال است.
چرا لوگویم داخل دکمه چت خیلی کوچک دیده می‌شود؟
لوگو طوری در دایره دکمه جا داده می‌شود که کامل دیده شود. اگر لوگو پهن یا حاشیه سفید زیادی دارد، در این اندازه ریز می‌شود. نسخه مربعی با پس‌زمینه شفاف و بدون حاشیه اضافه بارگذاری کنید.
جمع‌بندی
ظاهر ویجت آیوا با پنج گزینه تنظیم می‌شود: دو رنگ، اندازه دکمه و جای آن در همه پلن‌ها، و لوگو در آیوا هوشمند و بالاتر. رنگ اصلی برند را با دقت به خوانایی انتخاب کنید، لوگوی مربعی و ساده بگذارید و تصمیم نهایی را با آزمایش روی گوشی بگیرید. ویجتی که شبیه خود سایت باشد، گفتگو را برای مشتری طبیعی‌تر می‌کند.
اگر هنوز دستیارتان را نساخته‌اید، ساخت دستیار را رایگان شروع کنید و رنگ‌های برندتان را همین حالا در پیش‌نمایش امتحان کنید.