> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Web SDK
## Install SDK
Install the Airbridge Web SDK using one of the methods below.
Add the code below to the bottom of the `` section.
```html lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
Run the commands below to install `airbridge-web-sdk-loader`.
```bash npm lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
npm install airbridge-web-sdk-loader
```
```bash yarn lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
yarn add airbridge-web-sdk-loader
```
```bash pnpm lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
pnpm i airbridge-web-sdk-loader
```
If you install the `airbridge-web-sdk-loader` package, you can refer to the code below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
import airbridge from 'airbridge-web-sdk-loader'
airbridge.init({
app: '',
webToken: '',
})
```
The `app` and `webToken` can be found in the Airbridge dashboard under **Settings → Tokens**.
### Supported browser
The Airbridge Web SDK works on all browsers that support ES5.
| Browser | Supported |
| ----------------- | --------- |
| Chrome | ✔️ |
| Firefox | ✔️ |
| Safari | ✔️ |
| Internet Explorer | IE 9 + |
### SDK initialization
Initialize the Airbridge Web SDK using the `airbridge.init()` function. The `app` and `webToken` values required for initialization can be found in the Airbridge dashboard under **Settings → Tokens**. Additional initialization options can be configured as needed.
The following is the type definition for the initialization settings.
```typescript JavaScript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
interface InitializeOptions {
app: string
webToken: string
autoStartTrackingEnabled?: boolean
utmParsing?: boolean
utmParameterValueReplaceMap?: Record>
urlQueryMapping?: Record
userHash?: boolean
cookieWindow?: number
cookieWindowInMinutes?: number
useProtectedAttributionWindow?: boolean
protectedAttributionWindowInMinutes?: number
shareCookieSubdomain?: boolean
collectMolocoCookieID?: boolean
}
```
### Web SDK Options
| **Option** | **Required or Optional** | **Type** | **Default value** | **Description** |
| ------------------------------------- | ------------------------ | --------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `app` | Required | `string` | `-` | The app name that is required for the Web SDK initialization. |
| `webToken` | Required | `string` | `-` | The Web SDK token that is required for the Web SDK initialization. |
| `autoStartTrackingEnabled` | Optional | `boolean` | `true` | If explicit opt-in is required, set this value to `false` and call `startTracking` manually. For more details, refer to **Opt-in setup**. |
| `utmParsing` | Optional | `boolean` | `false` | Automatically maps UTM values from the URL parameters to the corresponding Airbridge campaign parameter values. For more details, refer to **Set up campaign parameters**. |
| `utmParameterValueReplaceMap` | Optional | `object` | `-` | By configuring `utmParameterValueReplaceMap`, you can replace the values of UTM parameters collected through `utmParsing` with custom values. For more details, refer to **Set up campaign parameters**. |
| `urlQueryMapping` | Optional | `object` | `-` | When `urlQueryMapping` is used, `utmParsing` is ignored. For more details, refer to **Set up campaign parameters**. |
| `user` | Optional | `object` | `-` | You can pass user information during initialization. For more details, refer to **Pass user data during initialization**. |
| `userHash` | Optional | `boolean` | `true` | You can send user email addresses and phone numbers in hashed form. For more details, refer to **Set up user properties**. |
| `cookieWindow` | Optional | `number` | `3` | For more information, refer to **Edit the attribution window**. |
| `cookieWindowInMinutes` | Optional | `number` | `-` | For more information, refer to **Edit the attribution window**. |
| `useProtectedAttributionWindow` | Optional | `boolean` | `true` | For more information, refer to **Set the attribution window for web-to-app attribution**. |
| `protectedAttributionWindowInMinutes` | Optional | `number` | `30` | For more information, refer to **Set the attribution window for web-to-app attribution**. |
| `shareCookieSubdomain` | Optional | `boolean` | `true` | For more information, refer to **Share attribution data across subdomains**. |
| `collectMolocoCookieID` | Optional | `boolean` | `false` | This is an option for configuring the Moloco cookie ID. For more details, refer to **Collect Moloco cookie ID**. |
### Verify Installation
Navigate to the page where the Airbridge Web SDK is installed, open the developer tools, and run the following code.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
console.log(airbridge.isSDKEnabled)
```
If `true` is printed after running the code above, the SDK has been installed and initialized successfully.
**Attention**
`airbridge.isSDKEnabled` is initially `false`. It changes to `true` once the Web SDK is fully loaded and initialized successfully.
Depending on the network environment, loading may be delayed, and if checked before loading is complete, `false` may be returned.
If you suspect that `false` is being printed due to network delay, run the code below in the developer tools to check the value after 5 seconds.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
setTimeout(function () {
console.log(airbridge.isSDKEnabled)
}, 5000)
```
### Opt-in setup
**Note**
Optional setting. Configure only if necessary.
The opt-in policy requires user consent before using user data.
After setting the `autoStartTrackingEnabled` to `false`, call the `startTracking` function at the point where you can collect events. When the `startTracking` function is called, the SDK will start collecting events.
The default setting is `true`.
1. Prevent automatic event tracking after initialization through the `autoStartTrackingEnabled`.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: false,
})
```
2. Collect user responses to the collection and use of personal information. If the user agrees to the collection and use of personal information, start tracking events.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.startTracking()
```
### Opt-out setup
**Note**
Optional setting. Configure only if necessary.
The opt-out policy allows the use of user information until the user explicitly declines.
After setting the `autoStartTrackingEnabled` option to `true`, call the `stopTracking` function at the point where you can no longer collect events. When the `stopTracking` function is called, the SDK will stop collecting events.
1. Enable automatic event tracking after initialization through the `autoStartTrackingEnabled`. Since the default value of the `autoStartTrackingEnabled` option is true, events are tracked automatically event if this setting is omitted.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.init({
app: 'YOUR_APP_NAME',
webToken: 'YOUR_WEB_TOKEN',
// ...
autoStartTrackingEnabled: true,
})
```
2. Collect user responses to the collection and use of personal information. If the user refuses the collection and use of personal information, stop tracking events.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.stopTracking()
```
## Web Event
The Airbridge Web SDK collects user actions from the app as per settings and sends them as in-app events.
* [Understanding Events in Airbridge ](/en/guides/airbridge-event)
### Send web events
Use the `airbridge.events.send` function to send events.
Refer to the example below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('category', {
label: 'Tool',
action: 'Hammer',
value: 10,
semanticAttributes: {
currency: 'USD',
transactionID: 'transaction_123',
products: [
{
productID: 'coke_zero',
name: 'PlasticHammer',
},
],
},
customAttributes: {
promotion: 'FirstPurchasePromotion',
},
})
```
| **Option** | **Required or Optional** | **Type** | **Description** |
| -------------------- | ------------------------ | -------- | -------------------------------- |
| `category` | Required | `string` | Name of the event |
| `action` | Optional | `string` | Subcategory of the event |
| `label` | Optional | `string` | Subcategory of the event |
| `value` | Optional | `number` | Subcategory of the event |
| `semanticAttributes` | Optional | `object` | Semantic attributed of the event |
| `customAttributes` | Optional | `object` | Custom attribute of the event |
Refer to the component definition and available strings below.
Airbridge provides Standard Events. Refer to the list of [Standard Events](/en/guides/airbridge-event-types#list-of-standard-events) and send events accordingly.
You can send a custom event by entering the event name set in the [event taxonomy](/en/guides/airbridge-event-taxonomy).
Additional information about the event can be collected using attributes.
* `action`, `label`: Collect information that can be used as GroupBys in the Airbridge reports.
* `value`: Collect information that can be used for sales analysis. Airbridge can perform calculations using the collected data.
* Semantic Attribute: Collect predefined attributes by Airbridge.
* Custom Attribute: Collect attributes defined by Airbridge users.
The semantic attributes predefined by Airbridge can be found in the user guide below.
* [List of semantic attributes](/en/guides/airbridge-event-elements#%EC%8B%9C%EB%A7%A8%ED%8B%B1-%EC%96%B4%ED%8A%B8%EB%A6%AC%EB%B7%B0%ED%8A%B8-%EB%AA%A9%EB%A1%9D)
### Additional web event settings
**Note**
Optional setting. Configure only if necessary.
Configure additional settings for sending web events if necessary.
You can send additional user information when sending the events through the SDK.
| **Function** | **Description** |
| ----------------------------- | ---------------------------------- |
| `airbridge.setDeviceAlias` | Adds device identifier |
| `airbridge.removeDeviceAlias` | Delete specified device identifier |
| `airbridge.clearDeviceAlias` | Delete all device identifiers |
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.setDeviceAlias('', '')
airbridge.removeDeviceAlias('')
airbridge.clearDeviceAlias()
```
### Example codes
Airbridge collects in-app events that are classified as Standard Events and Custom Events. Standard Events. are events predefined by Airbridge.
Refer to the example codes below.
**Sign-up**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
// Make sure to set user information before sending the event
airbridge.setUserID('string')
airbridge.setUserPhone('string')
airbridge.setUserEmail('string')
airbridge.setUserAttribute('string', 'string')
airbridge.setUserAlias('string', 'string')
// Send event
airbridge.events.send('airbridge.user.signup')
```
**Sign-in**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
// Make sure to set user information before sending the event
airbridge.setUserID('string')
airbridge.setUserPhone('string')
airbridge.setUserEmail('string')
airbridge.setUserAttribute('string', 'string')
airbridge.setUserAlias('string', 'string')
// Send event
airbridge.events.send('airbridge.user.signin')
```
**Sign-out**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
// Send event before clearing user information
airbridge.events.send('airbridge.user.signout')
// Initialize user information
airbridge.clearUser()
```
**Home Screen**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.ecommerce.home.viewed')
```
**Product Catalog**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.ecommerce.product.viewed', {
semanticAttributes: {
listID: '84e6e236-38c4-48db-9b49-16e4cc064386',
currency: 'USD',
products: [
{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
},
{
productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
name: 'PlasticFork',
price: 1,
quantity: 1,
currency: 'USD',
},
],
},
})
```
**Search Results**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.ecommerce.searchResults.viewed', {
semanticAttributes: {
query: 'Plastic',
currency: 'USD',
products: [
{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
},
{
productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
name: 'PlasticFork',
price: 1,
quantity: 1,
currency: 'USD',
},
],
},
})
```
**Product View**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.setUserID('string')
airbridge.setUserPhone('string')
airbridge.setUserEmail('string')
airbridge.setUserAttribute('string', 'string')
airbridge.setUserAlias('string', 'string')
airbridge.events.send('airbridge.ecommerce.product.viewed', {
semanticAttributes: {
currency: 'USD',
products: [{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
}],
},
})
```
**Add Payment Info**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.addPaymentInfo', {
semanticAttributes: {
type: 'CreditCard',
},
})
```
**Add to Wishlist**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.addToWishlist', {
semanticAttributes: {
listID: '189a2f8b-83ee-4074-8158-726be54e57d4',
currency: 'USD',
products: [{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
}],
},
})
```
**Add to Cart**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.ecommerce.product.addedToCart', {
semanticAttributes: {
cartID: '421eaeb7-6e80-4694-933e-f2e1a55e9cbd',
currency: 'USD',
products: [{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
}],
},
})
```
**Initiate Checkout**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.initiateCheckout', {
semanticAttributes: {
transactionID: '0a7ee1ec-33da-4ffb-b775-89e80e75978a',
currency: 'USD',
products: [
{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
},
{
productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
name: 'PlasticFork',
price: 1,
quantity: 1,
currency: 'USD',
},
],
},
})
```
**Order Complete**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.ecommerce.order.completed', {
value: 11,
semanticAttributes: {
transactionID: '8065ef16-162b-4a82-b683-e51aefdda7d5',
currency: 'USD',
inAppPurchased: true,
products: [
{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
},
{
productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
name: 'PlasticFork',
price: 1,
quantity: 1,
currency: 'USD',
},
],
},
})
```
**Order Cancel**
**Attention**
For Order Cancel events, make sure to enter the `transactionID` of the Order Cancel event into the `transactionID` field.
If the `transactionID` values don't match, the Order Cancel event won't be processed properly.
For more details, refer to the [Collecting Order Cancel Events for Accurate Sales Performance Measurement](/en/guides/analyzing-real-purchase-performance).
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.ecommerce.order.canceled', {
value: 11,
semanticAttributes: {
transactionID: '8065ef16-162b-4a82-b683-e51aefdda7d5',
currency: 'USD',
inAppPurchased: true,
products: [
{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
quantity: 1,
currency: 'USD',
},
{
productID: 'd6ab2fbe-decc-4362-b719-d257a131e91e',
name: 'PlasticFork',
price: 1,
quantity: 1,
currency: 'USD',
},
],
},
})
```
**Start Trial**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.startTrial', {
semanticAttributes: {
transactionID: 'ef1e5271-0370-407c-b1e9-669a8df1dc2c',
currency: 'USD',
period: 'P1M',
products: [{
productID: '306a57cb-f653-4220-a208-8405d8e4d506',
name: 'MusicStreamingMembership',
price: 15,
currency: 'USD',
}],
},
})
```
**Subscribe**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.subscribe', {
value: 15,
semanticAttributes: {
currency: 'USD',
transactionID: 'cbe718c7-e44e-4707-b5cd-4a6a29f29649',
period: 'P1M',
isRenewal: true,
products: [{
productID: '306a57cb-f653-4220-a208-8405d8e4d506',
name: 'MusicStreamingMembership',
price: 15,
currency: 'USD',
}],
},
})
```
**Unsubscribe**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.unsubscribe', {
value: 15,
semanticAttributes: {
currency: 'USD',
transactionID: 'cbe718c7-e44e-4707-b5cd-4a6a29f29649',
period: 'P1M',
isRenewal: true,
products: [{
productID: '306a57cb-f653-4220-a208-8405d8e4d506',
name: 'MusicStreamingMembership',
price: 15,
currency: 'USD',
}],
},
})
```
**Ad Impression**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.adImpression', {
value: 0.01,
semanticAttributes: {
adPartners: [{
app_version: '5.18.0',
adunit_id: '12345',
adunit_name: '12345',
adunit_format: 'Banner',
id: '12345',
currency: 'USD',
publisher_revenue: 12345.123,
adgroup_id: '12345',
adgroup_name: '12345',
adgroup_type: '12345',
adgroup_priority: '12345',
country: 'kr',
precision: 'publisher_defined',
network_name: '12345',
network_placement_id: '12345',
demand_partner_data: '12345',
}],
},
})
```
**Ad Click**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.adClick', {
value: 0.1,
semanticAttributes: {
adPartners: [{
app_version: '5.18.0',
adunit_id: '12345',
adunit_name: '12345',
adunit_format: 'Banner',
id: '12345',
currency: 'USD',
publisher_revenue: 12345.123,
adgroup_id: '12345',
adgroup_name: '12345',
adgroup_type: '12345',
adgroup_priority: '12345',
country: 'kr',
precision: 'publisher_defined',
network_name: '12345',
network_placement_id: '12345',
demand_partner_data: '12345',
}],
},
})
```
**Complete Tutorial**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.completeTutorial', {
semanticAttributes: {
description: 'Finish Initial Tutorial',
},
})
```
**Achieve Level**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.achieveLevel', {
semanticAttributes: {
level: 13,
},
})
```
**Unlock Achievement**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.unlockAchievement', {
semanticAttributes: {
achievementID: '36a0f0bb-b153-4be1-a3e0-3cb5b2b076c1'
description: 'Finish Initial Tutorial',
score: 80,
},
})
```
**Rate**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.rate', {
semanticAttributes: {
rateID: '531c64b3-4704-4780-a306-89014ec18daf',
rate: 4.5,
maxRate: 5,
currency: 'USD',
products: [{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
currency: 'USD',
}],
},
})
```
**Share**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.share', {
semanticAttributes: {
description: 'Share Promotion',
sharedChannel: 'CopyLink',
},
})
```
**Schedule**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.schedule', {
semanticAttributes: {
scheduleID: '75712915-2cd9-4e42-a85e-8d42f356f4c6',
datetime: '2024-01-01T00:00:00+00:00',
place: 'ConferenceRoom',
products: [{
productID: 'abb3e65d-17bc-4b28-89e3-5e356c0ea697',
name: 'ConferenceRoom',
}],
},
})
```
**Spend Credits**
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('airbridge.spendCredits', {
semanticAttributes: {
transactionID: '22eb193d-be11-4fe4-95da-c91a196faf1c',
currency: 'USD',
products: [{
productID: '0117b32a-5a6c-4d4c-b64c-7858e07dba78',
name: 'PlasticHammer',
price: 10,
currency: 'USD',
}],
},
})
```
Custom Events are events defined by Airbridge users to track user actions that are unique to their services.
Refer to the example code below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.events.send('category', {
label: 'label',
action: 'action',
value: 10,
semanticAttributes: {
transactionID: 'transaction_123',
},
customAttributes: {
key: 'value',
}
})
```
## User Data
### Set up User ID
User IDs refer to the user identifier used in a service. User IDs should be unique IDs that can unique users across websites and apps.
The user data you set is stored in the browser’s local storage and will be included in all events **until it is cleared**.
| **Function** | **Description** |
| --------------------------- | ------------------------------------------------------------------------------- |
| `airbridge.setUserID` | Inputs user ID. |
| `airbridge.clearUserID` | Deletes user ID. |
| `airbridge.setUserAlias` | Inputs additional user identifier. |
| `airbridge.removeUserAlias` | Deletes specified user identifier from the list of additional user identifiers. |
| `Airbridge.clearUserAlias` | Deletes all additional user identifiers. |
Refer to the example below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
// ID
airbridge.setUserID('testID')
airbridge.clearUserID()
// alias
airbridge.setUserAlias('ADD_YOUR_KEY', 'value')
airbridge.removeUserAlias('DELETE_THIS_KEY')
airbridge.clearUserAlias()
```
### Set up user properties
**Attention**
Sensitive user information may be included. Send after a thorough review with a legal advisor.
By setting user properties, you can send additional user information.
| **Function** | **Description** |
| ------------------------------- | ---------------------------------------------------------------------------- |
| `airbridge.setUserEmail` | Inputs user’s email address that is hashed using SHA-256. |
| `airbridge.clearUserEmail` | Deletes user email. |
| `airbridge.setUserPhone` | Inputs user’s phone number that is hashed using SHA-256. |
| `airbridge.clearUserPhone` | Deletes user’s phone number. |
| `airbridge.setUserAttribute` | Inputs additional user property. |
| `airbridge.removeUserAttribute` | Deletes specified user property from the list of additional user properties. |
| `airbridge.clearUserAttributes` | Deletes all additional user properties. |
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
// Automatically hashed on client side using SHA256
// Can turn off hashing feature with special flag
airbridge.setUserEmail('testID@ab180.co')
airbridge.setUserPhone('821012341234')
// attributes
airbridge.setUserAttribute('ADD_YOUR_KEY', 1)
airbridge.setUserAttribute('ADD_YOUR_KEY', 1.0)
airbridge.setUserAttribute('ADD_YOUR_KEY', '1')
airbridge.setUserAttribute('ADD_YOUR_KEY', true)
airbridge.removeUserAttribute('DELETE_THIS_KEY')
airbridge.clearUserAttributes()
```
You can send user email addresses and phone numbers in hashed form.
The default setting is `true`.
The user ID is not affected by the hash option, so if hashing is required, you must hash the user ID yourself before assigning its value.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.init({
app: '',
webToken: '
**공통 옵션**
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------- | ------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | Required | `string` | Banner name |
| `description` | Required | `string` | Banner description |
| `buttonText` | Required | `string` | The text to be displayed on the app download button in the banner |
| `color` | Optional | `string` | The color to be applied to the app download button in the banner. It can be set using a CSS color format. |
| `position` | Optional | `'top' \| 'bottom'` | Specifies the position of the banner. - `top` : The banner will appear at the top of the screen - `bottom` : The banner will appear at the bottom of the screen |
| `destination` | Required | `object` | Specifies how the app download button in the banner behaves. The behavior varies depending on the selected `type` . |
| `styles` | Optional | `object` | Custom styles to be applied to the banner |
#### Web-to-App setup
If the `type` of the `destination` option is set to `deeplink`, clicking the banner button will open the app.
| **Option** | **Required or Optional** | **Type** | **Description** |
| --------------------------- | ------------------------ | ------------ | -------------------------------------------------------------------- |
| `destination.type` | Required | `'deeplink'` | Cannot be changed from `deeplink` |
| `destination.deeplinks` | Optional | `object` | Deep link setting. For more details, refer to this article. |
| `destination.fallbacks` | Optional | `object` | Deep link fallback setting. For more details, refer to this article. |
| `destination.defaultParams` | Optional | `object` | Campagin parameter |
| `destination.ctaParams` | Optional | `object` | CTA camapgin parameter |
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openBanner({
title: '',
description: '',
buttonText: '',
color: '',
position: '', // 'top' or 'bottom'
destination: {
type: 'deeplink',
deeplinks: {
android: '://...',
ios: '://...',
desktop: 'https://www.example.com/'
},
fallbacks: {
android: 'google-play',
ios: 'itunes-appstore',
},
ctaParams: {
cta_param_1: '',
cta_param_2: '',
cta_param_3: '',
},
defaultParams: {
campaign: '',
medium: '',
term: '',
content: '',
},
},
})
```
#### Web-to-Store setup
If the `type` of the `destination` option is set to `download`, clicking the banner button will open the app store.
| **Option** | **Required or Optional** | **Type** | **Description** |
| --------------------------- | ------------------------ | ------------ | -------------------------------------- |
| `destination.type` | Required | `'download'` | Cannot be changed from `download` |
| `destination.defaultParams` | Optional | `object` | Campaign parameter |
| `destination.ctaParams` | Optional | `object` | CTA campaign parameter |
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openBanner({
title: '',
description: '',
buttonText: '',
color: '',
position: '', // 'top' or 'bottom'
destination: {
type: 'download',
ctaParams: {
cta_param_1: '',
cta_param_2: '',
cta_param_3: '',
},
defaultParams: {
campaign: '',
medium: '',
term: '',
content: '',
},
},
})
```
##### Web-to-Web setup
If the `type` of the `destination` option is set to `web`, clicking the banner button will navigate the user to a specified website.
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------------ | ------------------------ | -------- | ---------------------------------- |
| `destination.type` | Required | `'web'` | Cannot be changed from `web` |
| `destination.url` | Required | `string` | Input the URL to redirect the user |
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openBanner({
title: '',
description: '',
buttonText: '',
color: '',
position: '', // 'top' or 'bottom'
destination: {
type: 'web',
url: 'https://www.example.com',
},
})
```
#### Custom style setup
You can customize the banner's appearance by adding a `styles` field to the options.
Each key should be specified using a CSS selector format, and each value should follow the [`CSSStyleDeclaration`](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration) ([TypeScript](https://github.com/microsoft/TypeScript/blob/v5.6.3/src/lib/dom.generated.d.ts#L3866-L5111)) format.
See the example below, which changes the `border-radius` of the icon area.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openBanner({
...
styles: {
'#airbridge-banner-icon': {
borderRadius: '4px'
}
}
})
```
Below is a list of IDs that can be used to apply CSS styles. You can specify the CSS style using a CSS selector format (e.g., `#airbridge-banner-icon`).
| **ID** | **Description** |
| ------------------------------ | ---------------------- |
| `airbridge-banner` | Entire banner area |
| `airbridge-banner-icon` | Banner icon |
| `airbridge-banner-title` | Banner title |
| `airbridge-banner-description` | Banner description |
| `airbridge-banner-open` | App dowload cTA button |
| `airbridge-banner-close` | Banner close button |
### Implement a custom banner
The Airbridge Web SDK offers features to support custom banner implementation. If you want to add deep linking to an existing banner or build a more advanced custom banner, refer to the following information.
#### Web-to-App setup
You can use the `openDeeplink` function to open the app via a deep link.
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------------- | ------------------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `deeplinks.android` | Required | `string` | The scheme URL of the app to be launched via deep link on Android. |
| `deeplinks.ios` | Required | `string` | The scheme URL of the app to be launched via deep link on iOS. |
| `deeplinks.desktop` | Required | `string` | The URL of the website to redirect users to on desktop. |
| `fallbacks.android` | Required | `'google-play' \| string` | The URL to redirect users to when the deep link fails on an Android device where the app is not installed. - `google-play`: Redirects to the app's Google Play Store page as registered in the Airbridge dashboard. - URL: Redirects to the specified website URL. |
| `fallbacks.ios` | Required | `'itunes-appstore' \| string` | The URL to redirect users to when the deep link fails on an iOS device where the app is not installed. - `itune-appstore`: Redirects to the app's App Store page as registered in the Airbridge dashboard. - URL: Redirects to the specified website URL. |
| `type` | Required | `'redirect' \| 'click'` | Select one of the following options depending on the user's interaction. **-** `redirect`: Use when there is no user interaction. - `click`: Use when user interaction is guaranteed (e.g., button click). |
| `defaultParams` | Optional | `object` | Campaign parameter |
| `ctaParams` | Optional | `object` | CTA campaign parameter |
Refer to the example below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openDeeplink({
deeplinks: {
// Please use the custom scheme URL like `://...`
// Don't use the `intent://...`, `market://...` or `https://...`
android: '://path?key=value',
// Please use the custom scheme URL like `://...`
// Don't use the `intent://...`, `market://...` or `https://...`
ios: '://path?key=value',
desktop: 'https://www.example.com/path?key=value',
},
fallbacks: {
// Please use `google-play` or website URL like `https://www.example.com/...`.
// Don't use the store URL like `https://play.google.com/...`
android: 'google-play',
// Please use `itunes-appstore` or website URL like `https://www.example.com/...`.
// Don't use the store URL like `https://apps.apple.com/...`
ios: 'itunes-appstore',
},
ctaParams: {
cta_param_1: '',
cta_param_2: '',
cta_param_3: '',
},
})
```
**Attention**
Make sure to use **the deep link scheme URLs** configured in the Airbridge dashboard for both `deeplinks.android` and `deeplinks.ios`.
* `://...`
Never use the following types of URLs: **Intent scheme URLs** or **HTTP/HTTPS URLs**.
* `intent://...`
* `market://...`
* `https://www.example.com`
Refer to the examples for tracking button-clicking events.
```html ES6+ lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
```html ES5 lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
**Attention**
Make sure to replace `` in the example with the actual ID of the button that should trigger the deep link when the user clicks it.
#### Web-to-Store setup
If you don’t input the `deeplinks` option in the `openDeeplink` function and set the `fallbacks` option to `store`, the app store will open regardless of whether the app is installed.
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------------- | ------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fallbacks.android` | Required | `'google-play'` | The destination to redirect users to on an Android device. Cannot be changed from `google-play`. - `google-play`: Redirects to the app's Google Play Store page as registered in the Airbridge dashboard. |
| `fallbacks.ios` | Required | `'itunes-appstore'` | The destination to redirect users to on an iOS device. Cannot be changed from `itune-appstore`. - `itune-appstore`: Redirects to the app's App Store page as registered in the Airbridge dashboard. |
| `defaultParams` | Optional | `object` | Campaign parameter |
| `ctaParams` | Optional | `object` | CTA campaign parameter |
Refer to the example below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openDeeplink({
fallbacks: {
android: 'google-play',
ios: 'itunes-appstore',
},
defaultParams: {
campaign: '',
medium: '',
term: '',
content: '',
},
ctaParams: {
cta_param_1: '',
cta_param_2: '',
cta_param_3: '',
},
})
```
Refer to the examples for configuring buttons.
```html ES6+ lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
```html ES5 lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
**Attention**
Make sure to replace `` in the example with the actual ID of the button that should trigger the deep link when the user clicks it.
#### Web-to-Web setup
If you don’t input the `deeplinks` option in the `openDeeplink` function and set the `fallbacks` option to URL, the user will be redirected to the website regardless of whether the app is installed.
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------------- | ------------------------ | -------- | ---------------------------------------------------------------------------------------------------------- |
| `fallbacks.android` | Required | `string` | The URL to redirect users to on an Android device. - URL: Redirects to the specified website URL. |
| `fallbacks.ios` | Required | `string` | The destination to redirect users to on an iOS device. - URL: Redirects to the specified website URL. |
| `defaultParams` | Optional | `object` | Campaign parameter |
| `ctaParams` | Optional | `object` | CTA campaign parameter |
Refer to the example below.
```javascript lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
airbridge.openDeeplink({
fallbacks: {
android: 'https://www.example.com',
ios: 'https://www.example.com',
},
defaultParams: {
campaign: '',
medium: '',
term: '',
content: '',
},
ctaParams: {
cta_param_1: '',
cta_param_2: '',
cta_param_3: '',
},
})
```
Refer to the examples for configuring buttons.
```html ES6+ lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
```html ES5 lines theme={"theme":{"light":"github-dark-dimmed","dark":"github-dark-dimmed"}}
```
**Attention**
Make sure to replace `` in the example with the actual ID of the button that should trigger the deep link when the user clicks it.
### Creating a button to open the app via deep link
**Note**
The `openDeeplink` function is a unified replacement for the existing `setDeeplinks`, `setDownloads`, and `sendWeb` functions. It is a pure function that can be used independently, without needing to bind it to a DOM element, such as a button.
The `setDeeplinks` function will be maintained but no longer updated in future releases. Therefore, use the `openDeeplink` function to implement the features you need.
You can use the `setDeeplinks` function to assign deep link functionality to a button.
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------------- | ------------------------ | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `buttonID` | Required | `string \| string[]` | The `id` attribute of the `
**공통 옵션**
| **Option** | **Required or Optional** | **Type** | **Description** |
| ------------- | ------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `title` | Required | `string` | Banner name |
| `description` | Required | `string` | Banner description |
| `buttonText` | Required | `string` | The text to be displayed on the app download button in the banner |
| `color` | Optional | `string` | The color to be applied to the app download button in the banner. It can be set using a CSS color format. |
| `position` | Optional | `'top' \| 'bottom'` | Specifies the position of the banner.