Web Push

Fyno Web Push Notification SDK

The Fyno Web Push SDK is designed for technical users who are responsible for integrating and working with the Fyno web push service. This documentation provides a detailed overview of the SDK’s functionalities and how to use them.

Installation

To use the Fyno SDK in your project, follow these steps:

$npm install @fyno/websdk

Initialization

Initialize the Fyno SDK with workspace ID, and integration ID.

1const fyno = require('@fyno/websdk');
2
3// Initialize Fyno SDK
4fyno.init(wsid, integration, env);
  • wsid: Workspace ID
  • integration: Integration ID
  • env (optional): Environment (default is “live”)

Customise Notification Pop-up

Fyno SDK displays a custom popup asking users for notification permissions before proceeding with push subscription registration, which can be customized according to your application’s UI.

1fyno.setCustomPopupConfig(options);

Parameters

  • options (Object): An object containing customizable properties for the popup. Default values will be used if not provided.

  • backgroundColorOverlay (String): Background color of the overlay. Default: ‘rgba(0, 0, 0, 0.5)’.

  • popupBackgroundColor (String): Background color of the popup. Default: ‘white’.

  • popupPadding (String): Padding of the popup. Default: ‘20px’.

  • popupMarginTop (String): Margin top of the popup. Default: ‘50px’.

  • popupBorderRadius (String): Border radius of the popup. Default: ‘8px’.

  • popupTextAlign (String): Text alignment inside the popup. Default: ‘center’.

  • popupBoxShadow (String): Box shadow of the popup. Default: ‘0 4px 8px rgba(0, 0, 0, 0.1)’.

  • popupMaxWidth (String): Maximum width of the popup. Default: ‘500px’.

  • popupWidth (String): Width of the popup. Default: ‘400px’.

  • popupzIndex (String): z-Index of the popup. Default: 999.

  • closeIconText (String): Text content of the close icon. Default: ’✖’.

  • closeIconFontSize (String): Font size of the close icon. Default: ‘20px’.

  • messageText (String): Message displayed in the popup. Default: Dynamic text based on the origin of the website.

  • buttonColor (String): Color of the buttons in the popup. Default: ‘#3F51B5’

  • allowButtonText (String): Text content of the “Allow” button. Default: ‘Allow’.

  • denyButtonText (String): Text content of the “Deny” button. Default: ‘Deny’.

  • remindLaterText (String): Text content for the “Remind me later” option. Default: ‘Remind me later’.

Push Notification Registration

Register push notifications with a VAPID key provided in you Fyno integration.

1const vapidKey = 'your_vapid_key';
2const webpushDetails = await fyno.register_push(vapidKey);
  • vapidKey: VAPID key for push notifications

User Identification

Identify a user with a distinct ID:

1fyno.identify(distinct_id, name);
  • distinct_id: Distinct ID of the user
  • name (optional): Name of the user

User Profile Reset

Reset the user profile when your user logs out.

1fyno.reset();

Registering Service Worker

To register service worker and handle incoming messages from the server, create a serviceworker.js file in your public folder and use the following code snippet in the created service worker.

1importScripts('https://cdn.jsdelivr.net/npm/@fyno/websdk@<latest_version>/sw/serviceworker.min.js');