Versions Compared

Old Version 19

changes.mady.by.user Nurçin Kandemir

Saved on

compared with

New Version 20

changes.mady.by.user Baran Teloğlu

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Web push notifications are messages that come from a website. You get them on your desktop or device even when the website is not open in your browser. It is a new marketing channel to re engage your site visitors without knowing their email or other contact details.

Supported Platforms

BrowserWindowsmacOSAndroidiOS
Chrome

Status
colourGreen
titleYes

Status
colourGreen
titleYes

Status
colourGreen
titleYes

Status
colourRed
titleN/A

Firefox

Status
colourGreen
titleYes

Status
colourGreen
titleYes

Status
colourGreen
titleYes

Status
colourRed
titleN/A

Safari

Status
colourRed
titleN/A

Status
colourGreen
titleYes

Status
colourRed
titleN/A

Status
colourRed
titleN/A

*Incognito / Private Browsing mode isn't supported in browsers.

Anchor
sdk
sdk

Web Push SDK Setup

Once you've completed this section, you can send notifications to visitors via your website and you can subscribe to your site's web push programs.

Steps Involved:  

  1. Setup A Web Application on RMC.
  2. Add Codes and Files to Your Site.


Panel
bgColor#f0f0f0

On this page:

Related Pages:


Anchor
webuyg
webuyg

Setup A Web Application on RMC

Go to; Cog Icon > Campaign Management > Campaign Settings >  Push Applications > New Website to setup a web application. 

Panel
borderWidth0


Note

Web Push SDK installation steps vary according to site security protocol;

  • Status
    colourGreen
    titleHTTP
    :     Steps to be taken into consideration while installing Web Push SDK for http://URL websites.
  • Status
    subtletrue
    colourRed
    titleHTTPs
    :     Steps to be taken into consideration while installing Web Push SDK for http://URL websites.


Anchor
web
web

Panel
borderWidth2
borderStyledashed
titleWebsite Settings

  • Website Name: Your website name.
    Status
    colourGreen
    titleHTTP
    Status
    subtletrue
    colourRed
    titleHTTPs
  • Website Address: Your website address www.domain.com
    Status
    colourGreen
    titleHTTP
    Status
    subtletrue
    colourRed
    titleHTTPs
  • Https: It is marked when you want to setup for web sites running in HTTPS protocol..
    Status
    subtletrue
    colourRed
    titleHTTPs
  • Branded Subdomain: The branded subdomain address to be redirected during opt-in process
    Status
    colourGreen
    titleHTTP

    Your site's notifications appear as a subdomain of relateddigital.com instead of your domain name.

  • Default Cookie: The name/key of the cookie including the member info/ID in your web site.
    Status
    colourGreen
    titleHTTP
    Status
    subtletrue
    colourRed
    titleHTTPs
  • Default Title: Default Title for asking permissions and web push campaigns.
    Status
    colourGreen
    titleHTTP
    Status
    subtletrue
    colourRed
    titleHTTPs
  • Default Text: Default Text for asking permissions and web push campaigns.
    Status
    colourGreen
    titleHTTP
    Status
    subtletrue
    colourRed
    titleHTTPs
  • Default Icon: Default icon for asking permissions and web push campaigns.
    Status
    colourGreen
    titleHTTP
    Status
    subtletrue
    colourRed
    titleHTTPs

    Maximum sizes are 192x192 px.


Anchor
gcm
gcm

Panel
borderColor#FBAC2B
borderWidth2
titleBGColor#FBAC2B
borderStyledashed
titleChrome & Firefox Settings
  • Related App Alias: You should decide your Related App Alias. For example; related_webpushapp.


Anchor
safari
safari

Panel
borderColor#3BC3DF
borderWidth2
titleBGColor#3BC3DF
borderStyledashed
titleSafari Configuration

  • Website Push ID :The push ID value obtained with the Apple Developer Account.
  • Safari Alias: Your web application name alias for safari configuration.
    It is highly recommended, put _safari after your Related App Alias (denoted on Chrome & Firefox settings part) while naming your application. Your Safari app will appear in the Websites field with the name you give here when you create a web push campaign.
  • Allowed Domains: The websites addresses where users are allowed to request permission.
  • Icon: Your website icon.
    The icon must be 256×256 px.
  • .p12 Password: The password for the .p12 file.
  • Url Formatted String: Target URL to go to when the notification is clicked.
    Use %@ as a placeholder for arguments you fill in when delivering your notification. This URL spelling must contain http or https; otherwise, it is invalid.


Anchor
optin
optin

Panel
borderWidth2
borderStyledashed
titleOpt-in Screen Settings

Image Removed

Theme: Choose a theme for opt-in screen.

Image Added


  • Background Color: Choose a background color for opt-in screen.Position: The region where the opt-in screen will be displayed on the site.
  • Padding Left (px): Enter a value if left space is required.
  • Padding Right (px): Enter a value if right space is required.
  • Delay (second): Enter a value if opt-in screen is desired to be shown after a while.
    The duration starts when user starts their visit.
  • Title: Enter a default title for opt-in screen.
  • Message: Enter a default message for opt-in screen.
  • Scroll Threshold Percentage: If the permission screen is requested to appear after the user has seen what percentage of the page, that value is entered.(It can be entered as "1" if it is desired to appear when visiting the page.)
  • Allow Button: Style configurations for sign up button.
    • Background Color: Background color for sign-up button.
    • Text Color: Text Color for sign-up button.
    • Text: Enter the text for sign-up button. (eg, Allow, Accept, Yes etc.)
  • Deny Button: Style configurations for reject button.
    • Background Color: Background color for reject button.
    • Text Color: Text Color for reject button.
    • Text: Enter the text for sign-up button. (eg, Deny, Ignore, No etc.)


Anchor
sema
sema

Opt-in Process

RMC, during web push subscription process, in case of non-member users wanting to join again, allows browsers to register via the Opt-In screen primarily instead of using native alerts.

Panel
titleRMC Web Push Opt-in Diagram


*If the visitor does not activate the notification approval from browser settings again.

Anchor
script
script

Add Codes and Files to Your Site

Column
width710

If your website supports HTTPS, you should add the relatedpush_sw.js file in the root folder of your site.


Tip

After completing the required fields,  you will find scripts and files created specifically for your configuration on the pop-up. After these scripts and files are added to the places specified in the pop-up, the web push installation is completed. Now, you may proceed to Web Push - Create page to start your first web push campaign.