Notification Interactions

A user can interact with a notification by actions:

• Click on the notification

• Clicking one of the two possible buttons on the notification

The result of any of those interactions depends on the action you select on the Notification Message Template.

There are three action types:

• Open App: open the root path of a website.

• Open URL: open a defined action URL

• Open Deep Link: interact as a click action and pass the defined link to the event handler

Handling all notification Interactions

Bird Web SDK provides event listeners that allow you to handle interactions with push notifications, making it easy to capture and respond to user actions across different notification states.

Use the bird-sdk-push-notification event to add listener to these interactions as follow:

Bird.eventTarget.addEventListener('bird-sdk-push-notification', async (event) => {
  const interactionType = event.detail.type;
  console.log(`Push notification ${interactionType}:`, event.detail);
});

The event type could be one of the following values:

• Received - emits on a valid push notification received

• Tap - emits on users click on a push notification body or image

• Button - emits on users click on a push notification action button

Received custom event details properties:

interface ReceivedDetails {
  type: string;        // Interaction type
  payload?: string;    // Optional custom data set in the message template
}

Tap and Button custom event details properties:

interface ActionDetails {
  type: string;          // Interaction type
  payload?: string;      // Optional custom data set in the message template
  action: {
    type: string;        // action type (OPEN_APP,URL,DEEP_LINK)
    identifier?: string; // Identifier for a specific action assigned to a button
    uri?: string;        // URI to navigate on action (optional for OPEN_APP)  
  }
}

Deep Links

By default, Bird Web SDK does not open links with the action type DEEP_LINK, but you could enable redirecting by setting automaticallyOpenDeepLinks flag in Web SDK notification config.

You can handle the DEEP_LINK action with the interaction event listener to add your own logic to navigate users to the specific page, for example something like this:

Bird.eventTarget.addEventListener('bird-sdk-push-notification', async (event) => {
  if (event.detail?.action?.type === 'DEEP_LINK') {
    const notifyBell = document.getElementById('notify-bell');
    notifyBell.classList.remove('hidden');
    notifyBell.addEventListener('click', () => {
      notifyBell.classList.add('hidden');
      if (event.detail?.action?.uri) {
        window.open(event.detail.action.uri, '_blank');
      }
    });
  }
});

Custom Payload

The payload defined in both models ReceivedDetails and ActionDetails to pass extra data for a notification message. This allows you to embed specific information that can be accessed and used within the event handler.