تنظیمات ابزارک
همهٔ گزینه‌هایی که ابزارک می‌خواند، با مقدار پیش‌فرضشان، و ابزاری که کد را برایتان می‌سازد.
ابزارک را با ویژگی‌های data-* روی تگ اسکریپتش تنظیم می‌کنید. نه شیء تنظیمات JavaScript دارد و نه تابعی که صدا بزنید. فقط سه ویژگی الزامی است.
ساختن کد ابزارک
یک گزینه را عوض کنید تا تغییر کد را ببینید. شناسه‌های داخل کد نمونه‌اند؛ کد واقعی با شناسه‌های خودتان را صفحهٔ ابزارک در کنسول به شما می‌دهد.
<script
src="https://app.daneshyar.info/widget.js"
data-api-key="dk_live_9f3aC2xQ7mB1vT8sE4nK6pR0jY5wZ2hL"
data-app-id="2d7c0e91-4a5b-4f8e-b3c6-9e1f0a7d5c42"
data-workspace-id="8f14e45f-ceea-467a-9f4c-1a2b3c4d5e6f"
async
></script>فقط گزینه‌هایی که عوض کرده‌اید به کد اضافه می‌شوند. هر چه نیامده باشد، مقدار پیش‌فرضش را می‌گیرد.
ویژگی‌های الزامی
اگر یکی از این سه نباشد، اسکریپت متوقف می‌شود و خطایی در کنسول مرورگر می‌نویسد.
| ویژگی | نوع | توضیح |
|---|---|---|
data-api-key (الزامی) | string | کلید API اپ شما. در کد صفحه‌تان دیده می‌شود. |
data-app-id (الزامی) | uuid | شناسهٔ اپی که فضای کاری به آن تعلق دارد. |
data-workspace-id (الزامی) | uuid | فضای کاری‌ای که ابزارک از روی آن پاسخ می‌دهد. |
ویژگی‌های اختیاری
هر ویژگی را که نگذارید، مقدار پیش‌فرضش به کار می‌رود.
| ویژگی | نوع | توضیح |
|---|---|---|
data-locale | "fa" | "en" | زبان متن‌های خود ابزارک و جهت نوشتن آن.پیش‌فرض: fa |
data-mode | "bubble" | "inline" | bubble یک دکمهٔ شناور در گوشهٔ صفحه می‌گذارد. inline داخل یک عنصر صفحه‌تان جا می‌گیرد.پیش‌فرض: bubble |
data-target | CSS selector | فقط در حالت درون‌صفحه‌ای: انتخابگر CSS عنصری که گفت‌وگو داخلش قرار می‌گیرد.پیش‌فرض: #daneshyar-widget |
data-position | "right" | "left" | فقط در حالت شناور: گوشه‌ای که دکمه در آن قرار می‌گیرد.پیش‌فرض: right |
data-offset | integer, 0–120 | فقط در حالت شناور: فاصله از گوشهٔ صفحه، به پیکسل.پیش‌فرض: 20 |
data-theme | "auto" | "light" | "dark" | auto از تنظیم سیستم بازدیدکننده پیروی می‌کند.پیش‌فرض: auto |
data-accent | #rrggbb | رنگ برند برای دکمه‌ها و بخش‌های برجسته. شش رقم hex بنویسید.پیش‌فرض: #1a8b8b |
data-title | string | متن بالای گفت‌وگو.پیش‌فرض: خالی (متن پیش‌فرض ابزارک) |
data-subtitle | string | خط کوچک‌تر زیر عنوان.پیش‌فرض: خالی (متن پیش‌فرض ابزارک) |
data-greeting | string | اولین پیامی که بازدیدکننده می‌بیند.پیش‌فرض: خالی (متن پیش‌فرض ابزارک) |
data-launcher-label | string | متن کنار دکمه. اگر نگذارید، فقط خود دکمه نمایش داده می‌شود.پیش‌فرض: خالی (متن پیش‌فرض ابزارک) |
حالت شناور و درون‌صفحه‌ای
حالت bubble (پیش‌فرض) یک دکمهٔ گرد در گوشهٔ صفحه می‌گذارد. با کلیک روی آن، پنلی ۴۰۰ در ۶۴۰ پیکسل بالای دکمه باز می‌شود و با Escape بسته می‌شود.
حالت inline گفت‌وگو را داخل عنصری از صفحه‌تان می‌گذارد. به‌طور پیش‌فرض دنبال #daneshyar-widget می‌گردد و با data-target می‌توانید عوضش کنید. به عنصر ارتفاع بدهید: اگر ارتفاع نداشته باشد، ابزارک ۶۴۰ پیکسل در نظر می‌گیرد و هیچ‌وقت کمتر از ۴۲۰ پیکسل نمی‌شود.
<div id="daneshyar-widget" style="height: 640px"></div>
<script
src="https://app.daneshyar.info/widget.js"
data-api-key="dk_live_9f3aC2xQ7mB1vT8sE4nK6pR0jY5wZ2hL"
data-app-id="2d7c0e91-4a5b-4f8e-b3c6-9e1f0a7d5c42"
data-workspace-id="8f14e45f-ceea-467a-9f4c-1a2b3c4d5e6f"
data-mode="inline"
async
></script>روی صفحه‌های باریک‌تر از ۴۸۰ پیکسل، حالت شناور تمام‌صفحه باز می‌شود. برای این کار لازم نیست چیزی اضافه کنید.
رویدادها و callbackهادر نقشهٔ راه: به‌زودی
ابزارک فعلاً رویداد یا callback ندارد. نمی‌توانید آن را از کد خودتان باز کنید یا وقتی بازدیدکننده سؤالی می‌پرسد خبردار شوید. اگر امروز به این نیاز دارید:
- از حالت درون‌صفحه‌ای استفاده کنید و عنصرش را خودتان نشان دهید یا پنهان کنید.
- رابط گفت‌وگوی خودتان را روی REST API و از سمت سرور بسازید.
- به ما بگویید به کدام رویدادها نیاز دارید تا طراحی‌شان کنیم.