/* * Type definitions for @braze/web-sdk v6.7.1 * Project: https://github.com/braze-inc/braze-web-sdk * (c) Braze, Inc. 2026 - http://braze.com * License available at https://github.com/braze-inc/braze-web-sdk/blob/master/LICENSE */ /* eslint-disable no-unused-vars, no-use-before-define */ /** * Enum to represent the accepted SDK Metadata tags. See `addSdkMetadata` for more info. * * @readonly * @enum {string} */ export class BrazeSdkMetadata { /** Automatically added when loading Braze via Google Tag Manager */ static readonly GOOGLE_TAG_MANAGER: string; /** Automatically added when loading Braze via mParticle */ static readonly MPARTICLE: string; /** Automatically added when loading Braze via Segment */ static readonly SEGMENT: string; /** Automatically added when loading Braze via Tealium */ static readonly TEALIUM: string; /** Automatically added when loading Braze via npm */ static readonly NPM: string; /** Automatically added when loading Braze via Braze's CDN (js.appboycdn.com) */ static readonly CDN: string; /** Automatically added when loading Braze via Shopify Integration */ static readonly SHOPIFY: string; /** Use this tag if you have integrated or loaded the Braze Web SDK using none of the other methods */ static readonly MANUAL: string; } /** * Enum to represent the allowlistable set of device properties. By default, all properties are collected. * See the `devicePropertyAllowlist` option of `initialize` for more info. * @readonly * @enum {string} */ export class DeviceProperties { /** The name of the browser - e.g. "Chrome" */ static readonly BROWSER: string; /** The version of the browser - e.g. "59.234.1234" */ static readonly BROWSER_VERSION: string; /** The name of the operating system - e.g. "Android" */ static readonly OS: string; /** The screen resolution of the device - e.g. "1024x768" */ static readonly RESOLUTION: string; /** The language the browser is set to use - e.g. "en-us" */ static readonly LANGUAGE: string; /** The time zone of the device - e.g. "America/New_York" */ static readonly TIME_ZONE: string; /** The user agent string of the browser - see [this link](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent) for more info */ static readonly USER_AGENT: string; } /** * Abstract base for Content Cards. Use subclasses `ClassicCard`, `CaptionedImage`, * `ImageOnly`, and `ControlCard`. For example, you can check `if (card instanceof ClassicCard)` to * determine if the card is of the type `ClassicCard`. */ export class Card { /** * Call this method if you wish to programmatically remove the card from the feed and log a dismissal. This method * is meant to be used with the Braze UI. * * If you are using your own UI, this method will have no effect. Instead, you should use `logCardDismissal` to * log analytics and then remove the card from the DOM manually. */ dismissCard(): void; /** Remove all event subscriptions from this message. */ removeAllSubscriptions(): void; /** * Remove an event subscription that you previously subscribed to. * * @param subscriptionGuid - The identifier of the subscription you wish to remove, returned by the method * you initially used to create it. */ removeSubscription(subscriptionGuid: string): void; /** * Subscribe to receive click events. The subscriber callback will be called whenever this card is clicked by the * user. * * @param subscriber - The callback function to receive click events. This function will be invoked with * no arguments when this card records a click. * * @returns The identifier of the subscription created. This can be passed to `Card.removeSubscription` * to cancel the subscription. Returns null if the subscriber passed is not a function. */ subscribeToClickedEvent(subscriber: () => void): string | null; /** * Subscribe to receive dismissed events. The subscriber callback will be called whenever this card is dismissed by the * user. * * @param subscriber - The callback function to receive dismissed events. This function will be invoked with * no arguments when this card records a dismissal. * * @returns The identifier of the subscription created. This can be passed to `Card.removeSubscription` * to cancel the subscription. Returns null if the subscriber passed is not a function. */ subscribeToDismissedEvent(subscriber: () => void): string | null; /** The id of the card. This will be reported back to Braze with events for analytics purposes. */ id?: string; /** Whether this card has been shown to the user. */ viewed: boolean; /** When this card was last modified. */ updated: Date | null; /** When this card expires and should stop being shown to the user. */ expiresAt: Date | null; /** Object of string/string key/value pairs. Defaults to empty object {}. */ extras: Record; /** Whether to pin this card to the top of the view. */ pinned: boolean; /** Whether this card is a ControlCard. */ isControl: boolean; } export class ImageOnly extends Card { /** * A card with only an image, which can be passed to `showContentCards` or handled manually. * Subscribe to receive new cards via `subscribeToContentCardsUpdates` * * @param id - The id of the card. This will be reported back to Braze with events for analytics purposes. * @param viewed - Whether this card has been shown to the user. * @param imageUrl - The url for this card's image. * @param updated - When this card was last modified. * @param expiresAt - When this card expires and should stop being shown to the user. * @param url - A url to open when this card is clicked. * @param aspectRatio - The aspect ratio for this card's image. This field is meant to serve as a hint before * image loading completes. Note that the field may not be supplied in certain circumstances. * @param extras - Object of string/string key/value pairs. * @param pinned - Whether to pin this card to the top of the view. * @param dismissible - Whether to allow the user to dismiss this card, removing it from the view. * @param clicked - Whether this card has ever been clicked on this device. * @param language - The language of the card in BCP 47 format. This field is set in the campaign on the Braze dashboard. * @param altImageText - The alternate text of the card's image to be announced when in accessibility mode. */ constructor( id?: string, viewed?: boolean, imageUrl?: string, updated?: Date, expiresAt?: Date, url?: string, aspectRatio?: number, extras?: Record, pinned?: boolean, dismissible?: boolean, clicked?: boolean, language?: string, altImageText?: string, ); /** The url for this card's image. */ imageUrl?: string; /** A url to open when this card is clicked. */ url?: string; /** * The aspect ratio for this card's image. This field is meant to serve as a hint before image loading completes. * Note that the field may not be supplied in certain circumstances. * */ aspectRatio: number | null; /** Whether this card has been dismissed. */ dismissed: boolean; /** Whether to allow the user to dismiss this card, removing it from the view. */ dismissible: boolean; /** Whether this card has ever been clicked on this device. */ clicked: boolean; /** The language of the card in BCP 47 format. This field is set in the campaign on the Braze dashboard. */ language?: string; /** The alternate text of the card's image to be announced when in accessibility mode. */ altImageText?: string; } export class CaptionedImage extends Card { /** * A card with a large image and descriptive text, which can be passed to `showContentCards` or handled manually. * Subscribe to receive new cards via `subscribeToContentCardsUpdates`. * * @param id - The id of the card. This will be reported back to Braze with events for analytics purposes. * @param viewed - Whether this card has been shown to the user. * @param title - The title text for this card. * @param imageUrl - The url for this card's image. * @param description - The body text for this card. * @param updated - When this card was last modified. * @param expiresAt - When this card expires and should stop being shown to the user. * @param url - A url to open when this card is clicked. * @param linkText - The display text for the url. * @param aspectRatio - The aspect ratio for this card's image. This field is meant to serve as a hint before * image loading completes. Note that the field may not be supplied in certain circumstances. * @param extras - Object of string/string key/value pairs. * @param pinned - Whether to pin this card to the top of the view. * @param dismissible - Whether to allow the user to dismiss this card, removing it from the view. * @param clicked - Whether this card has ever been clicked on this device. * @param language - The language of the card in BCP 47 format. This field is set in the campaign on the Braze dashboard. * @param altImageText - The alternate text of the card's image to be announced when in accessibility mode. */ constructor( id?: string, viewed?: boolean, title?: string, imageUrl?: string, description?: string, updated?: Date, expiresAt?: Date, url?: string, linkText?: string, aspectRatio?: number, extras?: Record, pinned?: boolean, dismissible?: boolean, clicked?: boolean, language?: string, altImageText?: string, ); /** The title text for this card. */ title: string; /** The url for this card's image. */ imageUrl?: string; /** The body text for this card. */ description: string; /** A url to open when this card is clicked. */ url?: string; /** The display text for the url. */ linkText?: string; /** * The aspect ratio for this card's image. This field is meant to serve as a hint before image loading completes. * Note that the field may not be supplied in certain circumstances. */ aspectRatio: number | null; /** Whether this card has been dismissed. */ dismissed: boolean; /** Whether to allow the user to dismiss this card, removing it from the view. */ dismissible: boolean; /** Whether this card has ever been clicked on this device. */ clicked: boolean; /** The language of the card in BCP 47 format. This field is set in the campaign on the Braze dashboard. */ language?: string; /** The alternate text of the card's image to be announced when in accessibility mode. */ altImageText?: string; } export class ClassicCard extends Card { /** * A card with a title, body, and optionally a small image, which can be passed to * `showContentCards` or handled manually. * Subscribe to receive new cards via `subscribeToContentCardsUpdates`. * * @param id - The id of the card. This will be reported back to Braze with events for analytics purposes. * @param viewed - Whether this card has been shown to the user. * @param title - The title text for this card. * @param imageUrl - The url for this card's image. * @param description - The body text for this card. * @param updated - When this card was last modified. * @param expiresAt - When this card expires and should stop being shown to the user. * @param url - A url to open when this card is clicked. * @param linkText - The display text for the url. * @param aspectRatio - The aspect ratio for this card's image. This field is meant to serve as a hint before * image loading completes. Note that the field may not be supplied in certain circumstances. * @param extras - Object of string/string key/value pairs. * @param pinned - Whether to pin this card to the top of the view. * @param dismissible - Whether to allow the user to dismiss this card, removing it from the view. * @param clicked - Whether this card has ever been clicked on this device. * @param language - The language of the card in BCP 47 format. This field is set in the campaign on the Braze dashboard. * @param altImageText - The alternate text of the card's image to be announced when in accessibility mode. */ constructor( id?: string, viewed?: boolean, title?: string, imageUrl?: string, description?: string, updated?: Date, expiresAt?: Date, url?: string, linkText?: string, aspectRatio?: number, extras?: Record, pinned?: boolean, dismissible?: boolean, clicked?: boolean, language?: string, altImageText?: string, ); /** The title text for this card. */ title: string; /** The url for this card's image. */ imageUrl?: string; /** The body text for this card. */ description: string; /** A url to open when this card is clicked. */ url?: string; /** The display text for the url. */ linkText?: string; /** * The aspect ratio for this card's image. This field is meant to serve as a hint before image loading completes. * Note that the field may not be supplied in certain circumstances. */ aspectRatio: number | null; /** Whether this card has been dismissed. */ dismissed: boolean; /** Whether to allow the user to dismiss this card, removing it from the view. */ dismissible: boolean; /** Whether this card has ever been clicked on this device. */ clicked: boolean; /** The language of the card in BCP 47 format. This field is set in the campaign on the Braze dashboard. */ language?: string; /** The alternate text of the card's image to be announced when in accessibility mode. */ altImageText?: string; } export class ControlCard extends Card { /** * A card with no display that logs impressions, which can be passed to * `showContentCards` or handled manually. * Subscribe to receive new cards via `subscribeToContentCardsUpdates`. * * @param id - The id of the card. This will be reported back to Braze with events for analytics purposes. * @param viewed - Whether this card has been shown to the user. * @param updated - When this card was last modified. * @param expiresAt - When this card expires and should stop being shown to the user. * @param extras - Object of string/string key/value pairs. * @param pinned - Whether to pin this card to the top of the view. */ constructor( id?: string, viewed?: boolean, updated?: Date, expiresAt?: Date, extras?: Record, pinned?: boolean, ); /** Whether this card is a ControlCard. */ isControl: true; } export class ContentCards { /** * A collection of `Card` descendents (`ClassicCard`, `CaptionedImage`, `ImageOnly`). * If you use Braze's UI to render content cards, you generally shouldn't need to * interact with this class, but if you are building your own content cards class manually, use * `getCachedContentCards` to get the most recent ContentCards object. * * @param cards - Array of `Card` descendents (`ClassicCard`, `CaptionedImage`, `ImageOnly`). * @param lastUpdated - When this collection of cards was received from Braze servers. If null, it means the * content cards are still being fetched for this user. */ constructor(cards: Card[], lastUpdated: Date | null); /** Array of `Card` descendents (`ClassicCard`, `CaptionedImage`, `ImageOnly`). */ cards: Card[]; /** * When this collection of cards was received from Braze servers. If null, it means the * content cards are still being fetched for this user. */ lastUpdated: Date | null; /** * Get the current unviewed card count. This is useful for powering badges on your control for showing the content cards. * `ControlCard` cards do not count towards the unviewed count. */ getUnviewedCardCount(): number; } export class ControlMessage { /** * A non-showing message placeholder that represents this user receiving the the control for a multivariate * test. Can be passed to `showInAppMessage` to log the user's * entrollment in the control or handled manually. * * @param triggerId - The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. */ constructor(triggerId?: string); /** * The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. */ triggerId?: string; /** Object of string/string key/value pairs. */ extras: Record; /** Whether this message is a ControlMessage. */ isControl: true; } type SlideFrom = (typeof InAppMessage.SlideFrom)[keyof typeof InAppMessage.SlideFrom]; type ClickAction = (typeof InAppMessage.ClickAction)[keyof typeof InAppMessage.ClickAction]; type DismissType = (typeof InAppMessage.DismissType)[keyof typeof InAppMessage.DismissType]; type OpenTarget = (typeof InAppMessage.OpenTarget)[keyof typeof InAppMessage.OpenTarget]; type ImageStyle = (typeof InAppMessage.ImageStyle)[keyof typeof InAppMessage.ImageStyle]; type Orientation = (typeof InAppMessage.Orientation)[keyof typeof InAppMessage.Orientation]; type TextAlignment = (typeof InAppMessage.TextAlignment)[keyof typeof InAppMessage.TextAlignment]; type CropType = (typeof InAppMessage.CropType)[keyof typeof InAppMessage.CropType]; /** * Abstract base for in-app messages. Use subclasses `SlideUpMessage`, * `ModalMessage`, `FullScreenMessage`, and `HtmlMessage`. For example, you can check `if (message instanceof FullScreenMessage)` to * determine if the message is of the type `FullScreenMessage`. */ export class InAppMessage { static SlideFrom: { TOP: "TOP"; BOTTOM: "BOTTOM"; }; static ClickAction: { URI: "URI"; NONE: "NONE"; }; static DismissType: { AUTO_DISMISS: "AUTO_DISMISS"; MANUAL: "SWIPE"; }; static OpenTarget: { NONE: "NONE"; BLANK: "BLANK"; }; static ImageStyle: { TOP: "TOP"; GRAPHIC: "GRAPHIC"; }; static Orientation: { PORTRAIT: "PORTRAIT"; LANDSCAPE: "LANDSCAPE"; }; static TextAlignment: { START: "START"; CENTER: "CENTER"; END: "END"; }; static CropType: { /** * Centers the image in the available space and crops any overflowing edges. */ CENTER_CROP: "CENTER_CROP"; /** * 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) */ FIT_CENTER: "FIT_CENTER"; }; /** The message to display to the user. */ message?: string; /** Object of string/string key/value pairs. */ extras: Record; /** * The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. */ triggerId?: string; /** * How the message is dismissed, via a timer or requiring interaction from the user. * See the `DismissType` enum. */ dismissType: DismissType; /** * Length of time in milliseconds until auto-dismiss should occur. Only used when * dismissType is `DismissType`.AUTO_DISMISS */ duration: number; /** Whether to animate the showing of this message. */ animateIn: boolean; /** Whether to animate the hiding of this message. */ animateOut: boolean; /** The ID to give the parent HTML element that this message is rendered into. */ htmlId?: 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. */ css?: string; /** Object of string/string key/value pairs. */ messageExtras?: Record; /** Whether this message is a ControlMessage. */ isControl: false; /** * Call this method if you wish to programmatically remove the message from the DOM. This method will only * work with the Braze UI. */ closeMessage(): void; /** Remove all event subscriptions from this message. */ removeAllSubscriptions(): void; /** * Remove an event subscription that you previously subscribed to. * * @param subscriptionGuid - The identifier of the subscription you wish to remove, returned by the method * you initially used to create it. */ removeSubscription(subscriptionGuid: string): void; /** * Subscribe to receive click events. The subscriber callback will be called whenever this message is clicked by the * user. * * @param subscriber - The callback function to receive click events. This function will be invoked with * no arguments when this message records a click. * * @returns 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. */ subscribeToClickedEvent(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). * * @param subscriber - The callback function to receive dismissed events. This function will be invoked with * no arguments when this message records a dismissal. * * @returns 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(subscriber: () => void): string | null; } export class FullScreenMessage extends InAppMessage { /** * 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`. * * @param message - The message to display to the user. * @param messageAlignment - How to align message text. See the `TextAlignment` enum. * @param extras - Object of string/string key/value pairs. * @param triggerId - The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. * @param clickAction - Where the user should be brought when clicking on this message. See the * `ClickAction` enum. * @param uri - If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this message. * @param openTarget - If ```clickAction``` is `ClickAction`.URI, whether to open clicks * in a new tab/window. See the `OpenTarget` enum. * @param dismissType - How the message is dismissed, via a timer or requiring interaction from the user. * See the `DismissType` enum. * @param duration - Length of time in milliseconds until auto-dismiss should occur. Only used when * dismissType is `DismissType`.AUTO_DISMISS * @param icon - A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See * [the Font Awesome cheatsheet](http://fortawesome.github.io/Font-Awesome/cheatsheet/) for details. * @param imageUrl - 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. * @param 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. * @param iconColor - Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). * @param iconBackgroundColor - Background color of icon. Hex value with opacity (e.g. 0xff00ff00 * is opaque green). * @param backgroundColor - Background color of entire message. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). * @param textColor - Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque * green). * @param closeButtonColor - Color of close button. Hex value with opacity (e.g. 0xff00ff00 is * opaque green). * @param animateIn - Whether to animate the showing of this message. * @param animateOut - Whether to animate the hiding of this message. * @param header - Header text to * @param headerAlignment - How to align header text. See the `TextAlignment` enum. * @param headerTextColor - Color of header text. Hex value with opacity (e.g. 0xff00ff00 is * opaque green). * @param frameColor - Color of the background frame which blocks page interaction while the * message is showing. * @param buttons - Array of up to two `InAppMessageButton` objects. * @param cropType - How to crop and fit images in the allowable space. See the `CropType` enum. * @param orientation - Whether to lay out this in-app message as a portrait or landscape. See the * `Orientation` enum. * @param htmlId - The ID to give the parent HTML element that this message is rendered into. * @param css - 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. * @param messageExtras - Object of string/string key/value pairs. * @param language - The language of the message in BCP 47 format. This field is set in the campaign on the Braze dashboard. * @param altImageText - The alternate text of the message's image to be announced when in accessibility mode. */ constructor( message?: string, messageAlignment?: TextAlignment, extras?: Record, triggerId?: string, clickAction?: ClickAction, uri?: string, openTarget?: OpenTarget, dismissType?: DismissType, duration?: number, icon?: string, imageUrl?: string, imageStyle?: ImageStyle, iconColor?: number, iconBackgroundColor?: number, backgroundColor?: number, textColor?: number, closeButtonColor?: number, animateIn?: boolean, animateOut?: boolean, header?: string, headerAlignment?: TextAlignment, headerTextColor?: number, frameColor?: number, buttons?: InAppMessageButton[], cropType?: CropType, orientation?: Orientation, htmlId?: string, css?: string, messageExtras?: Record, language?: string, altImageText?: string, ); /** How to align message text. See the `TextAlignment` enum. */ messageAlignment: TextAlignment; /** * Where the user should be brought when clicking on this message. See the * `ClickAction` enum. */ clickAction: ClickAction; /** * If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this message. */ uri?: string; /** * If ```clickAction``` is `ClickAction`.URI, whether to open clicks * in a new tab/window. See the `OpenTarget` enum. */ openTarget: OpenTarget; /** * A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See * [the Font Awesome cheatsheet](http://fortawesome.github.io/Font-Awesome/cheatsheet/) for details. */ icon?: 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. */ imageUrl?: string; /** * 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. */ imageStyle: ImageStyle; /** Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ iconColor: number; /** Background color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ iconBackgroundColor: number; /** Background color of entire message. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ backgroundColor: number; /** Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ textColor: number; /** Color of close button. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ closeButtonColor: number; /** Header text to */ header?: string; /** How to align header text. See the `TextAlignment` enum. */ headerAlignment: TextAlignment; /** Color of header text. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ headerTextColor: number; /** Color of the background frame which blocks page interaction while the message is showing. */ frameColor: number; /** Array of up to two `InAppMessageButton` objects. */ buttons: InAppMessageButton[]; /** How to crop and fit images in the allowable space. See the `CropType` enum. */ cropType: CropType; /** * Whether to lay out this in-app message as a portrait or landscape. See the * `Orientation` enum. */ orientation: Orientation; /** Object of string/string key/value pairs. */ messageExtras?: Record; /** The language of the message in BCP 47 format. This field is set in the campaign on the Braze dashboard. */ language?: string; /** The alternate text of the message's image to be announced when in accessibility mode. */ altImageText?: string; } export class ModalMessage extends InAppMessage { /** * 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` * * @param message - The message to display to the user. * @param messageAlignment - How to align message text. See the `TextAlignment` enum. * @param extras - Object of string/string key/value pairs. * @param triggerId - The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. * @param clickAction - Where the user should be brought when clicking on this message. See the * `ClickAction` enum. * @param uri - If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this message. * @param openTarget - If ```clickAction``` is `ClickAction`.URI, whether to open clicks * in a new tab/window. See the `OpenTarget` enum. * @param dismissType - How the message is dismissed, via a timer or requiring interaction from the user. * See the `DismissType` enum. * @param duration - Length of time in milliseconds until auto-dismiss should occur. Only used when * dismissType is `DismissType`.AUTO_DISMISS * @param icon - A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See * [the Font Awesome cheatsheet](http://fortawesome.github.io/Font-Awesome/cheatsheet/) for details. * @param imageUrl - 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. * @param 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. * @param iconColor - Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). * @param iconBackgroundColor - Background color of icon. Hex value with opacity (e.g. 0xff00ff00 * is opaque green). * @param backgroundColor - Background color of entire message. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). * @param textColor - Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque * green). * @param closeButtonColor - Color of close button. Hex value with opacity (e.g. 0xff00ff00 is * opaque green). * @param animateIn - Whether to animate the showing of this message. * @param animateOut - Whether to animate the hiding of this message. * @param header - Header text to * @param headerAlignment - How to align header text. See the `TextAlignment` enum. * @param headerTextColor - Color of header text. Hex value with opacity (e.g. 0xff00ff00 is * opaque green). * @param frameColor - Color of the background frame which blocks page interaction while the * message is showing. * @param buttons - Array of up to two`InAppMessageButton` objects. * @param cropType - How to crop and fit images in the allowable space. See the `CropType` enum. * @param htmlId - The ID to give the parent HTML element that this message is rendered into. * @param css - 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. * @param language - The language of the message in BCP 47 format. This field is set in the campaign on the Braze dashboard. * @param altImageText - The alternate text of the message's image to be announced when in accessibility mode. */ constructor( message?: string, messageAlignment?: TextAlignment, extras?: Record, triggerId?: string, clickAction?: ClickAction, uri?: string, openTarget?: OpenTarget, dismissType?: DismissType, duration?: number, icon?: string, imageUrl?: string, imageStyle?: ImageStyle, iconColor?: number, iconBackgroundColor?: number, backgroundColor?: number, textColor?: number, closeButtonColor?: number, animateIn?: boolean, animateOut?: boolean, header?: string, headerAlignment?: TextAlignment, headerTextColor?: number, frameColor?: number, buttons?: InAppMessageButton[], cropType?: CropType, htmlId?: string, css?: string, messageExtras?: Record, language?: string, altImageText?: string, ); /** How to align message text. See the `TextAlignment` enum. */ messageAlignment: TextAlignment; /** * Where the user should be brought when clicking on this message. See the * `ClickAction` enum. */ clickAction: ClickAction; /** * If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this message. */ uri?: string; /** * If ```clickAction``` is `ClickAction`.URI, whether to open clicks * in a new tab/window. See the `OpenTarget` enum. */ openTarget: OpenTarget; /** * A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See * [the Font Awesome cheatsheet](http://fortawesome.github.io/Font-Awesome/cheatsheet/) for details. */ icon?: 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. */ imageUrl?: string; /** * 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. */ imageStyle: ImageStyle; /** Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ iconColor: number; /** Background color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ iconBackgroundColor: number; /** Background color of entire message. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ backgroundColor: number; /** Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ textColor: number; /** Color of close button. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ closeButtonColor: number; /** Header text to */ header?: string; /** How to align header text. See the `TextAlignment` enum. */ headerAlignment: TextAlignment; /** Color of header text. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ headerTextColor: number; /** Color of the background frame which blocks page interaction while the message is showing. */ frameColor: number; /** Array of up to two`InAppMessageButton` objects. */ buttons: InAppMessageButton[]; /** How to crop and fit images in the allowable space. See the `CropType` enum. */ cropType: CropType; /** Object of string/string key/value pairs. */ messageExtras?: Record; /** The language of the message in BCP 47 format. This field is set in the campaign on the Braze dashboard. */ language?: string; /** The alternate text of the message's image to be announced when in accessibility mode. */ altImageText?: string; } export class HtmlMessage extends InAppMessage { /** * An html-content 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` * * @param message - The html content to display to the user. * @param extras - Object of string/string key/value pairs. * @param triggerId - The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. * @param dismissType - How the message is dismissed, via a timer or requiring interaction from the user. * See the `TextAlignment` enum. * @param duration - Length of time in milliseconds until auto-dismiss should occur. Only used when * dismissType is `DismissType`.AUTO_DISMISS. * @param animateIn - Whether to animate the showing of this message. * @param animateOut - Whether to animate the hiding of this message. * @param frameColor - Color of the background frame which blocks page interaction while the message is showing. * @param htmlId - The ID to give the parent HTML element that this message is rendered into. * @param css - 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. * @param messageFields - Structured data provided by the Braze backend. * @param messageExtras - Object of string/string key/value pairs. */ constructor( message: string, extras?: Record, triggerId?: string, dismissType?: DismissType, duration?: number, animateIn?: boolean, animateOut?: boolean, frameColor?: number, htmlId?: string, css?: string, messageFields?: Record, messageExtras?: Record, ); /** Color of the background frame which blocks page interaction while the message is showing. */ frameColor: number; /** Structured data provided by the Braze backend. */ messageFields?: Record; /** Object of string/string key/value pairs. */ messageExtras?: Record; } /** * A slide-up 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` */ export class SlideUpMessage extends InAppMessage { /** * A slide-up 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` * * @param message - The message to display to the user. * @param messageAlignment - How to align message text. See the `TextAlignment` enum. * @param slideFrom - Where the message should slide in from. See the `SlideFrom` enum. * @param extras - Object of string/string key/value pairs. * @param triggerId - The id of the trigger that created this message. The SDK will report back this to * Braze with in-app message analytics events. * @param clickAction - Where the user should be brought when clicking on this message. See the * `ClickAction` enum. * @param uri - If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this message. * @param openTarget - If ```clickAction``` is `ClickAction`.URI, whether to open clicks * in a new tab/window. See the `OpenTarget` enum. * @param dismissType - How the message is dismissed, via a timer or requiring interaction from the user. * See the `DismissType` enum. * @param duration - Length of time in milliseconds until auto-dismiss should occur. Only used when * dismissType is `DismissType`.AUTO_DISMISS * @param icon - A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See * [the Font Awesome cheatsheet](http://fortawesome.github.io/Font-Awesome/cheatsheet/) for details. * @param imageUrl - 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. * @param iconColor - Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). * @param iconBackgroundColor - Background color of icon. Hex value with opacity (e.g. 0xff00ff00 * is opaque green). * @param backgroundColor - Background color of entire message. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). * @param textColor - Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque * green). * @param closeButtonColor - Color of close button. Hex value with opacity (e.g. 0xff00ff00 is * opaque green). * @param animateIn - Whether to animate the showing of this message. * @param animateOut - Whether to animate the hiding of this message. * @param htmlId - The ID to give the parent HTML element that this message is rendered into. * @param css - 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. * @param messageExtras - Object of string/string key/value pairs. * @param language - The language of the message in BCP 47 format. This field is set in the campaign on the Braze dashboard. * @param altImageText - The alternate text of the message's image to be announced when in accessibility mode. */ constructor( message: string, messageAlignment?: TextAlignment, slideFrom?: SlideFrom, extras?: Record, triggerId?: string, clickAction?: ClickAction, uri?: string, openTarget?: OpenTarget, dismissType?: DismissType, duration?: number, icon?: string, imageUrl?: string, iconColor?: number, iconBackgroundColor?: number, backgroundColor?: number, textColor?: number, closeButtonColor?: number, animateIn?: boolean, animateOut?: boolean, htmlId?: string, css?: string, messageExtras?: Record, language?: string, altImageText?: string, ); /** How to align message text. See the `TextAlignment` enum. */ messageAlignment: TextAlignment; /** Where the message should slide in from. See the `SlideFrom` enum. */ slideFrom: SlideFrom; /** * Where the user should be brought when clicking on this message. See the * `ClickAction` enum. */ clickAction: ClickAction; /** * If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this message. */ uri?: string; /** * If ```clickAction``` is `ClickAction`.URI, whether to open clicks * in a new tab/window. See the `OpenTarget` enum. */ openTarget: OpenTarget; /** * A Font Awesome unicode string, e.g. "\uf042" to fa-adjust. See * [the Font Awesome cheatsheet](http://fortawesome.github.io/Font-Awesome/cheatsheet/) for details. */ icon?: 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. */ imageUrl?: string; /** Color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ iconColor: number; /** Background color of icon. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ iconBackgroundColor: number; /** Background color of entire message. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ backgroundColor: number; /** Text color of message. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ textColor: number; /** Color of close button. Hex value with opacity (e.g. 0xff00ff00 is opaque green). */ closeButtonColor: number; /** Object of string/string key/value pairs. */ messageExtras?: Record; /** The language of the message in BCP 47 format. This field is set in the campaign on the Braze dashboard. */ language?: string; /** The alternate text of the message's image to be announced when in accessibility mode. */ altImageText?: string; } type Genders = (typeof User.Genders)[keyof typeof User.Genders]; type NotificationSubscriptionTypes = (typeof User.NotificationSubscriptionTypes)[keyof typeof User.NotificationSubscriptionTypes]; /** * Do not construct directly - use `getUser` to get the user object. * User provides an object which lets you update the attributes stored by Braze for your user. * * This class has been designed to provide fire and forget semantics and to not impact the performance or lifecycle of * calling code. As such, changes made to an User are enqueued locally and flushed to Braze's servers * asynchronously. */ export class User { /** Enum to represent valid genders. */ static Genders: { MALE: "m"; FEMALE: "f"; OTHER: "o"; UNKNOWN: "u"; NOT_APPLICABLE: "n"; PREFER_NOT_TO_SAY: "p"; }; /** Enum to represent notification status for email and push notifications. */ static NotificationSubscriptionTypes: { OPTED_IN: "opted_in"; SUBSCRIBED: "subscribed"; UNSUBSCRIBED: "unsubscribed"; }; /** * Adds an an alias for the user. (alias, label) pairs can exist on one and only one user. * If a different user already has this alias or external user id, the alias attempt will be rejected * on the server. * * @param alias - An identifier for this user. * @param label - A label for the alias. e.g. the source of the alias, like "internal_id" * * @returns Whether the update was successfully enqueued. */ addAlias(alias: string, label: string): boolean; /** * Adds a string to a custom attribute string array, or creates that array if one doesn't exist. * * @param key - The identifier of the custom attribute. Limited to 255 characters in length, cannot begin with * a $, and can only contain alphanumeric characters and punctuation. * @param value - The string to be added to the array. Strings are limited to 255 characters in length, cannot * begin with a $, and can only contain alphanumeric characters and punctuation. * * @returns Whether the update was successfully enqueued. */ addToCustomAttributeArray(key: string, value: string): boolean; /** * Adds a user to an email or SMS subscription group. * * @param subscriptionGroupId - The unique identifier of the subscription group. * * @returns Whether the update was successfully enqueued. */ addToSubscriptionGroup(subscriptionGroupId: string): boolean; /** * Asynchronously retrieves the current user's id, or null if the user is anonymous / has not been identified. * For example: * * ``` * braze.getUser().getUserId(function(userId) { * console.log('The user is ' + userId); * }); * ``` * @deprecated - The getUserId callback is deprecated. Access the method's return value directly instead. * @param callback - Asynchronous callback - this will be invoked with the userId. */ getUserId(callback: (userId: string | null) => void): void; /** * Retrieves the current user's id, or null if the user is anonymous / has not been identified. * For example: * * ``` * console.log('The user is ' + braze.getUser().getUserId()); * ``` */ getUserId(): string | null | undefined; /** * Increment/decrement the value of a custom attribute. Only numeric custom attributes * can be incremented. Attempts to increment a custom attribute that is not numeric * will be ignored. If you increment a custom attribute that has not previously been * set, a custom attribute will be created and assigned the value of incrementValue. * To decrement the value of a custom attribute, use a negative incrementValue. * * @param key - The identifier of the custom attribute. Limited to 255 characters in length, cannot begin with * a $, and can only contain alphanumeric characters and punctuation. * @param incrementValue - Default 1. May be negative to decrement. * * @returns Whether the update was successfully enqueued. */ incrementCustomUserAttribute(key: string, incrementValue?: number): boolean; /** * Removes a string from a custom attribute string array. * * @param key - The identifier of the custom attribute. Limited to 255 characters in length, cannot begin with * a $, and can only contain alphanumeric characters and punctuation. * @param value - The string to be removed from the array. Strings are limited to 255 characters in length, * cannot begin with a $, and can only contain alphanumeric characters and punctuation. * * @returns Whether the update was successfully enqueued. */ removeFromCustomAttributeArray(key: string, value: string): boolean; /** * Removes a user from an email or SMS subscription group. * * @param subscriptionGroupId - The unique identifier of the subscription group. * * @returns Whether the update was successfully enqueued. */ removeFromSubscriptionGroup(subscriptionGroupId: string): boolean; /** * Sets the country for the user. * * @param country - Limited to 255 characters in length. Accepts an explicit null value to null out attribute. * * @returns Whether the update was successfully enqueued. */ setCountry(country: string | null): boolean; /** * Sets a custom user location attribute. * * @param key - The identifier of the custom location attribute. Limited to 255 characters in length, cannot begin with * a $, and can only contain alphanumeric characters and punctuation. * @param latitude - The latitude of the user's location in (valid values are between -90 to 90 degrees). Passing a null * value for both latitude and longitude will remove this custom attribute from the user. * @param longitude - The longitude of the user's location (valid values are between -180 to 180 degrees). Passing a null * value for both latitude and longitude will remove this custom attribute from the user. * * @returns Whether the update was successfully enqueued. */ setCustomLocationAttribute( key: string, latitude: number | null, longitude: number | null, ): boolean; /** * Sets a custom user attribute. This can be any key/value pair and is used to collect extra * information about the user. * * @param key - The identifier of the custom attribute. Limited to 255 characters in length, cannot begin with * a $, and can only contain alphanumeric characters and punctuation. * @param value - Can be numeric, boolean, a Date object, a string, or an array of strings. Strings are limited to * 255 characters in length, cannot begin with a $ and cannot contain new lines, tabs or double quotes. * It can only include alphanumeric characters and other punctuation. * Passing a null value will remove this custom attribute from the user. * @param merge - Whether the value should be merged with the existing value on the backend. If `false` (default), any existing * attribute will be overwritten. If `true`, existing objects and arrays of objects will be merged. To update an array of objects, * follow the guidelines in our * [public docs](https://www.braze.com/docs/user_guide/data_and_analytics/custom_data/custom_attributes/array_of_objects/#usage-examples). * * @returns {boolean} Whether the update was successfully enqueued. */ setCustomUserAttribute( key: string, value: | number | boolean | Date | string | string[] | object | object[] | null, merge?: boolean, ): boolean; /** * Sets the date of birth of the user. Alternatively takes in null values for all parameters * to set date of birth to null. * * @param year * @param month - 1-12 * @param day * * @returns Whether the update was successfully enqueued. */ setDateOfBirth( year: number | null, month: number | null, day: number | null, ): boolean; /** * Sets the email address of the user. * * @param email - Must pass RFC-5322 email address validation. Accepts an explicit null value to * null out attribute. * * @returns Whether the update was successfully enqueued. */ setEmail(email: string | null): boolean; /** * Sets whether the user should be sent email campaigns. * * @param notificationSubscriptionType - Notification setting (explicitly opted-in, subscribed, or unsubscribed). * See the `NotificationSubscriptionTypes` enum. * * @returns Whether the update was successfully enqueued. */ setEmailNotificationSubscriptionType( notificationSubscriptionType: NotificationSubscriptionTypes, ): boolean; /** * Sets the first name of the user. * * @param firstName - Limited to 255 characters in length. Accepts an explicit null value to null out attribute. * * @returns Whether the update was successfully enqueued. */ setFirstName(firstName: string | null): boolean; /** * Sets the gender of the user. * * @param gender - Generally 'm' or 'f'. Accepts an explicit null value to null out attribute. Use `Genders` * enum when setting this value. * * @returns Whether the update was successfully enqueued. */ setGender(gender: Genders | null): boolean; /** * Sets the home city for the user. * * @param homeCity - Limited to 255 characters in length. Accepts an explicit null value to null out attribute. * * @returns Whether the update was successfully enqueued. */ setHomeCity(homeCity: string | null): boolean; /** * Sets the language for this user. By default, the user's language is detected automatically * from the browser. If you call this method, Braze will ignore the detected language and use * the language you have provided instead. * * @param language - An [ISO 639-1 Language Code](https://www.w3schools.com/tags/ref_language_codes.asp). * Accepts an explicit null value to null out attribute. * * @returns {boolean} Whether the update was successfully enqueued. */ setLanguage(language: string | null): boolean; /** * Sets the last known location for the user. * * @param latitude - The latitude of the user's location in (valid values are between -90 to 90 degrees) * @param longitude - The longitude of the user's location (valid values are between -180 to 180 degrees) * @param accuracy - The accuracy of the user's lat/long in meters. * @param altitude - The altitude of the user's location in meters above or below the WGS 84 reference * ellipsoid. * @param altitudeAccuracy - The accuracy of the user's altitude in meters. * * @returns Whether the update was successfully enqueued. */ setLastKnownLocation( latitude: number, longitude: number, accuracy?: number, altitude?: number, altitudeAccuracy?: number, ): boolean; /** * Sets the last name of the user. * * @param lastName - Limited to 255 characters in length. Accepts an explicit null value to null out attribute. * * @returns Whether the update was successfully enqueued. */ setLastName(lastName: string | null): boolean; /** * Sets the phone number of the user. * * @param phoneNumber - A phone number is considered valid if it is no more than 255 characters in length and * contains only numbers, whitespace, and the following special characters +.-() Accepts an explicit null value to * null out attribute. * * @returns Whether the update was successfully enqueued. */ setPhoneNumber(phoneNumber: string | null): boolean; /** * Sets whether the user should be sent push campaigns. * * @param notificationSubscriptionType - Notification setting (explicitly opted-in, subscribed, or unsubscribed). * See the `NotificationSubscriptionTypes` enum. * * @returns Whether the update was successfully enqueued. */ setPushNotificationSubscriptionType( notificationSubscriptionType: NotificationSubscriptionTypes, ): boolean; /** * Sets the LINE user ID for the user. * * @param lineId - Must be a non-empty string no greater than 33 characters in length. * Accepts an explicit null value to null out attribute. * * @returns Whether the update was successfully enqueued. */ setLineId(lineId: string | null): boolean; } export class InAppMessageButton { /** * Represents a button on an `ModalMessage` or `FullScreenMessage`. * * @param text - The text to display on this button * @param backgroundColor - The background color for this button. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). * @param textColor - The color for the text of this button. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). * @param borderColor - The color for the border of this button. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). * @param clickAction - Where the user should be brought when clicking on this button. See the * `ClickAction` enum. * @param uri - If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this button. * @param id - The id for this button. Used for analytics. */ constructor( text: string, backgroundColor?: number, textColor?: number, borderColor?: number, clickAction?: ClickAction, uri?: string, id?: number, ); /** The text to display on this button */ text: string; /** * The background color for this button. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). */ backgroundColor: number; /** * The color for the text of this button. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). */ textColor: number; /** * The color for the border of this button. Hex value with opacity (e.g. * 0xff00ff00 is opaque green). */ borderColor: number; /** * Where the user should be brought when clicking on this button. See the * `ClickAction` enum. */ clickAction: ClickAction; /** * If ```clickAction``` is `ClickAction`.URI, the URI to follow when the * user clicks on this button. */ uri?: string; /** The id for this button. Used for analytics. */ id?: number; /** Remove all event subscriptions from this button. */ removeAllSubscriptions(): void; /** * Remove an event subscription that you previously subscribed to. * * @param subscriptionGuid - The identifier of the subscription you wish to remove, returned by the method * you initially used to create it. */ removeSubscription(subscriptionGuid: string): void; /** * Subscribe to receive click events on this button. The subscriber callback will be called whenever this button is * clicked by the user. * * @param subscriber - The callback function to receive click events. This function will be invoked with * no arguments when this button records a click. * * @returns 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. */ subscribeToClickedEvent(subscriber: () => void): string | null; } export interface StringProperty { type: "string"; value: string; } export interface NumberProperty { type: "number"; value: number; } export interface BooleanProperty { type: "boolean"; value: boolean; } export interface ImageProperty { type: "image"; value: string; } export interface TimestampProperty { type: "datetime"; value: number; } export type JsonPropertyValue = Partial>; export interface JsonProperty { type: "jsonobject"; value: JsonPropertyValue; } export type PropertiesJson = Partial< Record< string, | StringProperty | NumberProperty | BooleanProperty | ImageProperty | JsonProperty | TimestampProperty > >; export interface eCommerceProductProperties { /** * A unique identifier for the product, such as product ID or SKU. Cannot exceed 255 characters in length. */ product_id: string; /** * The name of the product. Cannot exceed 255 characters in length. */ product_name: string; /** * A unique identifier for the product variant (ex: shirt_medium_blue). Cannot exceed 255 characters in length. */ variant_id: string; /** * The URL of the product image. Cannot exceed 255 characters in length. */ image_url?: string; /** * The URL of the product page. Cannot exceed 255 characters in length. */ product_url?: string; /** * The number of units of the product. */ quantity: number; /** * The variant unit price of the product at the time of viewing (ex: 12.99). */ price: number; /** * Additional metadata about the product. Keys are limited to 255 characters in length, cannot begin with a $ character, * and can only contain alphanumeric characters and punctuation. Total size of metadata cannot exceed 50KB. */ metadata?: { /** * Shopify SKU, only applicable to Shopify integrations. Cannot exceed 255 characters in length. */ sku?: string; [key: string]: any; }; } export interface eCommerceEventProperties { /** * Default USD. Currencies should be represented as an ISO 4217 currency code. Supported * currency symbols include: AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT, BGN, BHD, BIF, * BMD, BND, BOB, BRL, BSD, BTC, BTN, BWP, BYR, BZD, CAD, CDF, CHF, CLF, CLP, CNY, COP, CRC, CUC, CUP, CVE, * CZK, DJF, DKK, DOP, DZD, EEK, EGP, ERN, ETB, EUR, FJD, FKP, GBP, GEL, GGP, GHS, GIP, GMD, GNF, GTQ, GYD, * HKD, HNL, HRK, HTG, HUF, IDR, ILS, IMP, INR, IQD, IRR, ISK, JEP, JMD, JOD, JPY, KES, KGS, KHR, KMF, KPW, * KRW, KWD, KYD, KZT, LAK, LBP, LKR, LRD, LSL, LTL, LVL, LYD, MAD, MDL, MGA, MKD, MMK, MNT, MOP, MRO, MTL, * MUR, MVR, MWK, MXN, MYR, MZN, NAD, NGN, NIO, NOK, NPR, NZD, OMR, PAB, PEN, PGK, PHP, PKR, PLN, PYG, QAR, * RON, RSD, RUB, RWF, SAR, SBD, SCR, SDG, SEK, SGD, SHP, SLL, SOS, SRD, STD, SVC, SYP, SZL, THB, TJS, TMT, * TND, TOP, TRY, TTD, TWD, TZS, UAH, UGX, USD, UYU, UZS, VEF, VND, VUV, WST, XAF, XAG, XAU, XCD, XDR, XOF, * XPD, XPF, XPT, YER, ZAR, ZMK, ZMW, and ZWL. Any other provided currency symbol will result in a logged * warning and no other action taken by the SDK. */ currency: string; /** * The source the event is derived from. Cannot exceed 255 characters in length. */ source: string; } export interface CheckoutStartedEventProperties extends eCommerceEventProperties { /** * A unique identifier for the checkout. Cannot exceed 255 characters in length. */ checkout_id: string; /** * A unique identifier for the cart. If no value is passed, a default value is assumed * (shared across cart/checkout/order events) for user cart mapping. * Cannot exceed 255 characters in length. */ cart_id?: string; /** * The total monetary value of the cart (ex: 12.99). */ total_value: number; /** * The products associated with the checkout. */ products: eCommerceProductProperties[]; /** * Additional metadata about the checkout. Keys are limited to 255 characters in length, cannot begin with a $ character, * and can only contain alphanumeric characters and punctuation. Total size of metadata cannot exceed 50KB. */ metadata?: { checkout_url?: string; [key: string]: any; }; } export interface CartUpdatedEventProperties extends eCommerceEventProperties { /** * A unique identifier for the cart. If no value is passed, a default value is assumed * (shared across cart/checkout/order events) for user cart mapping. * Cannot exceed 255 characters in length. */ cart_id: string; /** * The total monetary value of the cart (ex: 12.99). */ total_value: number; /** * The products in the updated cart. */ products: eCommerceProductProperties[]; /** * Additional metadata about the cart update. Keys are limited to 255 characters in length, cannot begin with a $ character, * and can only contain alphanumeric characters and punctuation. Total size of metadata cannot exceed 50KB. */ metadata?: { [key: string]: any; }; } export interface ProductViewedEventProperties extends eCommerceEventProperties { /** * A unique identifier for the product that was viewed. Cannot exceed 255 characters in length. */ product_id: string; /** * The name of the product that was viewed. Cannot exceed 255 characters in length. */ product_name: string; /** * A unique identifier for the product variant that was viewed (ex: shirt_medium_blue). Cannot exceed 255 characters in length. */ variant_id: string; /** * The URL of the product image that was viewed. Cannot exceed 255 characters in length. */ image_url?: string; /** * The URL to the product page for more details. Cannot exceed 255 characters in length. */ product_url?: string; /** * The variant unit price of the product at the time of viewing. */ price: number; /** * Additional metadata about the product viewed. Keys are limited to 255 characters in length, cannot begin with a $ character, * and can only contain alphanumeric characters and punctuation. Total size of metadata cannot exceed 50KB. */ metadata?: { /** * Shopify SKU, only applicable to Shopify integrations. Cannot exceed 255 characters in length. */ sku?: string; /** * A list of types for the product that was viewed. The `back_in_stock` and `price_drop` types can be used to trigger * back-in-stock and price drop notifications. Each type cannot exceed 255 characters in length. */ type?: string[]; [key: string]: any; }; } export interface OrderPlacedEventProperties extends eCommerceEventProperties { /** * A unique identifier for the order that was placed. Cannot exceed 255 characters in length. */ order_id: string; /** * A unique identifier for the cart. If no value is passed, a default value is assumed * (shared across cart/checkout/order events) for user cart mapping. * Cannot exceed 255 characters in length. */ cart_id?: string; /** * The total monetary value of the order (ex: 12.99). */ total_value: number; /** * The total amount of discounts applied to the order (ex: 12.99). */ total_discounts?: number; /** * A detailed list of discounts applied to the order. */ discounts?: any[]; /** * The products in the order. */ products: eCommerceProductProperties[]; /** * Additional metadata about the product viewed. Keys are limited to 255 characters in length, cannot begin with a $ character, * and can only contain alphanumeric characters and punctuation. Total size of metadata cannot exceed 50KB. */ metadata?: { /** * The URL to view the status of the order. Cannot exceed 255 characters in length. */ order_status_url?: string; /** * A unique order number for the order placed, only applicable to Shopify integrations. Cannot exceed 255 characters in length. */ order_number?: string; /** * A list of tags associated with the order placed, only applicable to Shopify integrations. Each tag cannot exceed 255 characters in length. */ tags?: string[]; /** * The site the order originated from (ex: Meta), only applicable to Shopify integrations. Cannot exceed 255 characters in length. */ referring_site?: string; /** * A list of payment system sources (ex: POS, mobile, etc.), only applicable to Shopify integrations. * Each payment gateway name cannot exceed 255 characters in length. */ payment_gateway_names?: string[]; [key: string]: any; }; } export class FeatureFlag { /** Indicates whether or not this feature flag is enabled. */ enabled: boolean; /** The ID for this feature flag. */ id: string; /** * Properties of this object. * * Avoid accessing these properties directly. Instead, prefer using the `getStringProperty`, `getBooleanProperty`, `getNumberProperty`, * `getImageProperty` and `getJsonProperty` methods which ensure type safety and to avoid breaking changes in the future. */ properties: PropertiesJson; /** * Get value of a property of type string. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type string. * If the key is not found or if there is a type mismatch, this method will return a null. */ getStringProperty(key: string): string | null; /** * Get value of a property of type number. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type number. * If the key is not found or if there is a type mismatch, this method will return a null. */ getNumberProperty(key: string): number | null; /** * Get value of a property of type boolean. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type boolean. * If the key is not found or if there is a type mismatch, this method will return a null. */ getBooleanProperty(key: string): boolean | null; /** * Get value of a property of type image. * * @param key - The key of the property. * * @returns The string value of the image url if the key is found and is of type image. * If the key is not found or if there is a type mismatch, this method will return a null. */ getImageProperty(key: string): string | null; /** * Get value of a property of type JSON. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type JSON. * If the key is not found or if there is a type mismatch, this method will return a null. */ getJsonProperty(key: string): JsonPropertyValue | null; /** * Get value of a property of type datetime as a Unix timestamp (milliseconds). * * @param key - The key of the property. * * @returns The Unix timestamp (milliseconds) value of the property if the key is found and is of type datetime. * If the key is not found or if there is a type mismatch, this method will return a null. */ getTimestampProperty(key: string): number | null; } export class Banner { /** Analytics / tracking string. */ id: string; /** The placement ID this banner is matched to. */ placementId: string; /** HTML to display for the banner. */ html: string; /** Whether this banner is a control banner. */ isControl: boolean; /** * Properties of this object. * * Avoid accessing these properties directly. Instead, prefer using the `getStringProperty`, `getBooleanProperty`, `getNumberProperty`, * `getImageProperty` and `getJsonProperty` methods which ensure type safety and to avoid breaking changes in the future. */ properties: PropertiesJson; /** * Get value of a property of type string. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type string. * If the key is not found or if there is a type mismatch, this method will return a null. */ getStringProperty(key: string): string | null; /** * Get value of a property of type number. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type number. * If the key is not found or if there is a type mismatch, this method will return a null. */ getNumberProperty(key: string): number | null; /** * Get value of a property of type boolean. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type boolean. * If the key is not found or if there is a type mismatch, this method will return a null. */ getBooleanProperty(key: string): boolean | null; /** * Get value of a property of type image. * * @param key - The key of the property. * * @returns The string value of the image url if the key is found and is of type image. * If the key is not found or if there is a type mismatch, this method will return a null. */ getImageProperty(key: string): string | null; /** * Get value of a property of type JSON. * * @param key - The key of the property. * * @returns The value of the property if the key is found and is of type JSON. * If the key is not found or if there is a type mismatch, this method will return a null. */ getJsonProperty(key: string): JsonPropertyValue | null; /** * Get value of a property of type datetime as a Unix timestamp (milliseconds). * * @param key - The key of the property. * * @returns The Unix timestamp (milliseconds) value of the property if the key is found and is of type datetime. * If the key is not found or if there is a type mismatch, this method will return a null. */ getTimestampProperty(key: string): number | null; } /** * Automatically display in-app messages when they are triggered. This method should be called before * calling `openSession`. * * @returns The identifier of the subscription created. This can be passed to * `removeSubscription` to cancel the subscription. Returns undefined if the SDK has not been initialized. */ export function automaticallyShowInAppMessages(): string | undefined; /** * 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. * * @param parentNode - 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. */ export function hideContentCards(parentNode?: Element | null): void; /** * Display the user's content cards. * * @param parentNode - 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 `` * node. If the parent node already has a Braze content cards view as a direct descendant, the existing content * cards will be replaced. * @param filterFunction - 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. */ export function showContentCards( parentNode?: Element | null, filterFunction?: (cards: Card[]) => Card[], ): void; /** * Display a given in-app message. * * @param inAppMessage - The message to * @param parentNode - The HTML node to render the in-app message into. If null/undefined, the message * will be rendered appended within the `` node. * @param onDisplayCallback - Optional callback to invoke once the message is on the screen. * * @returns Whether or not the message was displayed (or, in the case of control messages, logged to * Braze servers). Returns undefined if the SDK has not been initialized. */ export function showInAppMessage( inAppMessage: InAppMessage | ControlMessage, parentNode?: Element | null, onDisplayCallback?: () => void, ): boolean | undefined; /** * Defers the display of given in-app message for a future pageload. * The deferred in-app message can be retrieved by calling `getDeferredInAppMessage`, * and displayed using `showInAppMessage`. * Deferring an in-app message will overwrite any previously deferred in-app message. * * Note: Be sure to subscribe to clicked / dismissed events on this in-app message only after retrieving it using `getDeferredInAppMessage`. * Any subscriptions made before calling `deferInAppMessage` will not be persisted. * Also note that the in-app message deferred here will be cleared out when in-app message triggers have been refreshed from the Braze backend. * * @param inAppMessage - The message to defer for later display. * * @returns Whether or not the message was successfully deferred. * Returns undefined if the SDK has not been initialized. */ export function deferInAppMessage( inAppMessage: InAppMessage, ): boolean | undefined; /** * Retrieves the in-app message that was most recently deferred for display with `deferInAppMessage`. * * Note: Retrieving the deferred in-app message here will clear it from storage. * * @returns The deferred in-app message if it exists, or returns null. * Returns undefined if the SDK has not been initialized. */ export function getDeferredInAppMessage(): InAppMessage | null | undefined; /** * 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. * * @param parentNode - 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 `` * node. If the parent node already has a Braze content cards view as a direct descendant, the existing content * cards will be replaced. * @param filterFunction - 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. */ export function toggleContentCards( parentNode?: Element | null, filterFunction?: (cards: Card[]) => Card[], ): void; /** * When a user first uses Braze on a device they are considered "anonymous". Use this method to identify a user * with a unique ID, which enables the following: * * - If the same user is identified on another device, their user profile, usage history and event history will * be shared across devices. * - If your app is used on the same browser by multiple people, you can assign each of them a unique identifier * to track them separately. Only the most recent user on a particular browser will receive push * notifications and in-app messages. * * When you request a user switch (which is any call to changeUser where the new user ID is not the same as the * existing user ID), the current session for the previous user (anonymous or not) is automatically ended and * a new session is started. Similarly, following a call to changeUser, any events which fire are guaranteed to * be for the new user -- if an in-flight server request completes for the old user after the user switch no * events will fire, so you do not need to worry about filtering out events from Braze for old users. * * Additionally, if you identify a user which has never been identified on another device, the entire history of * that user as an "anonymous" user on this device will be preserved and associated with the newly identified * user. However, if you identify a user which *has* been identified in another app, any history which was * already flushed to the server for the anonymous user on this device will be merged into the identified user. * Any fields that already exist on the identified user will not be overwritten, and the merge is limited * to the fields listed [here](https://www.braze.com/docs/api/endpoints/user_data/post_users_merge/). * * Note: Once you identify a user, you cannot revert to the "anonymous" user. The transition from anonymous to * identified tracking is only allowed once because the initial anonymous user receives special treatment to * allow for preservation of their history. As a result, we recommend against changing the user ID just because * your app has entered a "logged out" state because it makes you unable to target the previously logged out user * with re-engagement campaigns. If you anticipate multiple users on the same device, but only want to target one * of them when your app is in a logged out state, we recommend separately keeping track of the user ID you want * to target while logged out and switching back to that user ID as part of your app's logout process. * * @param userId - A unique identifier for this user. Limit 997 bytes. * These User IDs should be private and not easily guessable (e.g. not a plain email address or username). * @param signature - An encrypted signature to be used to authenticate the current user. You can update the signature * using the `setSdkAuthenticationSignature` method. This signature will only have an effect if the `enableSdkAuthentication` * initialization option is set to true. */ export function changeUser(userId: string, signature?: string): void; /** * Destroys this `braze` instance, destroying all subscription callbacks and releasing member variables which * retain memory. */ export function destroy(): void; /** * Get all currently available cards from the last content cards refresh. * * @returns - A `ContentCards` object which includes all currently available * `Card` objects from the last content cards refresh. Returns undefined if the * SDK has not been initialized. */ export function getCachedContentCards(): ContentCards | undefined; /** * Retrieves the 'device id,' a randomly generated ID that is stored on the browser. * This ID resets for private browsing sessions and when website data is cleared. For example: * * ``` * console.log('The device id is ' + braze.getDeviceId()); * ``` */ export function getDeviceId(): string | undefined; /** * Asynchronously retrieves the 'device id,' a randomly generated ID that is stored on the browser. * This ID resets for private browsing sessions and when website data is cleared. For example: * * ``` * braze.getDeviceId(function(deviceId) { * console.log('The device id is ' + deviceId); * }); * ``` * @deprecated - The getDeviceId callback is deprecated. Access the method's return value directly instead. * @param callback - Asynchronous callback - this will be invoked with the deviceId. */ export function getDeviceId(callback: (deviceId: string) => void): void; /** * @returns The user currently being tracked by Braze, used for querying the tracked user id and setting * user attributes. Should only be accessed via the `getUser` function. Returns undefined if the * SDK has not been initialized. */ export function getUser(): User | undefined; /** * Initializes this `braze` instance with your API key. This method must be called before other Braze methods are * invoked, and is part of the default loading snippets. Subsequent calls will be ignored until 'destroy` * is called. * * @param apiKey - Your app's Braze API Key. Your API keys can be found * [here](https://dashboard.braze.com/app_settings/app_settings). * @param options - Configuration options. See `InitializationOptions` for supported options. * * @returns - Whether or not the `braze` instance has been successfully initialized. * Reasons for returning false include a missing API key/base URL, user opt out, and ignored crawler bot activity. */ export function initialize( apiKey: string, options: InitializationOptions, ): boolean; /** * @returns Whether or not the user has blocked push. If the user has blocked push, they cannot be * prompted to register again, and must manually remove the block in order to receive push. * Returns undefined if the SDK has not been initialized. */ export function isPushBlocked(): boolean | undefined; /** * Tests whether the user has given this browser push permission (they may still be unsubscribed from push via * `User.setPushNotificationSubscriptionType`). A true value essentially means that * `requestPushPermission` may be called without the user being prompted. Useful for migrating existing * non-Braze push registrations to Braze. * * @returns Whether or not the user has granted push permission. If this returns true, * `requestPushPermission` may be called without the user being prompted. If this returns false, * `requestPushPermission` may prompt the user (if `isPushSupported` returns true) or do * nothing (if `isPushSupported` returns false). Returns undefined if the SDK has not been initialized. */ export function isPushPermissionGranted(): boolean | undefined; /** * The [W3C Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) is partially supported * across the browser landscape. This method allows you to programmatically determine whether push is supported * in the current browser, and whether to show push-related user class elements to the user. * * @returns Whether or not push is supported in this environment. Returns undefined if the SDK has not been initialized. */ export function isPushSupported(): boolean | undefined; /** * Logs that the user dismissed the given card. This is done automatically when you use Braze's display module * and should only be called if you're bypassing that and manually building the DOM for displaying the cards in * your own code. * * @param card - the `Card` object that received a dismissal * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logCardDismissal(card: Card): boolean; /** * Logs that the user saw the given Content Cards. * This is done automatically when you use Braze's display module and should only be called * if you're bypassing that and manually building the DOM for displaying content cards in * your own code. * * @param contentCards - array of `Card` objects that received impressions * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logContentCardImpressions(contentCards: Card[]): boolean; /** * Logs when user clicks on a Content Card. * This is done automatically when you use Braze's display module and should only be called * if you're bypassing that and manually building the DOM for displaying content cards in * your own code. * * @param contentCard - the `Card` object that received a click * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logContentCardClick(contentCard: Card): boolean; /** * Logs that the user saw the given Banners. * This is done automatically when you use Braze's display module and should only be called * if you're bypassing that and manually building the DOM for displaying banners in * your own code. * * @param placementIds - array of placement IDs (strings) that received impressions * * @returns Whether or not the event was successfully logged (to be flushed later). * Returns undefined if the SDK has not been initialized. */ export function logBannerImpressions( placementIds: Array, ): boolean | undefined; /** * Logs when the user clicks on a Banner. * This is done automatically when you use Braze's display module and should only be called * if you're bypassing that and manually building the DOM for displaying banners in * your own code. * * @param banner - the `Banner` object that received a click * @param buttonId - optional button ID if the click was on a specific button within the banner * * @returns Whether or not the event was successfully logged (to be flushed later). * Returns undefined if the SDK has not been initialized. */ export function logBannerClick( banner: Banner, buttonId?: string, ): boolean | undefined; /** * Reports that the current user performed a custom named event. * * @param eventName - The identifier for the event to track. Value is limited to 255 characters in length, * cannot begin with a $, and can only contain alphanumeric characters and punctuation. * @param eventProperties - Hash of properties for this event. Keys are limited to 255 characters in length, cannot begin * with a $, and can only contain alphanumeric characters and punctuation. Values can be numeric, boolean, Date objects, * strings 255 characters or shorter, or nested objects whose values can be numeric, boolean, Date objects, arrays, strings, * or null. Total size of event properties cannot exceed 50KB. * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logCustomEvent( eventName: string, eventProperties?: object, ): boolean; /** * Logs that the user clicked the given in-app message button. This is done automatically when the user clicks on * a button in a message generated by `showInAppMessage`, * and should only be called if you're bypassing that method and manually displaying the message in your own * code. * * @param button - The button clicked * @param inAppMessage - The message this button belongs to * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logInAppMessageButtonClick( button: InAppMessageButton, inAppMessage: InAppMessage, ): boolean; /** * Logs that the user clicked the given in-app message. This is done automatically when the user clicks on a * message generated by `showInAppMessage`, and should * only be called if you're bypassing that method and manually displaying the message in your own code. * * @param inAppMessage * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logInAppMessageClick(inAppMessage: InAppMessage): boolean; /** * Logs that the user clicked on a link in an html in-app message. This is done automatically when the user clicks * on a message generated by `showInAppMessage`, and should * only be called if you're bypassing that method and manually displaying the message in your own code. * * @param inAppMessage - The message that was clicked * @param buttonId - A button id to associate this click with for analytics * @param url - The url that was clicked * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logInAppMessageHtmlClick( inAppMessage: HtmlMessage, buttonId?: string, url?: string, ): boolean; /** * Logs that the user saw the given in-app message. This is performed automatically when you use `showInAppMessage`, * and should only be called if you're bypassing that method and manually displaying the message in your own code. * * @param inAppMessage * * @returns Whether or not the event was successfully logged (to be flushed later). */ export function logInAppMessageImpression( inAppMessage: InAppMessage | ControlMessage, ): boolean; /** * Reports that the current user made an in-app purchase. Useful for tracking and segmenting users. * * @param productId - A string identifier for the product purchased, e.g. an SKU. Value is limited to * 255 characters in length, cannot begin with a $, and can only contain alphanumeric characters and punctuation. * @param price - The price paid. Base units depend on the currency. As an example, USD should be * reported as Dollars.Cents, whereas JPY should be reported as a whole number of Yen. All provided * values will be rounded to two digits with toFixed(2) * @param currencyCode - Default USD. Currencies should be represented as an ISO 4217 currency code. Supported * currency symbols include: AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT, BGN, BHD, BIF, * BMD, BND, BOB, BRL, BSD, BTC, BTN, BWP, BYR, BZD, CAD, CDF, CHF, CLF, CLP, CNY, COP, CRC, CUC, CUP, CVE, * CZK, DJF, DKK, DOP, DZD, EEK, EGP, ERN, ETB, EUR, FJD, FKP, GBP, GEL, GGP, GHS, GIP, GMD, GNF, GTQ, GYD, * HKD, HNL, HRK, HTG, HUF, IDR, ILS, IMP, INR, IQD, IRR, ISK, JEP, JMD, JOD, JPY, KES, KGS, KHR, KMF, KPW, * KRW, KWD, KYD, KZT, LAK, LBP, LKR, LRD, LSL, LTL, LVL, LYD, MAD, MDL, MGA, MKD, MMK, MNT, MOP, MRO, MTL, * MUR, MVR, MWK, MXN, MYR, MZN, NAD, NGN, NIO, NOK, NPR, NZD, OMR, PAB, PEN, PGK, PHP, PKR, PLN, PYG, QAR, * RON, RSD, RUB, RWF, SAR, SBD, SCR, SDG, SEK, SGD, SHP, SLL, SOS, SRD, STD, SVC, SYP, SZL, THB, TJS, TMT, * TND, TOP, TRY, TTD, TWD, TZS, UAH, UGX, USD, UYU, UZS, VEF, VND, VUV, WST, XAF, XAG, XAU, XCD, XDR, XOF, * XPD, XPF, XPT, YER, ZAR, ZMK, ZMW, and ZWL. Any other provided currency symbol will result in a logged * warning and no other action taken by the SDK. * @param quantity - Default 1. The quantity of items purchased expressed as a whole number. Must be at least 1 * and at most 100. * @param purchaseProperties - Hash of properties for this purchase. Keys are limited to 255 * characters in length, cannot begin with a $, and can only contain alphanumeric characters and punctuation. * Values can be numeric, boolean, Date objects, strings 255 characters or shorter, or nested objects whose values * can be numeric, boolean, Date objects, arrays, strings, or null. Total size of purchase properties cannot exceed 50KB. * * @returns Whether or not the purchase was successfully attached to the session (to be flushed later). */ export function logPurchase( productId: string, price: number, currencyCode?: string, quantity?: number, purchaseProperties?: object, ): boolean; /** * Opens a new session, or resumes the previous session if this browser had activity within the `sessionTimeoutInSeconds` value. * When a new session is opened, this refreshes In-App Messages. Content Cards are refreshed automatically if * the `subscribeToContentCardsUpdates` has been registered prior to `openSession`. If the user has previously * granted the site permission to send push, automatically sends the push registration to the Braze backend. * * Be sure to call `openSession` at the end of your initialization code section, after any calls to `changeUser` or subscribing to Content Cards, * In-App Message, and Feature Flag updates. Calling `openSession` before `changeUser` may result in a second session start event. */ export function openSession(): void; /** * Register this browser environment to receive web push for this user. Supports browsers which implement the * [W3C Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) (browsers in which * `isPushSupported` returns true). If push is supported and the user is not already subscribed, * this method will cause the browser to immediately request push permission from the user. * * In order to properly use this feature, there are some integration steps required on your end: * * - Your site must be https * - Create a `service-worker.js` file with the content below and place it in the root directory of your website: * * ``` * self.importScripts('https://js.appboycdn.com/web-sdk/6.7/service-worker.js'); * ``` * * For more details, see [Our Product Documentation](https://www.braze.com/docs/developer_guide/platform_integration_guides/web/push_notifications/integration). * * @param successCallback - When the user subscribes to push successfully this callback will be * invoked with the user's endpoint, public key, and user auth key (endpoint, publicKey, userAuth). * @param deniedCallback - If push permission is denied or an error is encountered while registering, this callback will * be invoked. If the denial is temporary, it will be invoked with a parameter of `true` - otherwise it will be invoked * with a parameter of `false`. */ export function requestPushPermission( successCallback?: ( endpoint: string, publicKey: string, userAuth: string, ) => void, deniedCallback?: (temporaryDenial: boolean) => void, ): void; /** * Remove all event subscriptions. */ export function removeAllSubscriptions(): void; /** * Remove an event subscription that you previously subscribed to. * * @param subscriptionGuid - The identifier of the subscription you wish to remove, returned by the method * you initially used to create it. */ export function removeSubscription(subscriptionGuid: string): void; /** * Requests an immediate refresh of content cards from Braze servers. By default, content cards are refreshed when * a new session opens (see 'openSession` for more details), and when the user refreshes content cards manually via * the refresh button. If you want to refresh content cards from the server at another time you must call this function. * * @param successCallback - Callback that is invoked when the content cards refresh request has been successfully completed. * You should use `subscribeToContentCardsUpdates` to be notified of new cards. This callback is useful for determining when * a request has completed regardless of whether new cards were returned. * @param errorCallback - Callback that is invoked when an error occurs during the refresh. */ export function requestContentCardsRefresh( successCallback?: () => void, errorCallback?: () => void, ): void; /** * Requests an immediate refresh of feature flags from Braze servers. By default, feature flags are refreshed when * a new session starts. If you want to refresh feature flags from the server at another time you must call this function. * * @param successCallback - Callback that is invoked when the feature flags refresh request has been successfully completed. * This callback is useful for determining when a request has completed regardless of whether new feature flags were returned. * @param errorCallback - Callback that is invoked when an error occurs during the refresh. */ export function refreshFeatureFlags( successCallback?: () => void, errorCallback?: () => void, ): void; /** * By default, data logged to Braze through the SDK is queued locally (in HTML 5 localStorage when available, and * in memory otherwise) and sent to Braze's servers asynchronously on a regular interval (10 seconds when localStorage is available * and not routinely cleared due to browser privacy features, otherwise 3 seconds). This is done to optimize network usage and * provide resiliency against network or server outages. This method bypasses the interval and immediately flushes queued data. * * @param callback - Invoked when the flush completes with a boolean parameter that returns * whether or not the flush was successful. If the flush is unsuccessful, pending data will be * flushed during the next successful flush. */ export function requestImmediateDataFlush( callback?: (success: boolean) => void, ): void; /** * Removes the cookie set by `disableSDK`, causing subsequent calls to the Braze Web SDK to function. You must * call `initialize` after calling this method before calling subsequent methods. */ export function enableSDK(): void; /** * Getter method to determine if the SDK is disabled based on whether the cookie set by `disableSdk` exists */ export function isDisabled(): boolean; /** * By default, Braze logs to the browser console. Call this method to set a custom log action and enable debug-level log statements. * * @param loggerFunction - A function to invoke with log messages. Should accept a single string * parameter for message. */ export function setLogger(loggerFunction: (message: string) => void): void; /** * Sets the signature to be used to authenticate the current user. You can also set the signature when calling `changeUser`. * This signature will only have an effect if the `enableSdkAuthentication` initialization option is set to true. * * @param signature - The signature to add to network requests to authenticate the current user. * * @returns Whether or not the signature is valid. */ export function setSdkAuthenticationSignature(signature: string): boolean; /** * Adds SDK Metadata. This method is automatically called based on the integration method. * * @param sdkMetadata - An array of metadata values from `BrazeSdkMetadata`. * * @returns Whether or not the array of metadata is valid. Returns undefined if * the SDK has not been initialized. */ export function addSdkMetadata(sdkMetadata: string[]): boolean | undefined; /** * Sets a cookie that causes all subsequent calls to the Braze Web SDK to be ignored * and all subsequent analytics to cease being sent to the Braze backend. * If you have multiple subdomains, this method MUST be called from the same subdomain that push was registered from to work properly. * This is useful for customer opt-outs. If the customer clears website data, tracking will resume. */ export function disableSDK(): void; /** * Subscribe to content cards updates. The subscriber callback will be called whenever content cards are updated. This method * should be called before calling `openSession`. * * @param subscriber - The callback function to handle new cards. This function will be called with a `ContentCards` * object which includes all currently available `Card` objects. If you want to be notified when a refresh has completed * regardless of whether new cards are available, you should use the `successCallback` of `requestContentCardsRefresh`. * * @returns The identifier of the subscription created. This can be passed to `removeSubscription` to cancel the subscription. * Returns undefined if the SDK has not been initialized. */ export function subscribeToContentCardsUpdates( subscriber: (cards: ContentCards) => void, ): string | undefined; /** * Subscribe to receive in-app messages. The subscriber callback will be called whenever a new in-app message is * triggered. This method should be called before calling `openSession`. If you are using the build of Braze's * library with UI, the most basic usage of this would be * * ``` * braze.subscribeToInAppMessage(function(inAppMessage) { * braze.showInAppMessage(inAppMessage); * }); * ``` * @param callback - The callback function to handle the in-app message. This function will be * called with an `InAppMessage` or a `ControlMessage` object. If you are using the build * of Braze's library with UI, you may wish to call `showInAppMessage` * with the provided message. * * @returns The identifier of the subscription created. This can be passed to 'removeSubscription` to cancel * the subscription. Returns undefined if the SDK has not been initialized. */ export function subscribeToInAppMessage( callback: (inAppMessage: InAppMessage | ControlMessage) => void, ): string | undefined; /** * Subscribe to be notified of network request failures that occured due to an SDK Authentication error. This * method can be used to determine when to call `setSdkAuthenticationSignature` to provide the SDK with a new signature. * If you do not have SDK Authentication enabled on the Braze dashboard, this subscription will never be invoked. * * @param subscriber - The subscriber function that is invoked whenever an SDK Authentication error occurs. It is * invoked with an object containing the `errorCode`, `reason` for the error, the `userId` of the request (if the * user is not anonymous), and the authentication `signature` that caused the error. * * @returns The identifier of the subscription created. This can be passed to 'removeSubscription` to cancel * the subscription. Returns undefined if the SDK has not been initialized. */ export function subscribeToSdkAuthenticationFailures( subscriber: (error: { errorCode: number; reason?: string; userId?: string; signature?: string; }) => void, ): string | undefined; /** * By default, Braze silences its logging to prevent spamming production js consoles. Call this method to * toggle logging. */ export function toggleLogging(): void; /** * Unregisters push notifications on this browser. * Note that for Safari, Apple does not offer any unsubscribe mechanism, so on Safari this method leaves the user * with push permission granted and simply sets their subscription status to unsubscribed. * * @param successCallback - When the unsubscribe is successfully recorded and processed by Braze, this * callback will be invoked. * @param errorCallback - If the unsubscribe fails for unknown reasons, this callback will be invoked. */ export function unregisterPush( successCallback?: () => void, errorCallback?: () => void, ): void; /** * Removes all locally stored SDK data, causing the user to be seen in subsequent calls as a new anonymous user on a new device. */ export function wipeData(): void; /** * Handle links from within a message. This method will redirect valid links, or will parse and handle valid Braze Click Actions (brazeActions://). * @param url - a valid URL, or a valid brazeActions URL with scheme brazeActions://v{versionInt}/{base64string} * @param openLinkInNewTab - Whether the URL should be opened in a new tab. Defaults to false. */ export function handleBrazeAction( url: string, openLinkInNewTab?: boolean, ): void; /** * Gets a feature flag by its ID. * * @param id - The ID of the feature flag. * @returns - An object of type `FeatureFlag`, if feature flag with given ID is enabled or explicitly disabled via experiment or canvas. * The method returns `null` if feature flag is not rolled out to the user or does not exist, or returns `undefined` if the SDK has not been initialized. */ export function getFeatureFlag(id: string): FeatureFlag | null | undefined; /** * Subscribe to feature flag updates. The subscriber callback will be called whenever feature flags are updated. This method * should be called before calling `openSession`. * * @param subscriber - The callback function to handle new feature flags. This function is always called first with the * available cached list of `FeatureFlag` objects, and will also be called when feature flag updates are available. * If there is a failure in receiving updates, this function will be called with the cached list of `FeatureFlag` objects. * If you want to be notified when a refresh has completed regardless of whether new feature flags are available, * you should use the `successCallback` of `refreshFeatureFlags`. * * @returns The identifier of the subscription created. This can be passed to `removeSubscription` to cancel the subscription. * Returns undefined if the SDK has not been initialized. */ export function subscribeToFeatureFlagsUpdates( subscriber: (featureFlags: FeatureFlag[]) => void, ): string | undefined; /** * Gets all available feature flags. * * @returns - A list of `FeatureFlag` objects. Returns undefined if the SDK has not been initialized. */ export function getAllFeatureFlags(): FeatureFlag[] | undefined; /** * Logs impression for a given feature flag. This is limited to one impression per session per feature flag ID. * * @param featureFlagId - ID of the feature flag that has received the impression. * * @returns - Whether or not the impression was successfully logged. Returns undefined if the SDK has not been initialized. */ export function logFeatureFlagImpression( featureFlagId: string, ): boolean | undefined; /** * Requests banners by a list of placement IDs from the Braze backend. * * @param placementIds - A list of placement IDs for banners. * @param successCallback - Callback that is invoked when the banners refresh request has been successfully completed. * This callback is useful for determining when a request has completed regardless of whether new banners were returned. * @param errorCallback - Callback that is invoked when an error occurs during the refresh. */ export function requestBannersRefresh( placementIds: string[], successCallback?: () => void, errorCallback?: () => void, ): void; /** * Gets a Banner by its placement ID. * * @param placementId - The placement ID of the banner. * @returns - An object of type `Banner`, if a banner with the given placement ID exists. The method returns null if * the banner does not exist, or if banners are disabled. Returns undefined if the SDK has not been initialized. */ export function getBanner(placementId: string): Banner | null | undefined; /** * Renders a Banner into the provided parent node by replacing all children of the parent node. The Banner will be styled * to use the entire width and height of the parent node. If the `allowUserSuppliedJavascript` initialization option is * not set to `true`, this method will no-op. Once the Banner is inserted into the DOM, it will automatically log impressions * and listen for updates from the Braze backend. * * @param banner - The `Banner` to insert onto the page. * @param parentNode - The HTML element to render the banner into. */ export function insertBanner( banner: Banner | null | undefined, parentNode: HTMLElement, ): void; /** * Gets all available banners. * * @returns - A map of placement IDs to `Banner` objects. * If the banner has expired, the placement ID will map to a null value instead. * Returns undefined if the SDK has not been initialized. */ export function getAllBanners(): Record | undefined; /** * Subscribe to banners updates. The subscriber callback will be called whenever banners are updated. This method * should be called before calling `openSession`. * * @param subscriber - The callback function to handle new banners. This function is always called first with the * available cached map of placement IDs to `Banner` objects, and will also be called when banner updates are available. * If you want to be notified when a refresh has completed regardless of whether new banners are available, * you should use the `successCallback` of `requestBannersRefresh`. * * @returns The identifier of the subscription created. This can be passed to `removeSubscription` to cancel the subscription. * Returns undefined if the SDK has not been initialized. */ export function subscribeToBannersUpdates( subscriber: (banners: Record) => void, ): string | undefined; /** * Getter method to determine if the Braze SDK has been initialized. */ export function isInitialized(): boolean; /** * Supported initialization options * */ export type InitializationOptions = { /** * By default, the Braze Web SDK ignores activity from known spiders or web crawlers, such as Google, based * on the user agent string. This saves data points, makes analytics more accurate, and may improve page rank. * However, if you want Braze to log activity from these crawlers instead, you may set this option to true. */ allowCrawlerActivity?: boolean; /** * By default, the Braze Web SDK does not allow user-supplied Javascript click actions, or enable HTML in-app messages * and Banners, as they allow Braze dashboard users to run Javascript on your site. To indicate that you trust the * Braze dashboard users to write non-malicious Javascript click actions, set this property to true. */ allowUserSuppliedJavascript?: boolean; /** * If you provide a value for this option, user events sent to Braze will be associated with the given version, which can be * used for user segmentation. */ appVersion?: string; /** * A numerical app version value which can be used for user segmentation. This value must be sent with four fields, such as * "1.2.3.4", otherwise it will be ignored. * * Note: `appVersion` must also be set, either with the same value or a unique name for this version. */ appVersionNumber?: string; /** * This option is required to configure the Braze Web SDK to use the appropriate endpoint for your integration - for example: * ``` * braze.initialize('YOUR-API-KEY-HERE', { baseUrl: 'sdk.iad-03.braze.com' }) * ``` */ baseUrl: string; /** * If you provide a value for this option, the Braze SDK will add the nonce to any `