onesignal pushe.co s-3.664-0.699-5.062-2.099c-1.397-1.398-2.097-3.087-2.097-5.065s0.699-3.667,2.097-5.065c1.397-1.399,3.085-2.099,5.062-2.099 s3.664,0.699,5.062,2.099C223.888,120.556,224.587,122.244,224.587,124.223z"/>

وب‌پوش: نمایش نوتیفیکشن به کاربران وبسایت شما


برای مشاهده راهنمای وب پوش نسخه v1 اینجا کلیک کنید

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

وارد کردن سایت در کنسول

ابتدا وارد کنسول پوشه شده و از پنل سمت راست روی منوی Web / وب کلیک کرده و سپس روی دکمه وب‌سایت جدید کلیک کنید

همانند شکل زیر در صفحه باز شده در قسمت نام سایت نام دلخواه‌تان را برای سایت خود وارد کنید و در قسمت دامنه سایت ، دامنه سایت‌تان را بدون http و www وارد کنید

دقت نمایید در صورتی که سایت‌تان http می‌باشد گزینه وب‌سایت تنها با HTTP کار می‌کند را انتخاب کنید و باید یک نام هم به عنوان زیردامنه انتخاب نمایید.


###### دقت کنید که زیردامنه شما مقدار مناسبی داشته باشد چون مرورگرها نام دامنه (در این حالت your-subdomin.wp.pushe.co) را هم در پوش نمایش می دهند.

قرار دادن فایل‌های کتابخانه‌ و راه اندازی وب‌پوش

اضافه کردن فایل pushe-sw.js (فقط برای سایت‌های https)

در صورتی که سایت شما HTTPS می باشد یک فایل با نام pushe-sw.js در شاخه اصلی سایت‌تان ساخته و اسکریپت زیر را درون آن قرار دهید:

importScripts("https://static.pushe.co/pusheweb-sw.js");

دقت نمایید که حتما فایل pushe-sw.js باید توسط آدرس https://your-site-domain/pushe-sw.js قابل مشاهده باشد.


برای اضافه کردن کتابخانه پوشه به سایت خود می‌توانید یکی از روش‌های زیر را انتخاب کنید:

استفاده از تگ script در html

برای راه اندازی کردن کتابخانه پوشه و اجرای آن در وب‌سایت خود کد زیر را در تگ head یا انتهای تگ body صفحه اصلی سایت (index.html) قرار دهید.

<script src="https://static.pushe.co/pusheweb.js"></script>
<script>
    Pushe.init("app_id");
    Pushe.subscribe();
</script>
دقت شود که مقدار app_id شما همانی است که در کنسول بعد از مرحله ایجاد وب‌سایت به عنوان پارامتر تابع ‍‍‍Pushe.init همانند Pushe.init('your-app-id') مشاهده می کنید.
تابع توضیحات
‍‍‍Pushe.init('app_id'); این خط کد مربوط به راه اندازی کتابخانه پوشه درون سایت شما می باشد و باید آنرا در صفحه اصلی سایت خود قرار دهید ، دقت شود که متغیری که آن قبول می کند همان ‍‍app_id می باشد که پس از ایجاد سایت خود در کنسول مقدار آن به شما داده می شود.
Pushe.subscribe(); این خط کد برای گرفتن اجازه پوش از کاربر می باشد. با قرار دادن این کد یک دیالوگ که در قسمت بعد با جزئیات توضیح داده شده به کاربر نمایش داده می شود و در صورتی که کاربر دکمه قبول می کنم را بزند دیالوگ دیفالت خود مرورگر به کاربر نمایش داده می شود و کاربر باید گزینه Allow را انتخاب نماید تا بتواند پوش های شما را دریافت کند.

استفاده از npm یا yarn

برای نصب کتابخانه با استفاده از npm با رفتن به روت پروژه خود در ترمینال کد زیر را وارد نمایید:

npm i -P pushe-webpush

یا برای اضافه کردن کتابخانه با yarn دستور زیر را وارد نمایید:

yarn add pushe-webpush

پس از نصب شدن کتابخانه می توانید آن‌ را توسط کد زیر در فایل مورد نظر خود ایمپورت کنید و توابع مورد نیاز را صدا بزنید:

var Pushe = require("pushe-webpush");

Pushe.init("app_id");
Pushe.subscribe();

یا در صورتی که از ES6 استفاده می کنید از کد زیر استفاده کنید:

import Pushe from "pushe-webpush";

Pushe.init("app_id");
Pushe.subscribe();
دقت شود که مقدار app_id شما همانی است که در کنسول بعد از مرحله ایجاد وب‌سایت به عنوان پارامتر تابع ‍‍‍Pushe.init همانند Pushe.init('your-app-id') مشاهده می کنید.
تابع توضیحات
‍Pushe.init('app_id'); این خط کد مربوط به راه اندازی کتابخانه پوشه درون سایت شما می باشد و باید آنرا در صفحه اصلی سایت خود قرار دهید ، دقت شود که متغیری که آن قبول می کند همان ‍‍app_id می باشد که پس از ایجاد سایت خود در کنسول مقدار آن به شما داده می شود.
‍Pushe.subscribe(); این خط کد برای گرفتن اجازه پوش از کاربر می باشد. با قرار دادن این کد یک دیالوگ که در قسمت بعد با جزئیات توضیح داده شده به کاربر نمایش داده می شود و در صورتی که کاربر دکمه قبول می کنم را بزند دیالوگ دیفالت خود مرورگر به کاربر نمایش داده می شود و کاربر باید گزینه Allow را انتخاب نماید تا بتواند پوش های شما را دریافت کند.

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

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

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

دادن پارامتر به Pushe.subscribe() اختیاری می باشد و در صورتی که می خواهید دیالوگ را متناسب نیاز خودتان در بیاورید از آن استفاده کنید.

var options = {
    showDialog: boolean,     // true
    title: string,           // 'عضویت در وب‌پوش'
    content: string,         // 'می‌خواهید از آخرین اخبار و پیشنهادات آگاه شوید؟'
    acceptText: string,      // 'قبول می کنم'
    rejectText: string,      // 'تمایلی ندارم'
    icon: string,            // 'url of your icon'
    useCustomCSS: boolean,   // false
    fixedPosition: boolean,  // true
    position: string,        // 'top-center'
    mobilePosition: string,  // 'top'
    dialogRetryRate: number, // 3600 
    style: {
        dialogWrapper:  object, // corresponding html class: pushe-dialog-wrapper
        iconWrapper:    object, // corresponding html class: pushe-icon-wrapper
        contentWrapper: object, // corresponding html class: pushe-content-wrapper
        buttonsWrapper: object, // corresponding html class: pushe-buttons-wrapper
        icon:           object, // corresponding html class: pushe-icon-image
        title:          object, // corresponding html class: pushe-title
        content:        object, // corresponding html class: pushe-content
        acceptButton:   object, // corresponding html class: pushe-accept-btn
        rejectButton:   object, // corresponding html class: pushe-reject-btn
    }
}

Pushe.subscribe(options);

کلید توضیحات
showDialog فقط سایت‌هایی که https می باشند می توانند مقدار را false بگذارند تا دیالوگ نمایش داده نشود و مستقیما دیالوگ خود مرورگر برای کاربر نمایش داده شود
title عنوان دیالوگ
content متن دیالوگ
acceptText متن دکمه پذیرش
rejectText متن دکمه رد
icon آیکون (که در سمت راست دیالوگ قرار می گیرد)
useCustomCSS در صورتی که می خواهید فایل css را خودتان برای دیالوگ بنویسید مقدار آن‌ را true بگذارید که در این صورت باید فایل css نوشته شده خودتان را درون کدتان قرار دهید.
fixedPosition مشخص می کند که مودال باید در بالای صفحه فیکس شود و یا اینکه اگر صفحه اسکرول خورد مودال همانند باقی المان‌های صفحه تحت تاثیر اسکرول به زیر صفحه برود که مقدار پیش فرض آن true می باشد که به معنای فیکس شدن آن می باشد.
position موقعیت نمایش مودال در صفحه را نشان می دهد. مقدار قابل قبول یکی از: 'top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left' می باشد. مقدار پیش فرض برابر 'top-center' می باشد.
mobilePostion موقعیت نمایش مودال در موبایل می باشد که یکی از مقادیر 'top', 'bottom' قابل قبول می باشد. مقداد پیش فرض برابر 'top' می باشد.
dialogRetryRate یک مقدار عددی با واحد ثانیه می باشد مثلا 3600. برای جلوگیری از تکرار نمایش دیالوگ عضویت وب پوش در یک بازه زمانی برای کاربری که یک بار بر روی دکمه عدم پذیرش کلیک کرده می توانید از این کلید استفاده کنید. برای مثال در صورتی که مقدار آنرا 3600 بگذارید در صورتی که کاربر دکمه عدم پذیرش را کلیک کند تا ۱ ساعت دیگر با هر بار ریلود شدن صفحه دیگر مودال به آن کاربر نمایش داده نمی شود.
style یک object می باشد که برای override کردن css های دیفالت یا اضافه کردن css جدید می توانید از آن استفاده کنید ، روش استفاده از آن در مثال زیر آورده شده . کلاس‌های html متناظر با هر کلید هم مقابل آن ذکر شده.

// How to override or add css

// Use javascript key values
var options = {
    style: {
        title: {
            color: 'red',
            fontSize: '1.5rem',
            fontWeight: 'bold',
        },
        content: {
            color: 'blue',
            fontSize: '1.2rem',
            fontWeight: 'normal'
        }
    }
}
Pushe.subscribe(options);

ارسال رویداد (event)

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

برای ارسال رویداد می توانید از کد زیر استفاده نمایید:

Pushe.captureEvent(key, value); // key: string, value: string

// Return value is a promise that resolves to true if request successfully sent or false if request is unsuccessfull

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

ذخیره آی دی یکتای کاربران

شما می توانید توسط کد زیر آی‌دی یکتای مربوط به هر کاربر را (در مروگر) دریافت کرده و با آن به کاربرانتان پوش ارسال نمایید.

Pushe.getDeviceId();

// Return value is a promise that resolves to a string that indicates user deviceId

برای دریافت آی‌دی کاربر می توانید همانند زیر از تابع Pushe.getDeviceId استفاده کنید.

Pushe.getDeviceId()
    .then((deviceId) => {
        console.log(`deviceId is: ${deviceId}`);
    });

لغو اشتراک کاربران

در صورت نیاز می‌توانید با صدا زدن تابع زیر اشتراک کاربرتان را لغو کرده و برای آن کاربر نوتیفیکشن نمایش داده نشود.

Pushe.unsubscribe();

همیشه در کنارتان هستیم

در اولین فرصت با ایمیل به شما پاسخ خواهیم داد.

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