Change the way it looks
You can fully customize the styles of the component in two ways:
- Using a custom brand color which will update certain elements, such as the background color of the header and the color of the send button.
- Applying your own CSS styles to the component.
Change the brand color
To change the brand color, you can use the brandColor prop. This will update the background color of the header and the color of the send button.
1
2
3
4
5
6
<Messenger
publicKey='your-public-key'
viewOptions={{
brandColor: '#ff0000' // also other types, such as rgba and hsl are supported
}}
/>
Apply your CSS styles
I you want more control over the looks of the component, you can target the elements using their fixed class names and apply your own styling.
Every element has a set of classes separated with a lock icon: 🔒. Everything right of that icon is regenerated on each build so you should not use that, but everything on the left.