Inbox Integration - Configuration Docs

To configure the Inbox integration, you'll need the following data:

required fields are marked with an `*`
ParameterTypeDescription
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"
    }
  }
}

Configure via Dashboard

The easiest way to configure this integration is through the MagicBell dashboard:

  1. Log in to your MagicBell dashboard.
  2. Navigate to Settings > Integrations.
  3. Find and click on this integration.
  4. Follow the on-screen instructions to complete the configuration.

Configure via API

You can also configure the integration using the API

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"
    }
  }
}