How to Customize Inbox and Toast Font

Open Q&A
,
1

I am trying Courier Notification Inbox through Embedded Integration.

Hope you know Branding means not only in color.
My requirement is,

  1. How to change the font in inbox and toast based on Branding?
  2. How to create a Brand inbox gradient, Change Toast Logo and Insert Embedded Script via API? because the current post : /brand API had only Email settings not inApp design
    FYR,
    {
    “id”: “C8CPX6HQZ5M7Q5KAMW5CXC4N98DH”,
    “name”: “Example Brand Name”,
    “settings”: {
    “colors”: {
    “primary”: “#9D3789”,
    “secondary”: “#9D3789”,
    “tertiary”: “#9D3789”
    },
    “email”: {
    “footer”: {
    “markdown”: “Bold and italic with a link”,
    “social”: {
    “facebook”: {
    “url”: “####”
    },
    “instagram”: {
    “url”: “#####”
    },
    “linkedin”: {
    “url”: “#####”
    },
    “medium”: {
    “url”: “######”
    },
    “twitter”: {
    “url”: “######”
    }
    }
    },
    “header”: {
    “barColor”: “#9D3789”,
    “logo”: {
    “href”: “####”,
    “image”: “####”
    }
    }
    }
    }
    }
2

Hi there, you can override most all CSS properties for our components via props and theme. The branding API gives ways to update some basic colors but the actual components can do a lot more via code.

Note some of the props here, like renderProps will not work for the embedded solution

Inbox:
https://github.com/trycourier/courier-react/blob/main/packages/react-inbox/docs/0.props.md
https://github.com/trycourier/courier-react/blob/main/packages/react-inbox/docs/1.theme.md

Toast:

To use these props/theme in the embedded approach, it will look like:

window.courierConfig = {
        clientKey: "",
        userId: "",
        components: {
          inbox: {
            theme: {
              message: {
                container: {
                  "&, *": {
                    "fontSize": "24px"
                  }
                }
              },
              container: {
                "background": "red",
              },
              header: {
                "background": "red"
              }
            },
            openLinksInNewTab: false,
          },
        },
      };

image
image624×645 41.1 KB

It may take some tweaking to understand what each theme property is associated with though as there are a lot of entry points for the theme. But you can also used “&, *” and such as shown above

3

Where to add brandId?
i designed an Brand inbox via UI. it has a BrandName and BrandId.

I need to add the BrandId to the Inbox… how i can do it in Embedded Integrations

4

window.courierConfig.brandId should work.

what URL are you using to load the components. Make sure its at least 1.38.1.js or latest.js

5

i am using this

src=“https://courier-components-xvdza5.s3.amazonaws.com/latest.js”

6

Its Now working Riley… I didn’t make any changes in my code…but now it didn’t throws error… thanks for your Support.