learndl learndl triboon

آموزش افزودن نوتیفیکیشن توسط OneSignal

onesignal

آموزش افزودن نوتیفیکیشن

برخی وبسایت ها رویت کرده اید که از نوتیفیکیشن برای نمایش اطلاعیه های خود استفاده می نمایند. همچنین سایت های مانند فیسبوک از نوتیفیکیشن استفاده می کنند. خوب ما به شما آموزش میدهیم چطور قابلیت OneSignal را به سایت خود اضافه کنید. با ما همراه باشید.

نوتیفیکیشن چیست؟

پیام های قابل کلیکی می باشد که در صفحه دسکتاپ کاربر به نمایش در می آیند حتی زمانی که مرورگر باز نباشد.
در حال حاضر سایت های بزرگی مثل فیسبوک ، پینترست ، لینکدین و… از قابلیت نوتیفیکیشن استفاده می کنند.
نوتیفیکیشن بیشتر از sms و ایمیل و شبکه اجتماعی کاربران رو درگیر خود میکند.
طبق تحقیق انجام شده امکان کلیک روی نوتیفیکیشن در کاربران موبایل ۵۰% می باشد.

چگونه این قابلیت را به سایت خود اضافه کنیم؟

همیشه یک یا چندین سایت در زمینه های مختلفی باز می شوند  که سایت OneSignal برای زمینه کاری ماست.
OneSignal یک سرویس رایگان که به شما اجازه میده نوتیفیکیشن رو به سایت خود اضافه کنید.

راهنمای اضافه کردن نوتیفیکیشن :

ابتدا وارد سایت onesignal.com شوید و اکانت کاربری خود را ایجاد کنید.
در صفحه باز شده روی Web Push کلیک کنید تا صفحه ثبت نام باز شود.

onesignal1

برای تایید و فعال سازی اکانت کاربری خود وارد اکانت ایمیل خود شود.
خوب برای فعال سازی اکانت کاربری خود یک ایمیل تایید از سوی این سایت برای شما ارسال شده است.
این ایمیل را باز کرده و روی Click here to confirm your account. کلیک کنید تا اکانت شما تایید و فعال شود.

onesignal2

خوب حال شما وارد کنترل پنل این سایت می شود و باید نوتیفیکیشن خود را ایجاد کنید.
حال در صفحه باز شده طبق تصویر روی Add a new app کلیک کنید و نام نوتیفیکیشن خود را وارد کنید.
سپس دکمه Create رو بزنید تا برنامه شما ایجاد شود.

onesignal3

در صفحه باز شده شما باید نوع پلت‌فرم را انتخاب کنید.
چون ما نوتیفیکیشن در مرورگر را آموزش می دهیم باید گزینه Website Push رو انتخاب کنید.

onesignal4

در این مرحله نیز باید گزینه Google Chrome & Mozilla Firefox را انتخاب کنید.
تا اطلاعیه در مرورگر های ذکر شده نمایش داده شود.

onesignal5

در این مرحله باید ادرس سایت خود و همچنین لوگو سایت رو انتخاب و وارد کنید و گزینه Save رو بزنید.
دقت کنید که اگر سایت شما از https پشتیبانی می کند باید تیک گزینه My site is not fully HTTPS رو زده و تنظیمات رو اعمال کنید.

onesignal6

در این مرحله باید دقت کنید.
اگر از وردپرس استفاده می کنید گزینه وردپرس را وارد کنید و کد Your App ID را دریافت کرده و در تنظیمات افزونه OneSignal – Free Web Push Notifications وارد کنید تا نوتیفیکیشن برای شما نمایش داده شود.
یا اگر می خواهید بصورت دستی در قالب و سایت خود نمایش دهید گزینه Website Push را بزنید.
سپس کد Your App ID را کپی کنید و بصورت آموزش زیر عکس عمل کنید.

onesignal7

برای نمایش نوتیفیکیشن در سایت خود کد زیر را در هدر خود قبل از بسته شد تگ head قرار بدید.

<head>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async='async'></script>
  <script>
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
      appId: "YOUR_APP_ID",
      autoRegister: false, /* Set to true to automatically prompt visitors */
      subdomainName: 'SUBDOMAIN_NAME',   
      httpPermissionRequest: {
        enable: true
      },
      notifyButton: {
          enable: true /* Set to false to hide */
      }
    }]);
  </script>
</head>

خوب به جای YOUR_APP_ID آی دی دریافتی را کپی کنید.
همچنین به جای SUBDOMAIN_NAME نام نوتیفیکیشن خود را وارد کنید.
نام نوتیفیکیشن همین نامی است که در ابتدا وارد کردید.
خوب حال نوتیفیکیشن به سایت شما اضافه شد و شما میتوانید اطلاعیه های خود را ارسال کنید.
برای ارسال هم از سایت چپ روی All Apps کلیک کنید تا اپ های شما نمایان شود.

onesignal8

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

onesignal9

روی New push notification کلیک کنید تا صفحه ارسال برایتان باز شود.
عنوان و متن را بنویسید و دکمه Preview بزنید پس از پیشنمایش اطلاعیه دکمه Send را بزنید تا اطلاعیه ارسال شود.

onesignal10

موفق و پیروز باشید.

به این مطلب امتیاز دهید

امتیاز کلی : 0 / 5. تعداد آرا : 0

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

وبیت این پست توسط نگارش شده است.

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

در کانال وبیت عضو شو تا از آخرین اخبار ، آپدیت محصولات و تخفیف ها با خبر بشی ☺ عضویت در کانال تلگرام

اشترک گذاری

مقاله های پیشنهادی

وبیت این مطالب را به شما پیشنهاد میدهد

ارسال نظر ( 18 نظر تایید )

نظرات پس از رویت و تایید مدیران نمایش داده می شود
  • Kiavashعضو سایت 18 آذر 1395 پاسخ

    سلام

    چطوری مشکل طرح ثبت نام کاربر ها و تغییر داد ؟ بنده انجام دادم یک دکمه اضافه کرد ولی میخوام مدل ها دیگه ای و قرار بدم !

    • محمد پورداداشمدیر سایت[ در پاسخ به Kiavash ] 19 آذر 1395 پاسخ

      با سلام
      از افزونه USER PRO استفاده کنید.

      • بهزاد علوی[ در پاسخ به محمد پورداداش ] 9 بهمن 1395 پاسخ

        سلام
        چطور میتونم متن پاپ آپ رو راست چین کنم یا فونتش رو عوض کنم؟ تو فایل هاش نتونستم درست کنم . اگه راهنمایی کنین ممنون میشم

        • محمد پورداداشمدیر سایت[ در پاسخ به بهزاد علوی ] 10 بهمن 1395 پاسخ

          با سلام
          این مورد رو بررسی نکردم لطفا یک تیک ارسال کنید تا آخر هفته یه بررسی کنم.

          • جهان[ در پاسخ به محمد پورداداش ] 6 اردیبهشت 1396

            سلام
            لطفا بعد از بررسی حتما در یک مقاله یا در ادامه همین آموزش اضافه کنید که چطوری میشه فونتش رو تغییر داد، سایت هایی مثل سافت ۹۸ و.. این کار رو انجام دادن

          • محمد پورداداشمدیر سایت[ در پاسخ به جهان ] 6 اردیبهشت 1396

            با سلام
            حتما انجام میشه
            موفق باشید

  • احمدی 22 آذر 1395 پاسخ

    سلام خسته نباشید
    ممنون بابت آموزش
    من طبق آموزش کد رو توی سایتم قرار دادم و اینکه آی دی و اسم رو هم وارد کردم ولی هر کاری می کنم ارور زیر رو میده و تایید نهایی رو نمیده، ممنون میشم راهنمایی کنید
    We haven’t detected any subscribed users yet for this platform. Try some of the tips below, or contact us for support.
    Open the Developer Tools Console (Right Click on page -> Inspect -> click the Console tab)
    Check for OneSignal error messages on the Developers Tools Console
    Verify that the OneSignal App ID is correct in your app or site.
    e16e5406-4b91-4a3e-8138-8b36795a1294

    • محمد پورداداشمدیر سایت[ در پاسخ به احمدی ] 22 آذر 1395 پاسخ

      با سلام
      این مشکل میگه که یا شما کد رو نگذاشتی یا اگه گذاشتی آی دی یا نام رو وارد نکردی

      خوب به جای YOUR_APP_ID آی دی دریافتی را کپی کنید.
      همچنین به جای SUBDOMAIN_NAME نام نوتیفیکیشن خود را وارد کنید.

  • احمدی 23 آذر 1395 پاسخ

    من هم آیدی رو وارد کردم و هم اسم رو ولی تایید نمی کنه! لوگو برنامه هم به سایت اضافه شده ولی تو سایت خودش تایید نهایی نمیشه!

    var OneSignal = window.OneSignal || [];
    OneSignal.push([“init”, {
    appId: “e16e5406-4b91-4a3e-8138-8b36795a1294”,
    autoRegister: false, /* Set to true to automatically prompt visitors */
    subdomainName: ‘Jalebast’,
    httpPermissionRequest: {
    enable: true
    },
    notifyButton: {
    enable: true /* Set to false to hide */
    }
    }]);

    • محمد پورداداشمدیر سایت[ در پاسخ به احمدی ] 23 آذر 1395 پاسخ

      با سلام
      دوست عزیز حتما مشکلی در اجرا داشته اید این آموزش رو من چندین بار اجرا کردم و مشکلی نبوده لطفا دوباره بررسی کنید.
      این آموزش رو چندین سایت ایجاد کرده اند بدون هیچ مشکی مثل سایت زیر:
      http://movie98.com

  • احمدی 24 آذر 1395 پاسخ

    با سلام مجدد
    ببخشید امکانش هست بگید این پیغام عضویت رو با چه افزونه ای نشون میدید؟
    اشتراک برای اطلاعیه های مهم
    و اینکه آموزشی در این مورد تو سایت هست؟ خیلی ممنون

    • محمد پورداداشمدیر سایت[ در پاسخ به احمدی ] 24 آذر 1395 پاسخ

      با سلام
      لینک زیر رو مطالعه کنید.
      http://vebeet.com/post/5407/

      • احمدی[ در پاسخ به محمد پورداداش ] 25 آذر 1395 پاسخ

        ممنون
        من اقدام به ثبت نام کردم ولی ایمیل تاییده نمیاد هم جیمیل رو تست کردم هم یاهو، لطفا یه بررسی کنید

        • محمد پورداداشمدیر سایت[ در پاسخ به احمدی ] 25 آذر 1395 پاسخ

          با سلام
          من مدیر این سایت نیستم که بررسیش کنم 😀 فقط معرفی شده
          لطفا با پشتیبانی همین سایت در تماس باشید البته باید انگلیسی بلد باشید.
          یاعلی

  • مرتضی 7 دی 1395 پاسخ

    با تشکر
    خییلی بدرد بخوره مخصوصا اینکه اکثزا روش کلیک می کنند.
    متشکرم

    • محمد پورداداشمدیر سایت[ در پاسخ به مرتضی ] 7 دی 1395 پاسخ

      با سلام
      موفق باشید

  • جلال 18 بهمن 1395 پاسخ

    سلام . نحوه استفاده توی اپ های اندروید رو هم قرار بدین

    • محمد پورداداشمدیر سایت[ در پاسخ به جلال ] 18 بهمن 1395 پاسخ

      با سلام
      درصورت درخواست بیشتر حتما اضافه خواهد شد
      موفق باشید.

همکاران وبیت