Modules

ModalMessage

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

  • new ModalMessage(message?: undefined | string, messageAlignment?: TextAlignment, extras?: Record<string, string>, triggerId?: undefined | string, clickAction?: ClickAction, uri?: undefined | string, openTarget?: OpenTarget, dismissType?: DismissType, duration?: undefined | number, icon?: undefined | string, imageUrl?: undefined | string, imageStyle?: ImageStyle, iconColor?: undefined | number, iconBackgroundColor?: undefined | number, backgroundColor?: undefined | number, textColor?: undefined | number, closeButtonColor?: undefined | number, animateIn?: undefined | false | true, animateOut?: undefined | false | true, header?: undefined | string, headerAlignment?: TextAlignment, headerTextColor?: undefined | number, frameColor?: undefined | number, buttons?: InAppMessageButton[], cropType?: CropType, htmlId?: undefined | string, css?: undefined | string): ModalMessage

  • A modal in-app message object which can be passed to showInAppMessage or handled manually. Subscribe to be notified when in-app messages are triggered via subscribeToInAppMessage

    Parameters

    • Optional message: undefined | string

      The message to display to the user.

    • Optional messageAlignment: TextAlignment

      How to align message text. See the TextAlignment enum.

    • Optional extras: Record<string, string>

      Object of string/string key/value pairs.

    • Optional triggerId: undefined | string

      The id of the trigger that created this message. The SDK will report back this to Braze with in-app message analytics events.

    • Optional clickAction: ClickAction

      Where the user should be brought when clicking on this message. See the ClickAction enum.

    • Optional uri: undefined | string

      If clickAction is ClickAction.URI, the URI to follow when the user clicks on this message.

    • Optional openTarget: OpenTarget

      If clickAction is ClickAction.URI, whether to open clicks in a new tab/window. See the OpenTarget enum.

    • Optional dismissType: DismissType

      How the message is dismissed, via a timer or requiring interaction from the user. See the DismissType enum.

    • Optional duration: undefined | number

      Length of time in milliseconds until auto-dismiss should occur. Only used when dismissType is DismissType.AUTO_DISMISS

    • Optional icon: undefined | string

      A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See the Font Awesome cheatsheet for details.

    • Optional imageUrl: undefined | string

      Url of an image to include in this message. The message will only display an image or an icon, and will prioritize the image if present.

    • Optional imageStyle: ImageStyle

      Whether the image should be shown as normal on the top of the in-app message or used as the entire content of the message. See the ImageStyle enum.

    • Optional iconColor: undefined | number

      Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

    • Optional iconBackgroundColor: undefined | number

      Background color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

    • Optional backgroundColor: undefined | number

      Background color of entire message. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

    • Optional textColor: undefined | number

      Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

    • Optional closeButtonColor: undefined | number

      Color of close button. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

    • Optional animateIn: undefined | false | true

      Whether to animate the showing of this message.

    • Optional animateOut: undefined | false | true

      Whether to animate the hiding of this message.

    • Optional header: undefined | string

      Header text to

    • Optional headerAlignment: TextAlignment

      How to align header text. See the TextAlignment enum.

    • Optional headerTextColor: undefined | number

      Color of header text. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

    • Optional frameColor: undefined | number

      Color of the background frame which blocks page interaction while the message is showing.

    • Optional buttons: InAppMessageButton[]

      Array of up to twoInAppMessageButton objects.

    • Optional cropType: CropType

      How to crop and fit images in the allowable space. See the CropType enum.

    • Optional htmlId: undefined | string

      The ID to give the parent HTML element that this message is rendered into.

    • Optional css: undefined | string

      Custom CSS to apply to the page while this element is shown. All selectors should be scoped to the htmlId of this message to prevent restyling elements outside of the message when it is shown.

    Returns ModalMessage

Properties

animateIn

animateIn: boolean

Whether to animate the showing of this message.

animateOut

animateOut: boolean

Whether to animate the hiding of this message.

backgroundColor

backgroundColor: number

Background color of entire message. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

buttons

buttons: InAppMessageButton[]

Array of up to twoInAppMessageButton objects.

clickAction

clickAction: ClickAction

Where the user should be brought when clicking on this message. See the ClickAction enum.

closeButtonColor

closeButtonColor: number

Color of close button. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

cropType

cropType: CropType

How to crop and fit images in the allowable space. See the CropType enum.

Optional css

css: undefined | string

Custom CSS to apply to the page while this element is shown. All selectors should be scoped to the htmlId of this message to prevent restyling elements outside of the message when it is shown.

dismissType

dismissType: DismissType

How the message is dismissed, via a timer or requiring interaction from the user. See the DismissType enum.

duration

duration: number

Length of time in milliseconds until auto-dismiss should occur. Only used when dismissType is DismissType.AUTO_DISMISS

extras

extras: Record<string, string>

Object of string/string key/value pairs.

frameColor

frameColor: number

Color of the background frame which blocks page interaction while the message is showing.

Optional header

header: undefined | string

Header text to

headerAlignment

headerAlignment: TextAlignment

How to align header text. See the TextAlignment enum.

headerTextColor

headerTextColor: number

Color of header text. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

Optional htmlId

htmlId: undefined | string

The ID to give the parent HTML element that this message is rendered into.

Optional icon

icon: undefined | string

A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See the Font Awesome cheatsheet for details.

iconBackgroundColor

iconBackgroundColor: number

Background color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

iconColor

iconColor: number

Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

imageStyle

imageStyle: ImageStyle

Whether the image should be shown as normal on the top of the in-app message or used as the entire content of the message. See the ImageStyle enum.

Optional imageUrl

imageUrl: undefined | string

Url of an image to include in this message. The message will only display an image or an icon, and will prioritize the image if present.

isControl

isControl: false

Whether this message is a ControlMessage.

Optional message

message: undefined | string

The message to display to the user.

messageAlignment

messageAlignment: TextAlignment

How to align message text. See the TextAlignment enum.

openTarget

openTarget: OpenTarget

If clickAction is ClickAction.URI, whether to open clicks in a new tab/window. See the OpenTarget enum.

textColor

textColor: number

Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque green).

Optional triggerId

triggerId: undefined | string

The id of the trigger that created this message. The SDK will report back this to Braze with in-app message analytics events.

Optional uri

uri: undefined | string

If clickAction is ClickAction.URI, the URI to follow when the user clicks on this message.

Static ClickAction

ClickAction: { NEWS_FEED: "NEWS_FEED"; NONE: "NONE"; URI: "URI" }

Type declaration

  • NEWS_FEED: "NEWS_FEED"
  • NONE: "NONE"
  • URI: "URI"

Static CropType

CropType: { CENTER_CROP: "CENTER_CROP"; FIT_CENTER: "FIT_CENTER" }

Type declaration

  • CENTER_CROP: "CENTER_CROP"

    Centers the image in the available space and crops any overflowing edges.

  • FIT_CENTER: "FIT_CENTER"

    Fits the image within the available space, causing blank space on the shorter axis (e.g. tall images will have bars of blank space on the left/right)

Static DismissType

DismissType: { AUTO_DISMISS: "AUTO_DISMISS"; MANUAL: "SWIPE" }

Type declaration

  • AUTO_DISMISS: "AUTO_DISMISS"
  • MANUAL: "SWIPE"

Static ImageStyle

ImageStyle: { GRAPHIC: "GRAPHIC"; TOP: "TOP" }

Type declaration

  • GRAPHIC: "GRAPHIC"
  • TOP: "TOP"

Static OpenTarget

OpenTarget: { BLANK: "BLANK"; NONE: "NONE" }

Type declaration

  • BLANK: "BLANK"
  • NONE: "NONE"

Static Orientation

Orientation: { LANDSCAPE: "LANDSCAPE"; PORTRAIT: "PORTRAIT" }

Type declaration

  • LANDSCAPE: "LANDSCAPE"
  • PORTRAIT: "PORTRAIT"

Static SlideFrom

SlideFrom: { BOTTOM: "BOTTOM"; TOP: "TOP" }

Type declaration

  • BOTTOM: "BOTTOM"
  • TOP: "TOP"

Static TextAlignment

TextAlignment: { CENTER: "CENTER"; END: "END"; START: "START" }

Type declaration

  • CENTER: "CENTER"
  • END: "END"
  • START: "START"

Methods

closeMessage

  • closeMessage(): void

  • Call this method if you wish to programmatically remove the message from the DOM. This method will only work with the Braze UI.

    Returns void

removeAllSubscriptions

  • removeAllSubscriptions(): void

removeSubscription

  • removeSubscription(subscriptionGuid: string): void

  • Remove an event subscription that you previously subscribed to.

    Parameters

    • subscriptionGuid: string

      The identifier of the subscription you wish to remove, returned by the method you initially used to create it.

    Returns void

subscribeToClickedEvent

  • subscribeToClickedEvent(subscriber: () => void): string | null

  • Subscribe to receive click events. The subscriber callback will be called whenever this message is clicked by the user.

    Parameters

    • subscriber: () => void

      The callback function to receive click events. This function will be invoked with no arguments when this message records a click.

        • (): void

        • Returns void

    Returns string | null

    The identifier of the subscription created. This can be passed to removeSubscription to cancel the subscription. Returns null if the subscriber passed is not a function.

subscribeToDismissedEvent

  • subscribeToDismissedEvent(subscriber: () => void): string | null

  • Subscribe to receive dismissed events. The subscriber callback will be called whenever this message is closed by the user, or when it's dismissed automatically (depending on the dismissType).

    Parameters

    • subscriber: () => void

      The callback function to receive dismissed events. This function will be invoked with no arguments when this message records a dismissal.

        • (): void

        • Returns void

    Returns string | null

    The identifier of the subscription created. This can be passed to removeSubscription to cancel the subscription. Returns null if the subscriber passed is not a function.

Static fromJson

  • fromJson(jsonData: Record<string, unknown>): InAppMessage | undefined