@braze/web-sdk/index.d.ts

Braze SDK for web sites and other JS platforms.

/*
* Type definitions for @braze/web-sdk v6.0.0
* Project: https://github.com/braze-inc/braze-web-sdk
* (c) Braze, Inc. 2025 - 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<string, string>;

  /** 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<string, string>,
    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<string, string>,
    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<string, string>,
    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<string, string>,
    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<string, string>;

  /** 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<string, 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;

  /**
   * 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<string, string>;

  /** 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<string, string>,
    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<string, string>,
    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<string, string>;

  /** 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<string, string>,
    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<string, string>,
    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<string, string>;

  /** 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<string, string>,
    triggerId?: string,
    dismissType?: DismissType,
    duration?: number,
    animateIn?: boolean,
    animateOut?: boolean,
    frameColor?: number,
    htmlId?: string,
    css?: string,
    messageFields?: Record<string, any>,
    messageExtras?: Record<string, string>,
  );

  /** 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<string, any>;

  /** Object of string/string key/value pairs. */
  messageExtras?: Record<string, string>;
}

/**
 *  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<string, string>,
    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<string, string>,
    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<string, string>;

  /** 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(subscriptionGr