Configuration

To configure the inbox integration, you'll need:

ParameterTypeRequired(*)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:

  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 integration
MagicBell Dashboard: Integration Configuration