InApp Feed

This guide explains about integrating InApp feed functionality in your non-react applications using headless methods.

NOTE: Refer type definitions for this guide here .

Initialise feed client

Using SuprSend client instance create Feed client instance.

const feedClient: Feed = suprSendClient.feed.initialize(options?: IFeedOptions);

interface IFeedOptions {
  tenantId?: string;
  pageSize?: number;
  stores?: IStore[] | null;
  host?: { socketHost?: string; apiHost?: string };
}

If you are passing tenant_id in feed, make sure to pass scope key while creating userToken else 403 error will be thrown due to scope mismatching.

Feed client

Get Feed Data

This returns notification store which contains list of notifications and other meta data like page information etc. You can call this anytime to get updated store data.

const feedData: IFeedData = feedClient.data;

Initialise socket for realtime update

feedClient.initializeSocketConnection();

Fetching notification data

This method will get first page of notifications from SuprSend server and set data in notification store.

feedClient.fetch();

Fetch more notifications

This method will get next page of notifications from SuprSend server and set data in notification store.

feedClient.fetchNextPage();

Listening for updates to store

Whenever there is update in notification store (ex: on new notification or existing notification state updated) this event is fired by library. You can listen to this event and update your local state so that UI of you application is refreshed.

feedClient.emitter.on('feed.store_update', (updatedStoreData: IFeedData) => {
  // update your local state to refresh UI
});

Listening for new notification

In case you want to show toast notification on receiving new notification you can use this listener

feedClient.emitter.on(
  'feed.new_notification',
  (notificationData: IRemoteNotification) => {
    // your logic to trigger toast with new notification data
  }
);

Removing Feed

This will remove feed client data and abort socket connection. Additionally calling suprSendClient.reset method during logout will also remove all feedClient instances attached SuprSend client instance.

feedClient.remove();

Other methods

// If stores are used, this method will change active store
feedClient.changeActiveStore(storeId: string)

// mark notification as seen
await feedClient.markAsSeen(notificationId: string)

// mark notification as read
await feedClient.markAsRead(notificationId: string)

// mark notification as unread
await feedClient.markAsUnread(notificationId: string)

// mark notification as archived
await feedClient.markAsArchived(notificationId: string)

// mark notification as interacted
await feedClient.markAsInteracted(notificationId: string)

// bulk mark all notifications as read
await feedClient.markAllAsRead()

// bulk mark given notification id's as seen
await feedClient.markBulkAsSeen(notificationIds: string[])

Example

For understanding purpose we have added current simple example in react. You could refer this headless example and design the feed in your Angular or Vue.js etc. If you want to implement in react please refer @suprsend/react-core or @suprsend/react.

import { SuprSend } from "@suprsend/web-sdk";
import { useEffect, useState } from "react";

export default function Example() {
  const [feedData, setFeedData] = useState();
  const [feedInstance, setFeedInstance] = useState();

  const initializeFeed = async (suprSendClient) => {
    await suprSendClient.identify("YOUR_DISTINCT_ID"); // authenticating user

    const feedClient = suprSendClient.feeds.initialize(); // creating feed instance using suprsend client instance
    setFeedInstance(feedClient); // storing it in state so that feed client methods like markRead can be accessed outside
    const initialFeedData = feedClient?.data; // get initial store data from feed instance
    setFeedData(initialFeedData); // storing that data in react state so that UI is rendered accordingly

    feedClient?.emitter.on("feed.store_update", (updatedStoreData) => {
      setFeedData(updatedStoreData); // register listener to get updated store data and store it in local react state so that UI is updated w.r.t new state
    });

    feedClient.initializeSocketConnection(); // register for socketio connection for realtime updated in feed data
    feedClient.fetch(); // fetch existing notifications. Once api call is success you get first page notifications in feed.store_update listener and react state update happens which cause UI to renrender.
  };

  useEffect(() => {
    const suprSendClient = new SuprSend(
      "YOUR_PUBLIC_API_KEY"
    ); // creating suprsend client instance
    
    initializeFeed(suprSendClient);

    return () => suprSendClient.reset(); // up on unmounting remove user so that inbox data will also be cleared
  }, []);

  if (!feedData) return null;
  if (feedData.apiStatus === "LOADING") return <p>Loading Data</p>;
  if (feedData.apiStatus === "SUCCESS" && !feedData?.notifications?.length) {
    return <p>No Notifications</p>;
  }
  if (feedData.notifications) {
    return (
      <div>
        <div>
          {feedData.notifications.map((notification) => {
            return (
              <div
                onClick={() => {
                  feedInstance.markAsRead(notification.n_id);
                }}
              >
                {notification.n_id}
              </div>
            );
          })}
        </div>
        {feedData.apiStatus === "FETCHING_MORE" ? (
          <p>Loading More</p>
        ) : (
          <div>
            {feedData.pageInfo.currentPage < feedData.pageInfo.totalPages && (
              <button
                onClick={() => {
                  feedInstance.fetchNextPage();
                }}
              >
                Next
              </button>
            )}
          </div>
        )}
      </div>
    );
  }
  return null;
}