Helpful (CSS) Style Examples

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%);
}

Helpful (CSS) Style Examples

CSS Examples

Webchat

Comments