Skip to main content

Design

Examples to help you get started in styling your Deep Chat component.

ChatGPT​

This example simulates the styling used in ChatGPT. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or set the avatars property to true.

View Code

Bard​

Simulation of the styling used in Google Bard. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or set the avatars property to true.

View Code

Bing​

Simulation of the styling used in Bing Chat.

View Code

iMessage​

Chat style that uses the iMessage SMS theme.

View Code

Blue​

A blue color theme that uses a background image.

View Code

Lo-fi​

A blue and purple theme that uses an image background.

View Code

Red​

A red color flavour. If you are using a custom avatar - please replace the "path-to-icon.png" string to your file's path or set the avatars property to true.

View Code

Violet​

A violet color theme that uses a squared border styling approach.

View Code

Dark blue​

Dark blue color variation that is suitable for a dark screen mode.

View Code

Dark Orange​

Dark orange color variation that is suitable for a dark screen mode.

View Code

Full width input​

A simple text input area that covers the full width of the chat component.

View Code