> For the complete documentation index, see [llms.txt](https://docs.chord.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chord.co/activate/event-streaming/destinations/email-and-marketing/braze/braze-browser.md). # Braze browser This destination loads the Braze Web SDK in the shopper's browser and sends events from there. See [Braze](/activate/event-streaming/destinations/email-and-marketing/braze.md) for how this version and the [Braze server](/activate/event-streaming/destinations/email-and-marketing/braze/braze-server.md) version fit together. ## Getting started You need your Braze web SDK key. It is distinct from your Braze Classic API key. Find it under **Settings > App Settings > Web > API key** in the Braze dashboard. You also need your Braze SDK endpoint. See [Braze's SDK endpoints](https://www.braze.com/docs/user_guide/administer/personal/sdk_endpoints?redirected=1). ![The tile for the browser version of Braze in the Chord destination catalog](https://2938842758-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5Oy2IAsu7IvAGAlWgC36%2Fuploads%2Fgit-blob-7530daaa6a8fa56e82c8723a72fd01ddbc60735f%2Fbraze-browser-destination-catalog.png?alt=media) ## Settings * **Destination Name** (required): a name to tell this destination apart. * **Braze SDK Version** (required): the version of the Braze SDK to use. Choose from v4.1 to v6.8. Defaults to v4.8. * **API Key** (required): your Braze web SDK key, found under **Settings > App Settings > Web > API key**. It is distinct from your Braze Classic API key. * **Endpoint** (required): your Braze SDK endpoint. Choose from US-01 to US-09 and EU-01 to EU-02. Defaults to `US-01 : dashboard-01.braze.com`. * **Debug Mode** (optional): if on, the SDK logs additional information to the browser console. Off by default. * **Enable Order Completed Calls** (optional): if on, `track` events named `Order Completed` trigger a Braze purchase. On by default. * **Enable Identify Calls** (optional): if on, `identify` and `group` events update the Braze user profile. On by default. * **Enable Track Calls** (optional): if on, `track` events other than `Order Completed` are sent as Braze custom events. On by default. * **Allow User Supplied JavaScript** (optional): trust Braze dashboard users to write JavaScript for click actions. Off by default. * **Automatically Send In App Messages** (optional): if on, in-app messages are displayed automatically when received. On by default. * **Eager SDK Initialization** (optional): if on, Chord initializes the Braze SDK as soon as the first analytics event is sent, before event processing. Turn it on if you need direct access to `window.braze` for features like banners or in-app messages. Off by default. * **SDK Authentication** (optional): if on, Chord initializes the Braze SDK with SDK Authentication turned on and passes Braze a server-signed JWT. Your app must sign the JWT with your Braze private key and supply it on identify through `context.braze.sdkAuthSignature`. Optionally, register `window.__chordBrazeTokenRefresh` to refresh expired tokens automatically. Off by default. * **Send Page Events** (optional): if on, `page` and `screen` events are sent to Braze as custom events. On by default. * **Page Event Name** (optional): a custom event name for page views, for example `Page Viewed`. If not set, page events use `page` and screen events use `screen`. * **Consent Requirements** (optional): the consent categories a visitor must accept before Chord sends data to this destination. See [Consent](/activate/event-streaming/consent.md). {% hint style="warning" %} **Eager SDK Initialization** loads Braze before any consent check. Braze loads even for visitors who declined everything. Leave it off if consent must gate Braze. {% endhint %} ![The form for creating the browser version of Braze](https://2938842758-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5Oy2IAsu7IvAGAlWgC36%2Fuploads%2Fgit-blob-5939786755ddd0e638f3ba25e6b96ae7cf66b767%2Fbraze-browser-destination-form.png?alt=media) ## Connect Add **Braze (Device Mode)** from the destination catalog, using the settings above. See [Connect a destination](/activate/event-streaming/connect-a-destination.md) for the full steps. ## Event mapping Chord sends every `track` event to Braze. Each switch in Settings turns one group of events on or off. | Chord event | Braze event | Notes | | ------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------- | | [`Order Completed`](/collect-data/tracking-plan/order-completed.md) | `logPurchase` | One call for each item in `properties.products`. Needs **Enable Order Completed Calls** | | All other `track` events | `logCustomEvent` | The event name and `properties`, as sent. Needs **Enable Track Calls** | | `identify`, `group` | User profile update | Sets the Braze user and updates their attributes. Needs **Enable Identify Calls** | | `page`, `screen` | `logCustomEvent` | Needs **Send Page Events** | ## Purchases Each item in `properties.products` becomes one Braze purchase. | Chord source (priority order) | Braze field | Notes | | ------------------------------------ | ------------------- | -------------------------------------------------------- | | `id` > `sku` > `variant` on the item | Product ID | Read from the item, not from `product_id` | | `price` on the item | Price | | | `currency` on the item | Currency | Defaults to `USD` | | `quantity` on the item | Quantity | Defaults to `1` | | The order's `properties` | Purchase properties | Without `product_id`, `currency`, `price` and `quantity` | ## Page events Page and screen events are sent as a custom event. The event name is the **Page Event Name** setting. If it is empty, the name is `page` or `screen`. Chord removes a leading `$` and replaces anything other than letters, numbers, spaces and hyphens with a space. | Chord source (priority order) | Braze field | Notes | | ----------------------------- | ------------------------------------ | ----- | | `properties` | Event properties | | | `name` | `page_name` or `screen_name` | | | `category` | `page_category` or `screen_category` | | ## User profile An `identify` or `group` event with a `userId` switches Braze to that user. Chord then sets the fields below. A field is only set when Chord finds a value. | Chord source (priority order) | Braze field | Notes | | ------------------------------------------------------------------------------------------------------------ | --------------------------- | ----- | | `properties.email` > `context.traits.email` > `traits.email` | Email | | | `properties.first_name` > `context.traits.firstName` > `traits.firstName` | First name | | | `properties.last_name` > `context.traits.lastName` > `traits.lastName` | Last name | | | `properties.phone` > `context.traits.phone` > `traits.phone` | Phone number | | | `traits.gender`. Values such as `male`, `female` and `other` become Braze's `M`, `F` and `O` | Gender | | | `traits.birthday` | Date of birth | | | `traits.address.city` | Home city | | | `traits.country` > the visitor's country from their location | Country | | | The visitor's latitude and longitude from their location | Last known location | | | `traits.language` > `context.language` > `context.locale` | Language | | | `properties.pushSubscribe` > `context.traits.pushSubscribe`, and the same for `emailSubscribe` | Push and email subscription | | | `properties.subscription_groups` > `traits.braze_subscription_groups` > `context.traits.subscription_groups` | Subscription groups | | | Every other trait in `traits` | Custom attributes | | With **SDK Authentication** on, Chord reads the signed token from `context.braze.sdkAuthSignature`. It never writes the token to the Braze profile. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.chord.co/activate/event-streaming/destinations/email-and-marketing/braze/braze-browser.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.