Customizing the Web Client's appearance

The Web Client uses standard CSS. This means that you can override the Web Client CSS with styling more suitable for your brand.

As a minimum you may need to set the height and width of the Web Client:

<head>
    <style type="text/css">
    html {
        height: 98%;
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
     }
     body {
        height: 100%;
     }
     .chat-container {
        background-color: #ffffff;
        border: 1px solid #e5e5ea;
        display: block;
        height: 85%;
        width: 85%;
        border-radius: 6px;
        box-shadow: 0 0 20px #acacac;
    }
    </style>
    
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
    <link rel="stylesheet" href="https://webchat-converse.converse.pitneycloud.com/css/converse-chat.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="<hash>"
                crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
</head>

For a full example, see the bot's Integration tab.