Modules

display

appboy.display is the public class for the UI portions of Braze's Web SDK. It is only available in https://js.appboycdn.com/web-sdk-develop/3.4/appboy.min.js and is stripped from the more minimal https://js.appboycdn.com/web-sdk-develop/3.4/appboy.core.min.js.

Index

Functions

Functions

automaticallyShowNewInAppMessages

  • automaticallyShowNewInAppMessages(): string

  • Automatically display new in-app messages when they come in from the server.

    Returns string

    The identifier of the subscription created. This can be passed to 'appboy.removeSubscription` to cancel the subscription.

destroyFeed

  • destroyFeed(): void

  • Destroy any Braze news feed currently showing. This method will appropriately clean up any retained resources and also display the hiding animation, and so should be used instead of manually removing feed html from the DOM.

    Returns void

hideContentCards

  • hideContentCards(parentNode?: Element | null): void

  • Hide any Braze content cards currently showing in the parent node, or if none is provided, any content cards in the page. This method will appropriately clean up any retained resources and also display the hiding animation, and so should be used instead of manually removing content cards HTML from the DOM.

    Parameters

    • Optional parentNode: Element | null

      The HTML node that denotes the parent of the content cards to be hidden. If null/undefined, all content cards on the page will be hidden.

    Returns void

showContentCards

  • showContentCards(parentNode?: Element | null, filterFunction?: (cards: Card[]) => Card[]): void

  • Display the user's content cards.

    Parameters

    • Optional parentNode: Element | null

      The HTML node to render the content cards into. If null/undefined, the content cards will be rendered in fixed position over the right-hand side of the page and appended to the <body> node. If the parent node already has a Braze content cards view as a direct descendant, the existing content cards will be replaced.

    • Optional filterFunction: (cards: Card[]) => Card[]

      A filter/sort function for cards displayed in this view. Invoked with the array of Card objects, sorted by {pinned, date}. Expected to return an array of sorted Card objects to render for this user. If omitted, all cards will be displayed.

    Returns void

showFeed

  • showFeed(parentNode?: Element | null, cards?: Card[] | null, allowedCategories?: string[]): void

  • Display the user's news feed.

    Parameters

    • Optional parentNode: Element | null

      The HTML node to render the news feed into. If null/undefined, the feed will be rendered in fixed position over the right-hand side of the page and appended to the <body> node. If the parent node already has an Braze news feed as a direct descendant, the existing feed will be replaced.

    • Optional cards: Card[] | null

      A static set of cards to display. Each item in this Array should be a Card descendant. If this parameter is null/undefined, all unexpired cards from the last news feed refresh will be used automatically, a feed refresh will be kicked off automatically if the cached cards are more than 1 minute old, and the feed will automatically update when new cards are received while it is still showing. If you provide an explicit set of cards by using this parameter, no action will be taken when new cards are received, and you must subscribe to feed updates yourself with appboy.subscribeToFeedUpdates and request updates with appboy.requestFeedRefresh if you want to update this feed with new cards.

    • Optional allowedCategories: string[]

      A set of categories to filter cards to. Each item in this Array should be a card category as set in the Braze dashboard. If omitted, all cards will be displayed.

    Returns void

showInAppMessage

  • showInAppMessage(inAppMessage: InAppMessage | ControlMessage, parentNode?: Element | null, onDisplayCallback?: () => void): boolean

  • Display a given in-app message.

    Parameters

    • inAppMessage: InAppMessage | ControlMessage

      The message to display.

    • Optional parentNode: Element | null

      The HTML node to render the in-app message into. If null/undefined, the message will be rendered appended within the <body> node.

    • Optional onDisplayCallback: () => void

      Optional callback to invoke once the message is on the screen.

        • (): void

        • Returns void

    Returns boolean

    Whether or not the message was displayed (or, in the case of control messages, logged to Braze servers).

toggleContentCards

  • toggleContentCards(parentNode?: Element | null, filterFunction?: (cards: Card[]) => Card[]): void

  • Toggle the display of Braze content cards, showing them if they are not shown, and hiding them if they are. If you wish to display multiple content cards feeds on a page simultaneously, you should use showContentCards and hideContentCards to show/hide each feed individually instead of this method.

    Parameters

    • Optional parentNode: Element | null

      The HTML node to render the content cards into. If null/undefined, the content cards will be rendered in fixed position over the right-hand side of the page and appended to the <body> node. If the parent node already has a Braze content cards view as a direct descendant, the existing content cards will be replaced.

    • Optional filterFunction: (cards: Card[]) => Card[]

      A filter/sort function for cards displayed in this view. Invoked with the array of Card objects, sorted by {pinned, date}. Expected to return an array of sorted Card objects to render for this user. If omitted, all cards will be displayed.

    Returns void

toggleFeed

  • toggleFeed(parentNode?: Element | null, cards?: Card[] | null, allowedCategories?: string[]): void

  • Toggle the Braze news feed, creating it if it does not exist, and destroying it if it does.

    Parameters

    • Optional parentNode: Element | null

      The HTML node to render the news feed into. If null/undefined, the feed will be rendered in fixed position over the right-hand side of the page and appended to the <body> node. If the parent node already has an Braze news feed as a direct descendant, the existing feed will be replaced.

    • Optional cards: Card[] | null

      A static set of cards to display. Each item in this Array should be a Card descendant. If this parameter is null/undefined, all unexpired cards from the last news feed refresh will be used automatically, a feed refresh will be kicked off automatically if the cached cards are more than 1 minute old, and the feed will automatically update when new cards are received while it is still showing. If you provide an explicit set of cards by using this parameter, no action will be taken when new cards are received, and you must subscribe to feed updates yourself with appboy.subscribeToFeedUpdates and request updates with appboy.requestFeedRefresh if you want to update this feed with new cards.

    • Optional allowedCategories: string[]

      A set of categories to filter cards to. Each item in this Array should be a card category as set in the Braze dashboard. If omitted, all cards will be displayed.

    Returns void