Create Onesignal Push Notification

Engage customers behavior using push notifications.

techawa-one-signal-push-notification-home

OneSignal provides a simple interface to push notifications, letting content creators focus on quality user engagement instead of complex implementation. Push notifications are messages sent from your server to your app’s users. They notify users of new content, even when the user is not using your application.

They increase user engagement and retention in your application. An example is the WhatsApp “whistle” that notifies you of new messages received. In this tutorial, we’ll dive into integrating push notifications using OneSignal.

CREATING A PUSH NOTIFICATION

  • Login to onesignal Account.
  • After login (for first time it will show you welcome tour), click on add a new app button.

  • techhawa_onesignal_welcome
  • Enter the app name and click next.
  • Now Select one platform to configure setting - select web push option.

  • techhawa_onesignal_platform_select
  • STEP-1: Select custom code option in choose integration section.
  • STEP-2: Enter all your website details in web setup section as shown below and click on save button.

  • techhawa_onesignal_customcode_option techhawa_onesignal_site_details
  • STEP-3: Download the file and host the file in the Root Directory of your website.
  • STEP-4: Copy and paste to the Head Section on all pages of your site.

  • techhawa_onesignal_files_download techhawa_onesignal_code
  • STEP-5: Link to go to your website (Only for testing purpose)
  • Finally you can click on finish button.
  • Finally you can click on finish button.
  • You can see the live preview below.

  • techhawa_onesignal_end_view


CHANGING THE UI OF PUSH NOTIFICATION (OPTIONAL)

  • While creating the app, select typical site optionto prompt notification permission instead of bell icon .

  • techhawa_onesignal_typicalsite
  • In STEP-3: click on add prompt option and select slide prompt option.
  • Note: you can change the content of push notification by enabling customize slide prompt text option.


    techhawa_onesignal_prommpt_add techhawa_onesignal_slide_details
  • You can see the live preview below.

  • techhawa_onesignal_push_prompt_live

Live Demo