تنظیمات دیالوگ عضویت وب‌پوش

دیالوگ عضویت

دیالوگ عضویت وب‌پوش به صورت پیش فرض همانند شکل زیر می باشد که با صدا زدن تابع Pushe.subscribe() باز می شود.

Pushe Prompt Image

نکته: دقت نمایید که تابع ‍‍‍‍‍Pushe.subscribe() را می‌توانید بر حسب کارکرد سایت‌تان در بخش‌های مختلف کد فراخوانی کنید. مثلا بعد از اینکه کاربر از صفحات داخلی سایت (صفحه‌ی محصول، خبر و ..) بازدید کرد یا مثلا یک اکشن اصلی را انجام داد این تابع را صدا کنید تا در آن موقعیت دیالوگ عضویت وب‌پوش به کاربر نمایش داده شود و منجر به اثربخشی بیشتر شود.

کاستوم کردن دیالوگ عضویت وب‌پوش

برای کاستوم کردن دیالوگ عضویت می توانید یک object جاوا‌اسکریپت به متد Pushe.subscribe مشابه شکل زیر پاس بدهید که در ادامه راهنما راجب تمامی کلید هایی که میشود به به عنوان آپشن به این متد داده شود توضیح داده خواهد شد

const options = {
title: 'عنوان کاستوم شده دیالوگ عضویت وب‌پوش',
content: 'متن کاستوم شده دیالوگ عضویت وب‌پوش',
};
Pushe.subscribe(options)

در مثال بالا یک object با کلید title , content ساختیم و آنرا به متد Pushe.subscribe پاس دادیم و بدین صورت عنوان و متن دیالوگ عضویت را کاستوم کردیم.

نکته مهم: دقت کنید که برای کاستوم کردن دیالوگ عضویت فقط یک options بسازید و تمامی مواردی را که می خواهید تغییر دهید را در این options قرار دهید.

عدم نمایش دیالوگ عضویت وب‌پوش

در صورتی که سایت شما از پروتکل امن https استفاده می کند در صورت تمایل می توانید دیالوگ عضویت وب‌پوش پوشه را نمایش ندهید و مستقیما دیالوگ خود مرورگر را به کاربر نمایش دهید

نکته: نمایش دیالوگ عضویت برای سایتهای با پروتکل http الزامی است و عدم نمایش آن به معنای کار نکردن وب‌پوش می باشد

برای خاموش کردن نمایش دیالوگ عضویت می توانید کلید و مقدار ‍‍‍showDialog: false را در options قرار دهید و به متد Pushe.subscribe بدهید

const options = {
showDialog: false,
};
Pushe.subscribe(options);

تغییر متن‌ها و دکمه‌های دیالوگ عضویت وب‌پوش

برای تغییر متن های دیالوگ عضویت می توانیم مطابق کد زیر عمل کنیم:

const options = {
title: 'عنوان کاستوم شده دیالوگ عضویت وب‌پوش',
content: 'متن کاستوم شده دیالوگ عضویت وب‌پوش',
acceptText: 'متن دکه تایید دیالوگ',
rejectText: 'متن دکمه رد کردن دیالوگ',
};
Pushe.subscribe(options);

قرار دادن آیکن در دیالوگ عضویت وب‌پوش

برای اینکه آیکن مورد نظرتان را در دیالوگ عضویت وب‌پوش نمایش دهید ، ابتدا آنرا در هاست سایت خود آپلود کنید و سپس لینک آنرا مشابه کد زیر در options قرار دهید:

const options = {
icon: 'https://your-site.ir/logo.png',
};
Pushe.subscribe(options);

نکته مهم: برای اینکه بدون مشکل بتوانید آیکن را در دیالوگ نمایش دهید بهتره که آیکن در سرور (هاست) سایت خودتان آپلود کنید و با دامنه سایت خودتان قابل دسترس باشد

تغییر موقعیت نمایش دیالوگ در مرورگر

دیالوگ عضویت وب‌پوش در حالت موبایل در دو موقعیت بالا و پایین صفحه و در حالت دسکتاپ در شش موقعیت بالا-راست ، بالا-وسط ، بالا-چپ ، پایین-راست ، پایین-وسط و پایین-چپ قابل نمایش می باشد که مطابق جدول زیر میتوانید مقداری که برای موقعیت می خواهید را توسط options به متد Pushe.subscribe بدهید.

حالت موبایل

موقعیتvalue
بالاtop
پایینbottom

حالت دسکتاپ

موقعیتvalue
بالا و چپtop-left
بالا و وسطtop-center
بالا و چپtop-right
پایین و چپbottom-left
پایین و وسطbottom-center
پایین و راسطbottom-right
const options = {
mobilePosition: 'top',
position: 'top-center',
};
Pushe.subscribe(options);

جلوگیری از تکرار نمایش دیالوگ پس از رد کردن دیالوگ

به صورت پیش فرض دیالوگ عضویت وب‌پوش هر بار که یک صفحه جدید از سایت تان باز شود نمایش داده می شود و اینکه به صورت پیش فرض اگر کاربر دکمه رد دیالوگ را بفشارد باز هم با باز شدن صفحه جدید در سایت‌تان مجددا دیالوگ نمایش داده می شود.

در صورتی که می خواهید پس از اینکه نمایش دیالوگ توسط کاربر رد شد تا مدت زمانی نمایش مجدد دیالوگ را به تاخیر بیاندازید می توانید از کلید dialogRetryRate استفاده کنید که باید به آن یک مقدار با واحد ثانیه بدهید:

const options = {
dialogRetryRate: 3600,
};
Pushe.subscribe(options);

در مثال بالا مقدار ۳۶۰۰ ثانیه را به کلید dialogRetryRate دادیم و بدین صورت در صورتی که کاربری دکمه رد دیالوگ را بفشارد تا ۳۶۰۰ ثانیه (۱ ساعت) دیگر دیالوگ به این کاربر نمایش داده نخواهد شد.

کاستوم کردن استایل (css) دیالوگ عضویت

پیشنهاد ما اینه که دیالوگ عضویت را کاستوم نکنید و از تم (هایی) که ما ارائه میکنیم استفاده کنید ، به خاطر اینکه این تم ها بر روی اکثر دستگاه‌ها تست شده و در صورتی که مشکلی در آنها و یا نمایش آن در دستگاه یا مرورگر خاصی گزارش شود سریعا توسط ما این مشکل برطرف می شود.

در صورتی که می خواهید نحوه نمایش و رنگ های دیالوگ عضویت را کاستوم کنید می توانید مطابق زیر از کلید هایی که برای المان های مختلف دیالوگ ارائه شده استفاده کنید.

فقط دقت کنید که برای کاستوم کردن باید از روش استایل دادن توسط جاوااسکریپت استفاده کنید.

برای کاستوم کردن می توانید زمانی که دیالوگ در مرورگرتان باز شده ‍‍‍inpect مروگر را باز کرده و کلاس مربوط به المانی که می خواهید تغییر دهید را در مرورگر پیدا کنید و سپس مقادیر css که می خواهید تغییر دهید را به کلید متناظر این html class که در جدول زیر آمده بدهید.

آموزش گوگل برای کار کردن با chrome-devtools در مرورگر کروم

کلاس htmlکلید جاوااسریپت
pushe-dialog-wrapperdialogWrapper
pushe-icon-wrappericonWrapper
pushe-content-wrappercontentWrapper
pushe-buttons-wrapperbuttonsWrapper
pushe-icon-imageicon
pushe-titletitle
pushe-contentcontent
pushe-accept-btnacceptButton
pushe-reject-btnrejectButton
const options = {
style: {
title: {
color: "#333333",
fontSize: "20px",
},
content: {
color: "#666666",
fontSize: "18px",
},
}
};
Pushe.subscribe(options);

در مثال بالا رنگ و سایز فونت title , content را کاستوم کردیم. فقط به این نکته دقت کنید که کلیدهای css در جاوااسکریپت به صورت camelCase تبدیل می‌شوند.