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
• 3 Ways to send Data from a Website to a Cognigy Flow from Cognigy Webchat V3
• Webchat v2: Disable Quick Reply buttons after click
• Webchat Overview
• The Demo Webchat
• Display teaser messages (Preview, Engagement)
• Get the user's browser language
• Helpful (CSS) Style Examples
• Display a welcome message above the Start Button
• Expire sessions after n hours in Webchats with persistent history

Table of contents

CSS Examples

• CSS Examples