Configuration
To configure the inbox integration, you'll need:
Parameter | Type | Required(*) | Description |
---|---|---|---|
images | * | ||
locale | * | ||
theme | * |
Example
{
"images": {
"emptyInboxUrl": ""
},
"locale": "de",
"theme": {
"banner": {
"backgroundColor": "#F8F5FF",
"fontSize": "14px",
"textColor": "#3A424D"
},
"dialog": {
"accentColor": "#5225C1",
"backgroundColor": "#F5F5F5",
"textColor": "#313131"
},
"footer": {
"backgroundColor": "#FFFFFF",
"borderRadius": "16px",
"fontFamily": "inherit",
"fontSize": "15px",
"textColor": "#5225C1"
},
"header": {
"backgroundColor": "#FFFFFF",
"borderRadius": "16px",
"fontFamily": "inherit",
"fontSize": "15px",
"textColor": "#5225C1"
},
"icon": {
"borderColor": "#EDEDEF",
"width": "24px"
},
"unseenBadge": {
"backgroundColor": "#F80808"
}
}
}
Schema
{
"$schema": "http://json-schema.org/draft-07/schema#",
"properties": {
"images": {
"minProperties": 1,
"properties": {
"emptyInboxUrl": {
"type": "string"
}
},
"required": [
"emptyInboxUrl"
],
"type": [
"object",
"null"
]
},
"locale": {
"minLength": 2,
"type": [
"string",
"null"
]
},
"theme": {
"minProperties": 1,
"properties": {
"banner": {
"properties": {
"backgroundColor": {
"type": "string"
},
"backgroundOpacity": {
"type": "number"
},
"fontSize": {
"type": "string"
},
"textColor": {
"type": "string"
}
},
"required": [
"fontSize",
"backgroundColor",
"textColor"
],
"type": "object"
},
"dialog": {
"properties": {
"accentColor": {
"type": "string"
},
"backgroundColor": {
"type": "string"
},
"textColor": {
"type": "string"
}
},
"required": [
"backgroundColor",
"textColor",
"accentColor"
],
"type": "object"
},
"footer": {
"properties": {
"backgroundColor": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"fontSize": {
"type": "string"
},
"textColor": {
"type": "string"
}
},
"required": [
"fontSize",
"backgroundColor",
"textColor",
"borderRadius"
],
"type": "object"
},
"header": {
"properties": {
"backgroundColor": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontSize": {
"type": "string"
},
"textColor": {
"type": "string"
}
},
"required": [
"fontFamily",
"fontSize",
"backgroundColor",
"textColor",
"borderRadius"
],
"type": "object"
},
"icon": {
"properties": {
"borderColor": {
"type": "string"
},
"width": {
"type": "string"
}
},
"required": [
"borderColor",
"width"
],
"type": "object"
},
"notification": {
"properties": {
"default": {
"properties": {
"backgroundColor": {
"type": "string"
},
"borderRadius": {
"type": "string"
},
"fontFamily": {
"type": "string"
},
"fontSize": {
"type": "string"
},
"hover": {
"properties": {
"backgroundColor": {
"type": "string"
}
},
"required": [
"backgroundColor"
],
"type": "object"
},
"margin": {
"type": "string"
},
"state": {
"properties": {
"color": {
"type": "string"
}
},
"required": [
"color"
],
"type": "object"
},
"textColor": {
"type": "string"
}
},
"required": [
"fontFamily",
"fontSize",
"textColor",
"borderRadius",
"backgroundColor",
"margin"
],
"type": "object"
},
"unread": {
"properties": {
"backgroundColor": {
"type": "string"
},
"hover": {
"properties": {
"backgroundColor": {
"type": "string"
}
},
"required": [
"backgroundColor"
],
"type": "object"
},
"state": {
"properties": {
"color": {
"type": "string"
}
},
"required": [
"color"
],
"type": "object"
},
"textColor": {
"type": "string"
}
},
"required": [
"textColor",
"backgroundColor"
],
"type": "object"
},
"unseen": {
"properties": {
"backgroundColor": {
"type": "string"
},
"hover": {
"properties": {
"backgroundColor": {
"type": "string"
}
},
"required": [
"backgroundColor"
],
"type": "object"
},
"state": {
"properties": {
"color": {
"type": "string"
}
},
"required": [
"color"
],
"type": "object"
},
"textColor": {
"type": "string"
}
},
"required": [
"textColor",
"backgroundColor"
],
"type": "object"
}
},
"required": [
"default",
"unseen",
"unread"
],
"type": "object"
},
"unseenBadge": {
"properties": {
"backgroundColor": {
"type": "string"
}
},
"required": [
"backgroundColor"
],
"type": "object"
}
},
"type": [
"object",
"null"
]
}
},
"required": [
"theme",
"locale",
"images"
],
"type": "object"
}
Configure via Dashboard
The easiest way to configure this integration is through the MagicBell dashboard:
- Log in to your MagicBell dashboard.
- Navigate to Settings > Integrations.
- Find and click on this integration.
- Follow the on-screen instructions to complete the configuration.

MagicBell Dashboard: Integration Configuration