کتابخانه
driver.js یه کتابخانه جاوااسکریپت سبک و بدون وابستگی برای ساختن راهنمای تعاملی داخل صفحه هست. با اون می تونی یه عنصر رو برجسته کنی یا یه تور قدم به قدم بسازی تا کاربر تازه بفهمه هر بخش پنل یا فروشگاه به چه دردی می خوره. با هر فریم ورکی و حتی بدون فریم ورک کار می کنه.
نسخه رسمی و بدون تغییر، از منبع رسمی با مجوز MIT؛ هش هر فایل با منبع بررسی شده است.
۱۷۰ کیلوبایت· ۱۶ فایل· انتشار
SHA-256: 518dc29ede9bb0bc295dd5172eb8e4ec7b04c321137ee2ccf468d23a92b00da3
کاربری که اولین بار وارد داشبورد سایتت می شه، معمولاً نمی دونه از کجا شروع کنه. یا دکمه مهم رو نمی بینه، یا ویژگی جدیدی رو که تازه اضافه کردی اصلاً متوجه نمی شه. driver.js برای همین موقعیت ها ساخته شده: یه کتابخانه جاوااسکریپت برای تور محصول، هایلایت کردن عنصرها و راهنمای قدم به قدم داخل خود صفحه.
طرز کارش ساده هست. با یه انتخابگر CSS می گی کدوم عنصر مهمه، کتابخانه بقیه صفحه رو کم رنگ می کنه و کنار اون عنصر یه کادر کوچک با عنوان و توضیح نشون می ده. اگه چند قدم تعریف کرده باشی، دکمه های قبلی و بعدی هم میاد و کاربر یکی یکی جلو می ره. می تونی فقط یه عنصر رو هم برجسته کنی، مثلاً وقتی می خوای خطای یه فرم رو نشون بدی. سازنده اش Kamran Ahmed هست و مجوز MIT داره، یعنی تو سایت شخصی و پروژه تجاری هم می شه ازش استفاده کرد، فقط اعلان مجوز رو نگه دار. به فریم ورک خاصی هم وابسته نیست. پس هم تو یه قالب وردپرسی با چند خط اسکریپت جواب می ده، هم تو پروژه ای که با فریم ورک های امروزی ساختی.
جاهایی که خیلی به کار میاد: پنل مدیریت سفارشی، فروشگاه اینترنتی که یه بخش جدید به حساب کاربری اش اضافه کردی، سرویس آنلاین که کاربرش باید چند مرحله رو طی کنه، یا فرم چند مرحله ای که می خوای هر بخشش رو توضیح بدی. تو یه فروشگاه ایرانی مثلاً می تونی به مشتری نشون بدی پیگیری سفارش یا آدرس ها کجاست.
جاهایی که بهتره سراغش نری: اگه آموزشت طولانیه و پر از ویدیو و تصویر، یه صفحه راهنمای جدا بهتر جواب می ده. اگه هم تور باید بر اساس رفتار کاربر شاخه شاخه بشه، یا آمار دقیق دیده شدن و رد شدن تور می خوای، باید کدش رو خودت کنارش بنویسی. driver.js فقط یه کتابخانه هست، نه یه پلتفرم آماده برای راه اندازی و آموزش کاربر.
چند نکته موقع استفاده. تور رو کوتاه نگه دار، چون کاربر با ده قدم پشت سر هم خسته می شه و می بنده. انتخابگر عنصرها رو روی چیزی بذار که با عوض شدن قالب تغییر نکنه. چون سایتت فارسیه، راست به چپ بودن متن و فونت داخل کادر راهنما رو حتماً چک کن و اگه لازم بود با CSS درستش کن. نمایش روی موبایل رو هم امتحان کن. اینکه کاربر تور رو دیده یا نه رو هم می تونی خودت مثلاً تو مرورگر ذخیره کنی تا هر بار تکرار نشه. نسخه های رسمی و بدون تغییر driver.js تو مخزن داخلی ما هم هست، پس اگه دسترسی به منابع بین المللی محدود بود، می تونی از همین جا برداری.
استفاده از driver.js تو چند قدم انجام می شه:
اگه تو وردپرس کار می کنی، اسکریپت رو معمولاً از طریق فایل functions.php قالب یا یه افزونه کوچک فقط تو صفحه هایی که تور لازم دارن اضافه می کنی.
یه کتابخانه جاوااسکریپت برای راهنمای داخل صفحه هست. یه عنصر رو برجسته می کنه، بقیه صفحه رو کم رنگ می کنه و کنارش یه کادر توضیح نشون می ده. می تونی باهاش تور قدم به قدم بسازی تا کاربر جدید بدونه هر بخش سایت یا پنل چیه.
نه. بدون وابستگی کار می کنه و فریم ورک خاصی لازم نداره. هم با یه اسکریپت ساده تو یه صفحه HTML یا قالب وردپرس جواب می ده، هم تو پروژه هایی که با فریم ورک های جاوااسکریپتی ساخته شدن. فقط عنصرهای هدف باید با انتخابگر CSS قابل پیدا شدن باشن.
بله. متن کادر راهنما همون HTML و CSS معمولیه، پس می تونی متن فارسی بذاری. فقط بعد از اضافه کردن، راست به چپ بودن متن، چیدمان دکمه ها و فونت کادر رو چک کن و اگه لازم بود با CSS خودت تنظیمش کن.
driver.js با مجوز MIT منتشر شده که یکی از آزادترین مجوزهاست. استفاده تو پروژه شخصی و تجاری و تغییر کد معمولاً مشکلی نداره، به شرطی که اعلان مجوز و حق نشر رو نگه داری. اگه پروژه ات حساسیت حقوقی داره، متن مجوز رو خودت هم یه بار بخون.
خود کتابخانه فقط تور رو نمایش می ده و این منطق رو باید خودت اضافه کنی. معمولاً بعد از بسته شدن یا تموم شدن تور، یه نشانه تو localStorage مرورگر یا تو اطلاعات حساب کاربر ذخیره می کنی و دفعه بعد قبل از شروع تور اون رو چک می کنی.
نام کتابخانه، افزونه یا قالب را بفرستید؛ پس از بررسی، نسخه‌های رسمی آن به مخزن اضافه می‌شود.