# Helpful (CSS) Style Examples

**Cognigy Support**  
July 7, 2022

You have built a great virtual agent and want to embed it on your website. This set of examples should help to adjust the default design to the corporate design of the website.

#### CSS Examples

Please insert the following snippets into the CSS section of your website in order to see the changes.

**1. Remove the Toggle Button**

```
[data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
  display: none;
}
```

**2. Customize the Header Bar Color**

```
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {
  background: rgb(15, 15, 194);
}
```

Next to the so-called RGB solution, one could use a HEX Color as well:

```
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {
  background: #fff;
}
```

**3. Display the Webchat as fullscreen**

```
[data-cognigy-webchat-root] [data-cognigy-webchat-toggle].webchat-toggle-button {
  display: none;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 0;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-close-button {
  display: none;
}
```

**4. Center Webchat Window**

```
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
  left: 50%;
  transform: translateX(-50%);
}
```

### Webchat
- [Customize your Webchat with the MutationObserver API](https://support.cognigy.com/hc/en-us/articles/20142438205468-Customize-your-Webchat-with-the-MutationObserver-API)
- [3 Ways to send Data from a Website to a Cognigy Flow from Cognigy Webchat V3](https://support.cognigy.com/hc/en-us/articles/16846703249692-3-Ways-to-send-Data-from-a-Website-to-a-Cognigy-Flow-from-Cognigy-Webchat-V3)
- [Webchat v2: Disable Quick Reply buttons after click](https://support.cognigy.com/hc/en-us/articles/5398841450396-Webchat-v2-Disable-Quick-Reply-buttons-after-click)
- [Webchat Overview](https://support.cognigy.com/hc/en-us/articles/360019867919-Webchat-Overview)
- [The Demo Webchat](https://support.cognigy.com/hc/en-us/articles/360019831920-The-Demo-Webchat)
- [Display teaser messages (Preview, Engagement)](https://support.cognigy.com/hc/en-us/articles/360020128379-Display-teaser-messages-Preview-Engagement)
- [Get the user's browser language](https://support.cognigy.com/hc/en-us/articles/360022044759-Get-the-user-s-browser-language)
- [Helpful (CSS) Style Examples](https://support.cognigy.com/hc/en-us/articles/360022110539-Helpful-CSS-Style-Examples)
- [Display a welcome message above the Start Button](https://support.cognigy.com/hc/en-us/articles/4408792943378-Display-a-welcome-message-above-the-Start-Button)
- [Expire sessions after n hours in Webchats with persistent history](https://support.cognigy.com/hc/en-us/articles/4421763771804-Expire-sessions-after-n-hours-in-Webchats-with-persistent-history)

### Table of contents

CSS Examples

- [CSS Examples](https://support.cognigy.com/hc/en-us/articles/360022110539-Helpful-CSS-Style-Examples#css-examples-0-0)