### Style Get Started Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the border-radius and background color of the button that initiates the first interaction.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-get-started-button {

    border-radius: 10px;
    background-color: rgb(0, 123, 255);
}
```

--------------------------------

### Start Conversation

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Skips the start screen and initiates the conversation immediately.

```APIDOC
## Skip the Start Screen

### Description
Skips the start screen and initiates the conversation immediately.

### Method
`webchat.startConversation()`

### Parameters
None.

### Request Example
```javascript
webchat.startConversation();
```
```

--------------------------------

### Plugin Alias Configuration Example

Source: https://github.com/cognigy/webchat/blob/main/architecture-docs/quality-attributes.md

Configuration for a plugin's package.json bundler, demonstrating how libraries are aliased for consumption.

```json
{
  "name": "qr-code-reader",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "build": "node build.js"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@cognigy/webchat-plugin-bundler": "^1.0.0"
  },
  "cognigy": {
    "webchat": {
      "alias": {
        "react": "react",
        "react-dom": "react",
        "@emotion/react": "emotion"
      }
    }
  }
}
```

--------------------------------

### Install Dependencies and Build Webchat

Source: https://github.com/cognigy/webchat/blob/main/README.md

Install project dependencies and create bundle files for Cognigy Webchat v3. Requires Node.js.

```bash
npm i
npm run bundle
```

--------------------------------

### Start Development Server for Webchat

Source: https://github.com/cognigy/webchat/blob/main/README.md

Launch an HTTP server on port 8080 for development purposes, showcasing the webchat directly from source code with automatic reloading.

```bash
npm run dev
```

--------------------------------

### Start Conversation Immediately

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Skips the Webchat start screen and initiates the conversation directly. Use this to streamline the user experience.

```javascript
webchat.startConversation();
```

--------------------------------

### Localization Example

Source: https://github.com/cognigy/webchat/blob/main/docs/embedding.md

This JSON snippet shows an example of a localization string where parts of the text are dynamic and handled by runtime interpolation. Only the static text requires translation.

```json
{
	"slidesCountText": "{slidesCount} Folien."
}
```

--------------------------------

### Initialize and Open Cognigy Webchat

Source: https://github.com/cognigy/webchat/blob/main/dist/index.html

This snippet shows how to initialize the Cognigy Webchat with an endpoint URL and open it. It also demonstrates starting a conversation.

```javascript
initWebchat( "https://endpoint-dev.cognigy.ai/45c4ec61c937e830ecdebfaad977e2ed0bd84001e3b6df736e84560b73506463", {
  // userId: "user1",
  // sessionId: "session1",
  // settings: {
  // layout: {
  // watermark: "default",
  // watermarkText: "Some Random Watermark"
  // },
  // unreadMessages: {
  // enableIndicator: true,
  // enableBadge: true,
  // enablePreview: true,
  // enableSound: true
  // },
  // teaserMessage:{
  // showInChat: true,
  // teaserMessageDelay: 5000,
  // text: "Hi there!"
  // },
  // startBehavior: {
  // getStartedText: ""
  // },
  // widgetSettings: {
  // enableFocusTrap: true,
  // }
  // },
}
).then(function (webchat) {
  window.cognigyWebchat = webchat;
  webchat.open();
  webchat.startConversation();
});
```

--------------------------------

### Webchat Embedding Script Example

Source: https://github.com/cognigy/webchat/blob/main/architecture-docs/quality-attributes.md

An example of how the WebchatWidget's embedding script exposes libraries for consumption by plugins.

```typescript
export const expose = {
  react: React,
  styled: styled
};

export const alias = {
  react: "react",
  "react-dom": "react",
  emotion: "@emotion/react"
};

export const imports = {
  react: "react",
  "react-dom": "react-dom",
  emotion: "@emotion/react"
};

export const plugins = {
  "qr-code-reader": {
    component: QRCodeReader,
    imports: imports,
    alias: alias
  }
};
```

--------------------------------

### Style Rating Widget Comment Input Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Applies a background color to the container for the comment input field. Note that this example uses a red background, which might need adjustment for usability.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-rating-widget-comment-input-field-container {
  background: #cc0000;
}
```

--------------------------------

### Initialize Webchat (Legacy Browsers)

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Provides an alternative syntax for initializing Webchat, suitable for legacy browser support.

```javascript
initWebchat('...', {}, function (webchat) {
    // use webchat here
})
```

--------------------------------

### Initialize Webchat (Modern Browsers)

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Initializes the Webchat and provides a webchat object once a connection is established. Use this for modern browser compatibility.

```javascript
initWebchat('...').then(webchat => {
    // use webchat here
})
```

--------------------------------

### Initialize Webchat and Store in Window

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Initializes the Webchat and stores the resulting webchat object in the global window namespace for website-wide access.

```javascript
initWebchat('...').then(webchat => {
    window.webchat = webchat;
})
```

--------------------------------

### Style Chat Options Quick Reply Button Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Sets the justification and padding for the container of quick reply buttons.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-button-container {
    justify-content: space-around;
    padding: 10px;
}
```

--------------------------------

### Style Chat Options Quick Reply Buttons Root

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Configures the layout and padding for the container of quick reply buttons and their title in the chat options screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-btns-root {
    justify-content: space-between;
    padding: 10px;
}
```

--------------------------------

### Style Media Containers

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the padding, border, and border-radius for image, video, and audio media containers.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-image-container {
  padding: 20px;
    border: 1px solid black;
    border-radius: 10px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-image {
  border-radius: 0;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-video > div {
  border-radius: 5px;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-audio > div{
  border: 1px solid red;
  border-radius: 20%;
}
```

--------------------------------

### Customize Homescreen Buttons Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust spacing, layout, and position for the container holding conversation starter buttons.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content .webchat-homescreen-buttons {
    margin-top: 24px;
    padding: 16px;
}
```

--------------------------------

### Customize Homescreen Buttons

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style individual conversation starter buttons, including background color, text color, and border radius.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-button {
    background-color: rgb(5, 5, 131) !important;
    color: black;
    border-radius: 5px;
}
```

--------------------------------

### Style Chat Options Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Applies a border to the main container holding all chat options.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-container {
    border: 2px solid rgb(5, 5, 131);
}
```

--------------------------------

### Customize Homescreen Button Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the padding for the container that holds conversation starter buttons.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-button-container {
    padding: 10px;
}
```

--------------------------------

### Customize Homescreen Root Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the border radius, border, and padding of the main homescreen container.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-root {
    border-radius: 20px;
    border: 2px solid rgb(5, 5, 131);
    padding: 20px;
}
```

--------------------------------

### Style Individual Chat Options Quick Reply Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Sets the background color and text color for individual quick reply buttons in the chat options screen, overriding other styles.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-button {
    background-color: rgb(5, 5, 131) !important;
    color: white;
}
```

--------------------------------

### Customize Homescreen Title

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Change the font size and color of the title displayed on the homescreen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-title {
    font-size: 24px;
    color: red !important;
}
```

--------------------------------

### Style Quick Reply Buttons Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Arrange the quick reply buttons vertically. Use this to change the layout of multiple quick reply options.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-replies-container {
  display: flex;
  flex-direction: column;
}
```

--------------------------------

### Style Chat Options Root Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjusts padding for the main container of the chat options screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-root {
    padding: 20px;
}
```

--------------------------------

### Initialize Webchat

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Initializes the Webchat widget and provides access to the webchat object for further API interactions. Supports modern and legacy browsers.

```APIDOC
## Initialize Webchat

### Description
Initializes the Webchat widget and provides access to the `webchat` object for further API interactions. Supports modern and legacy browsers.

### Method
`initWebchat(config, options, callback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Modern browsers
initWebchat('...').then(webchat => {
    // use webchat here
});

// Legacy browsers
initWebchat('...', {}, function (webchat) {
    // use webchat here
});
```

### Response
#### Success Response
The `webchat` object, which provides access to the Webchat API.

#### Response Example
```javascript
// Example of storing the webchat object globally
initWebchat('...').then(webchat => {
    window.webchat = webchat;
});
```
```

--------------------------------

### Style Privacy Notice Accept Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the background color of the privacy notice accept button.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-accept-button {
    background-color: rgb(5, 5, 131);
}
```

--------------------------------

### Style Chat Options Postback Buttons Wrapper

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjusts the background, padding, and border-radius for the wrapper of postback buttons in the chat options screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-btns-wrapper {
    background: #f5faff;
    padding: 12px;
    border-radius: 8px;
}
```

--------------------------------

### Style File Attachment Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Apply custom padding, border, and border-radius to the container holding group of file attachments.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-files-container {
  padding: 20px;
  border: 1px solid black;
  border-radius: 10px;
}
```

--------------------------------

### Style Chat Options Quick Reply Buttons Title

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customizes the font size, family, and color for the title of the quick reply buttons.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-action-btns-title {
    font-size: 1.125rem;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(5, 5, 131);
}
```

--------------------------------

### Style Individual Previous Conversation Item

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Sets the background color for each item in the previous conversations list.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-item {
    background-color: rgb(5, 5, 131);
}
```

--------------------------------

### Style Individual Quick Reply Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the appearance of each quick reply button. This affects the text color, background, and border of all quick reply buttons.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-replies-container .webchat-quick-reply-template-button {
    color: black;
    background-color: white;
    border: 2px solid black;
}
```

--------------------------------

### Style Privacy Policy Link

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Set the text color for the privacy policy link.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-policy-link {
   color: rgb(227, 227, 251);
}
```

--------------------------------

### Customize Teaser Message Action Buttons Alignment

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the position and alignment of postback buttons within the teaser message using the action buttons class.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-action-buttons {
    border: 2px solid rgb(232 232 245);
    margin: auto;
    padding: 20px;
    border-radius: 15px;
}
```

--------------------------------

### Customize Homescreen Previous Conversation Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style the button used to view previous conversations from the homescreen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-previous-conversation-button {
    background-color: rgb(5, 5, 131) !important;
}
```

--------------------------------

### Style Date Picker Root Element

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the background color of the main container for the Date Picker screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker {
    background-color: #d3d3d3;
}
```

--------------------------------

### Style Persistent Menu Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the layout, background color, and padding of the persistent menu container.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}
```

--------------------------------

### Initialize Webchat with Persistent Session ID

Source: https://github.com/cognigy/webchat/blob/main/docs/persistent-history.md

This snippet demonstrates how to manage and use a session ID for persistent chat history. It loads a session ID from `LocalStorage`, generates one if none exists, and uses it to initialize the Webchat. It also registers an analytics service to update the session ID in `LocalStorage` if the session is switched.

```javascript
// Initialize a sessionId, undefined by default.
let sessionId;

function storeSessionId(sessionId) {
	if (window.localStorage) {
		localStorage.setItem("SESSIONID", sessionId);
	}
}

// in case LocalStorage is supported...
if (window.localStorage) {
	// try to load a previously stored sessionId from the LocalStorage
	sessionId = window.localStorage.getItem("SESSIONID");

	// in case there was no previously stored sessionId,
	// generate one and store it into LocalStorage
	if (!sessionId) {
		sessionId = "session-" + Date.now() * Math.random();
		storeSessionId(sessionId);
	}
}

// use the sessionId for initializing the Webchat
initWebchat("...", {
	sessionId,
}).then(webchat => {
	webchat.open();
	// If the Previous Conversations feature is enabled, it is possible for the sessionsId to be changed.
	// For this scenario, we should subscribe to the analytics event `switch-session` and update the LocalStorage
	webchat.registerAnalyticsService(event => {
		if (event.type === "webchat/switch-session") {
			storeSessionId(event.payload);
		}
	});
});
```

--------------------------------

### Style Previous Conversations Root Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjusts padding for the main container of the previous conversations screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-root {
    padding: 20px;
}
```

--------------------------------

### Style Privacy Notice Actions Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the background color and padding for the container holding privacy screen action items.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-actions {
    background-color: rgb(227, 227, 251);
    padding: 20px;
}
```

--------------------------------

### Style Persistent Menu Item

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the background color, font, and padding of individual persistent menu items.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu-item {
    background-color: #f0f0f0;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;
}
```

--------------------------------

### Customize Teaser Message Button Container Layout

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Control the layout and spacing of buttons within the teaser message button container.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-button-container {
    justify-content: space-between;
    padding-top: 10px;
}
```

--------------------------------

### Style Text with Buttons Replies Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Arrange the buttons within a 'Text with Buttons' message vertically. Use this to change the layout of button lists.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-buttons-template-replies-container {
    display: flex;
    flex-direction: column;
}
```

--------------------------------

### Style Gallery Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the padding of the main container for gallery messages. This affects the spacing around the entire gallery.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-carousel-template-root {
  padding: 20px;
}
```

--------------------------------

### Style Selected Date

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Modify the background, text color, font weight, and size for selected dates in the calendar.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .flatpickr-day.selected {
  background: #28c8ef;
  color: hsla(0, 0%, 100%, 0.95);
  font-weight: bold;
  font-size: 1.375rem;
}
```

--------------------------------

### Customize Teaser Message Root Alignment

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the alignment and position of the teaser message container using its root class.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-root {
    padding: 10px;
    right: 10px;
    bottom: 75px;
}
```

--------------------------------

### Style List Header Element

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Set the height for the header element that appears above all other list components.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header {
  heigth: 200px;
}
```

--------------------------------

### Customize Homescreen Send Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style the send button on the homescreen, setting its background and text color.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-send-button {
    background-color: rgb(5, 5, 131) !important;
    color: white;
}
```

--------------------------------

### Style Persistent Menu Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the size, color, and background of the persistent menu icon.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu-button {
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
}
```

--------------------------------

### Style List Element Background

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Set the background color for individual list elements.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element {
  background: #e3f6f5;
}
```

--------------------------------

### Style Date Picker Header

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Apply a gradient background to the header of the Date Picker screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker-header {
    background-color: linear-gradient(185deg,#36b96e,#2c6caf);
}
```

--------------------------------

### Style Quick Reply Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the overall dimensions of the quick reply element. This affects the entire quick reply message container.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-root {
    width: 500px;
    height: 500px;
}
```

--------------------------------

### Show Notification

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Displays a notification banner within the Webchat widget when it is open.

```APIDOC
## Show Notification

### Description
Displays a notification banner within the Webchat widget when it is open.

### Method
`webchat.showNotification(message)`

### Parameters
- **message** (string) - Required - The content of the notification message.

### Request Example
```javascript
webchat.showNotification("hello world!");
```
```

--------------------------------

### Style Date Picker Content

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Add a custom shadow effect to the content area of the Date Picker screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker-content {
    box-shadow: 0 0 70px #ff99d7 inset;
}
```

--------------------------------

### Customize Homescreen Header Logo

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style the custom logo displayed in the homescreen header, including its size, border, and background.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content .webchat-homescreen-header-logo {
    width: 40px;
    height: 40px;
    border: 2px solid #0055ff;
    background-color: #f5faff;
}
```

--------------------------------

### Style Quick Reply Button Images

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the images within quick reply buttons. This selector allows overriding default border-radius properties for images.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-replies-container .webchat-template-button-image {
    background-color: black;
    border-radius: 10px;
}
```

--------------------------------

### Style Quick Reply Chat Bubble

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the chat bubble specifically for quick reply messages. This allows for distinct styling of quick reply message backgrounds and text.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-quick-reply-template-root .chat-bubble {
    background-color: red;
    font-size: 2rem;
}
```

--------------------------------

### Style Generic Modal Root Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Styles the root container for all modals, customizing overall appearance. Adjusts background, padding, and border-radius.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-modal-root {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}
```

--------------------------------

### Style Privacy Notice Root Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the border-radius, border, and padding of the main privacy notice container.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-privacy-notice-root {
    border-radius: 20px;
    border: 2px solid rgb(5, 5, 131);
    padding: 20px;
}
```

--------------------------------

### Cypress Command for Simulating Received Messages

Source: https://github.com/cognigy/webchat/blob/main/architecture-docs/quality-attributes.md

This Cypress command is used in integration tests to simulate receiving a message from the socket, aiding in testability.

```typescript
Cypress.Commands.add("receiveMessage", (message) => {
  cy.window().then((win) => {
    cy.get("body").then((body) => {
      win.webchat.receiveMessage(message);
    });
  });
});
```

--------------------------------

### Style Generic Chat Bubble

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the text bubbles for messages like Text, Quick Reply, etc. Sets background color and width.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row .chat-bubble {
    background-color: red;
    width: 500px;
}
```

--------------------------------

### Style Speech-to-Text Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the background color, border-radius, and border of the speech-to-text button.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-speech {
    background-color: #cfcfcf;
    border-radius: 50%;
    border: 2px solid black;
}
```

--------------------------------

### Style Speech-to-Text Button Animation

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Define the background color, border-radius, and animation for the speech-to-text button's active background.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-speech-background {
    background-color: #41cc00;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}
```

--------------------------------

### Style Previous Conversations Content Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Sets padding for the content area within the previous conversations screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-content {
    padding: 0px;
}
```

--------------------------------

### Register Analytics Service

Source: https://github.com/cognigy/webchat/blob/main/docs/analytics-api.md

Use `webchat.registerAnalyticsService` to execute a callback function when any event occurs within the Webchat. The callback receives an event object.

```javascript
webchat.registerAnalyticsService(event => {
	// react to the event that ocurred
});
```

--------------------------------

### Style Message Input Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Modify the background, padding, and border-radius of the container holding the message input.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-message-container {
    background: #f8f8f8;
    padding: 8px 0;
    border-radius: 8px;
}
```

--------------------------------

### Customize Default Cognigy Logo

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style the default Cognigy logo in the homescreen header when no custom logo is provided.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content .webchat-homescreen-header-cognigy-logo {
    width: 40px;
    height: 40px;
    border: 2px solid #41cc00;
    background-color: #f8f8f8;
}
```

--------------------------------

### Update Webchat Settings at Runtime

Source: https://github.com/cognigy/webchat/blob/main/docs/webchat-api.md

Dynamically updates Webchat settings during runtime. This method allows modifying specific settings without reinitializing the entire chat.

```javascript
// this will disable the unread message preview at runtime
webchat.updateSettings({
	unreadMessages: {
		enablePreview: false,
	},
});
```

--------------------------------

### Style Active Speech-to-Text Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Apply a box-shadow and border-radius to the speech-to-text button when it is active.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-speech-active {
    box-shadow: 0 0 8px #00cc66;
    border-radius: 50%
}
```

--------------------------------

### Customize Webchat Main Container Size

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

This CSS targets the main Webchat component to set its width and height. Use this to adjust the overall size of the widget.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
    width: 500px;
    height:500px;
}
```

--------------------------------

### Style Chat Options Footer Link

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Applies text decoration and padding to the footer link. This ensures the link is visually distinct and clickable.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-chat-options-footer-link {
    text-decoration: underline;
    padding: 10px;
}
```

--------------------------------

### Style Global List Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Modify the background color and add hover effects for the global button in the list template.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-global-button {
  background-color: #cfb00071;
}

[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-global-button:hover {
  background-color: #39801071;
}
```

--------------------------------

### Style Default Cognigy Logo in Header

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the size and border of the default Cognigy logo when no custom logo is provided in the header.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-logo-name-container .webchat-header-cognigy-logo {
    width: 32px;
    height: 32px;
    border: 2px solid red;
}
```

--------------------------------

### Style List Header Content

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Center align the content within the list header.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-content {
  text-align: center;
}
```

--------------------------------

### Style Individual File Attachment

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the background color and font size for individual file attachments within a message.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-media-template-file {
  background-color: white;
  font-size: 1rem;
}
```

--------------------------------

### Webchat Settings Interface Definition

Source: https://github.com/cognigy/webchat/blob/main/docs/embedding.md

Defines the structure for all configurable settings of the Cognigy Webchat. All settings are optional, and a full object is not required.

```typescript
interface IWebchatSettings {
	// Settings that are also configurable via the Endpoint Editor in Cognigy.AI
	layout: {
		title: string;
		logoUrl: string;
		useOtherAgentLogo: boolean;
		botAvatarName: string;
		botLogoUrl: string;
		agentAvatarName: string;
		agentLogoUrl: string;
		inputAutogrowMaxRows: number;
		enableInputCollation: boolean;
		inputCollationTimeout: number;
		dynamicImageAspectRatio: boolean;
		disableInputAutocomplete: boolean;
		enableGenericHTMLStyling: boolean;
		enablePeristentMenu: boolean;
		persistentMenu: {
			title: string;
			menuItems: {
				title: string;
				payload: string;
			}[];
		};
		disableHtmlContentSanitization: boolean;
		disableUrlButtonSanitization: boolean;
		watermark: "default" | "custom" | "none";
		watermarkText: string;
		watermarkUrl: string;
		disableBotOutputBorder: boolean;
		botOutputMaxWidthPercentage: number;
		chatWindowWidth: number;
	};
	colors: {
		primaryColor: string;
		secondaryColor: string;
		chatInterfaceColor: string;
		botMessageColor: string;
		userMessageColor: string;
		textLinkColor: string;
	};
	behavior: {
		enableTypingIndicator: boolean;
		messageDelay: number;
		inputPlaceholder: string;
		enableSTT: boolean;
		enableTTS: boolean;
		focusInputAfterPostback: boolean;
		enableConnectionStatusIndicator: boolean;
		collateStreamedOutputs: boolean;
		progressiveMessageRendering: boolean;
		renderMarkdown: boolean;
		scrollingBehavior: "alwaysScroll" | "scrollUntilLastInputAtTop";
	};
	startBehavior: {
		startBehavior: "none" | "button" | "injection";
		getStartedPayload: string;
		getStartedData: object;
		getStartedText: string;
		getStartedButtonText: string;
	};
	fileStorageSettings: {
		enabled: boolean;
		dropzoneText: string;
	};
	businessHours: {
		enabled: boolean;
		mode: "inform" | "hide" | "disable";
		text: string;
		title: string;
		timeZone: string;
		times: {
			startTime: string;
			endTime: string;
			weekDay: string;
		}[];
	};
	unreadMessages: {
		enableIndicator: boolean;
		enableBadge: boolean;
		enablePreview: boolean;
		enableSound: boolean;
		unreadMessageTitleText: string;
		unreadMessageTitleTextPlural: string;
	};
	homeScreen: {
		enabled: boolean;
		welcomeText: string;
		background: {
			imageUrl: string;
			color: string;
		};
		startConversationButtonText: string;
		previousConversations: {
			enabled: boolean;
			enableDeleteAllConversations: boolean;
			buttonText: string;
			title: string;
		};
		conversationStarters: {
			enabled: boolean;
			starters: {
				type: "postback" | "web_url" | "phone_number";
				title: string;
				url: string;
				payload: string;
			}[];
		};
	};
	teaserMessage: {
		text: string;
		teaserMessageDelay: number;
		showInChat: boolean;
		conversationStarters: {
			enabled: boolean;
			starters: {
				type: "postback" | "web_url" | "phone_number";
				title: string;
				url: string;
				payload: string;
			}[];
		};
	};
	chatOptions: {
		enabled: boolean;
		title: string;
		quickReplyOptions: {
			enabled: boolean;
			sectionTitle: string;
			quickReplies: {
				type: "postback" | "web_url" | "phone_number";
				title: string;
				url: string;
				payload: string;
			}[];
		};
		showTTSToggle: boolean;
		activateTTSToggle: boolean;
		labelTTSToggle: string;
		rating: {
			enabled: "no" | "once" | "always";
			title: string;
			commentPlaceholder: string;
			submitButtonText: string;
			eventBannerText: string;
		};
		enableDeleteConversation: boolean;
		footer: {
			enabled: boolean;
			items: {
				title: string;
				url: string;
			}[];
		};
	};
	privacyNotice: {
		enabled: boolean;
		title: string;
		text: string;
		submitButtonText: string;
		urlText: string;
		url: string;
	};
	fileAttachmentMaxSize: number;
	maintenance: {
		enabled: boolean;
		mode: "inform" | "hide" | "disable";
		text: string;
		title: string;
	};
	demoWebchat: {
		enabled: boolean;
		backgroundImageUrl: string;
		position: "centered" | "bottomRight";
	};

	// Settings related to the webchat browser embedding
	// These settings are NOT configurable via the Endpoint Editor in Cognigy.AI
	embeddingConfiguration: {
		_endpointTokenUrl: string;
		awaitEndpointConfig: boolean;
		disableLocalStorage: boolean;
		disablePersistentHistory: boolean;
		useSessionStorage: boolean;
		connectivity: {
			enabled: boolean;
			mode: string;
			text: string;
			timeout: number;
			title: string;
		};
	};
	// Custom translations for texts that are not possible to configure in endpoint editor
	customTranslations?: {
		network_error?: string;
		no_network?: string;
		reconnect?: string;
		reconnecting?: string;
		delete_all_conversations?: string;
		delete_all_conversations_confirmation?: string;
		delete_conversation?: string;
		delete_conversation_confirmation?: string;
		delete?: string;
		delete_anyway?: string;
		cancel?: string;

```

--------------------------------

### Style Previous Conversations Actions Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customizes the background, border, and layout for the actions container at the bottom of the previous conversations screen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-prev-conversations-actions {
    background: #f5faff;
    border-top: 2px solid red;
}
```

--------------------------------

### Style Adaptive Card Wrapper

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the width of the container element for Adaptive Card messages.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .adaptivecard-wrapper {
  width: 300px;
}
```

--------------------------------

### Style Persistent Menu Item Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the layout, spacing, and border of the container holding persistent menu items.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-input-persistent-menu-item-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    margin: 5px;
}
```

--------------------------------

### Customize Teaser Message Header Logo

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Apply custom styling, such as borders, to the logo displayed in the teaser message header.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-header-logo {
    border: 2px solid rgb(5, 5, 131);
}
```

--------------------------------

### Style List Header Subtitle

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Change the text color for the subtitle within the list header.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-subtitle {
  color: green;
}
```

--------------------------------

### Set Bot Avatar Override

Source: https://github.com/cognigy/webchat/blob/main/docs/custom-avatars.md

Send this JSON message to set a custom avatar URL for the bot. Ensure the URL points to a valid image.

```json
{
	"_webchat": {
		"botAvatarOverrideUrl": "https://placewaifu.com/image/200/200"
	}
}
```

--------------------------------

### Style List Element Subtitle

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Change the text color for the subtitle of each list element.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element-subtitle {
  color: yellow;
}
```

--------------------------------

### Style AI Agent Notice Text

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Modify the text style for notices indicating the user is chatting with an AI agent. Control background, text color, and font size.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-log-ai-agent-notice-text {
    background: #eaf6ff;
    color: #0055ff;
    font-size: 1rem;
}
```

--------------------------------

### Customize Homescreen Actions Container

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Modify the top margin for the container holding actions on the homescreen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-actions {
    margin-top: 15px;
}
```

--------------------------------

### Customize Teaser Message Button Appearance

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style the appearance of the individual buttons displayed below the teaser message bubble.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-button {
    background-color: rgb(5, 5, 131);
    color: white;
}
```

--------------------------------

### Style User Message Row

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the container specifically for user messages. Sets padding, background, and border-radius.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.user {
    padding: 12px;
    background-color: #a5a5a5;
    border-radius: 10px;
}
```

--------------------------------

### Style Date Picker Weekdays

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the appearance of the weekdays in the calendar, such as making labels uppercase.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .flatpickr-weekday {
  text-transform: uppercase;
}
```

--------------------------------

### Style Date Picker Footer

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Adjust the padding of the footer element in the Date Picker plugin for custom spacing.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-plugin-date-picker-footer {
  padding: 1em 3em;
}
```

--------------------------------

### Customize Homescreen Header

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Modify the margin for the header section of the homescreen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-header {
    margin: 10px;
}
```

--------------------------------

### Style Add Attachments Button

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the border-radius and background color of the button used to open the file attachment section.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-input-button-add-attachments {

    border-radius: 20px;
    background-color: white;
}
```

--------------------------------

### Style List Element Title

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Change the text color for the title of each list element.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-element-title {
  color: yellow;
}
```

--------------------------------

### Style List Header Title

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Change the text color for the title within the list header.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-list-template-header-title {
  color: green;
}
```

--------------------------------

### Style User Chat Bubble

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the text bubbles specifically for user messages. Sets background, width, and font size.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.user .chat-bubble {
    background-color: red;
    width: 500px;
    font-size: 1rem;
}
```

--------------------------------

### Customize Homescreen Content Area

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Set the background color for the main content area of the homescreen.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-homescreen-content {
    background-color: black;
}
```

--------------------------------

### Style Chat Options TTS Option Root

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customizes the background and padding of the container for the Text-to-Speech toggle option. Use this to adjust the overall appearance of the TTS option section.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-tts-option-root {
    background: #f5faff;
    padding: 12px 20px;
    border-radius: 8px;
}
```

--------------------------------

### Customize Teaser Message Header Title

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Style the title displayed in the teaser message header, adjusting font size, weight, and color.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat] .webchat-teaser-message-header-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: rgb(5, 5, 131);
}
```

--------------------------------

### Style Agent Chat Bubble

Source: https://github.com/cognigy/webchat/blob/main/docs/css-customization.md

Customize the text bubbles for agent messages. Sets background color and width.

```CSS
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-message-row.agent .chat-bubble {
    background-color: red;
    width: 500px;
}
```

--------------------------------

### Webchat Settings Interface

Source: https://github.com/cognigy/webchat/blob/main/docs/embedding.md

Defines the structure for configuring the Cognigy Webchat widget's appearance and behavior. This includes options for date pickers, aria labels, and various widget settings that are not configurable via the Endpoint Editor.

```typescript
interface SettingsInterface {
	datePickerMonthLabel?: string;
	datePickerYearLabel?: string;
	ariaLabels?: {
		chatRegion?: string;
		scrollToBottom?: string;
		closeDialog?: string;
		togglePersistentMenu?: string;
		addAttachment?: string;
		speechToText?: string;
		sendMessage?: string;
		removeFileAttachment?: string;
		closeConnectionWarning?: string;
		goBack?: string;
		deleteAllConversations?: string;
		chatOptions?: string;
		minimizeChat?: string;
		closeChat?: string;
		openChat?: string;
		unreadMessages?: string;
		unreadMessageSingularText?: string;
		unreadMessagePluralText?: string;
		closeTeaserMessage?: string;
		thumbsUp?: string;
		thumbsDown?: string;
		openConversation?: string;
		chatHistory?: string;
		homeScreen?: string;
		newMessagePreview?: string;
		opensInNewTab?: string;
		audioPlaybackProgress?: string;
		pauseAudio?: string;
		playAudio?: string;
		playVideo?: string;
		downloadTranscript?: string;
		closeDatePicker?: string;
		viewImageInFullsize?: string;
		fullSizeImageViewerTitle?: string;
		downloadFullsizeImage?: string;
		closeFullsizeImageModal?: string;
		datePickerPreviousMonth?: string;
		datePickerNextMonth?: string;
		actionButtonPositionText?: string;
		buttonGroupLabel?: string;
		slidesCountText?: string;
		slide?: string;
		listItemGroupLabel?: string;
		imageContent?: {
			downloadable?: string;
			nonDownloadable?: string;
		};
		videoContent?: {
			withTranscriptAndCaptions?: string;
			withTranscript?: string;
			withCaptions?: string;
			withoutTranscriptAndCaptions?: string;
		};
		audioContent?: {
			withTranscript?: string;
			withoutTranscript?: string;
		};
		fileContent?: {
			singleFile?: string;
			multipleFiles?: string;
		};
		messageHeader?: {
			user?: string;
			bot?: string;
			timestamp?: string;
		};
		audioTimeRemaining?: string;
	};
}

	// Additional Settings to configure the webchat widget behavior
	// These settings are NOT configurable via the Endpoint Editor in Cognigy.AI
	widgetSettings: {
		disableDefaultReplyCompatiblityMode: boolean;
		enableStrictMessengerSync: boolean;
		disableHtmlInput: boolean;
		disableInputAutofocus: boolean;
		disableRenderURLsAsLinks: boolean;
		disableTextInputSanitization: boolean;
		disableToggleButton: boolean;
		disableTeaserMarkdownRemoval: boolean;
		enableAutoFocus: boolean;
		enableInjectionWithoutEmptyHistory: boolean;
		enableFocusTrap: boolean;
		enableDefaultPreview: boolean;
		ignoreLineBreaks: boolean;
		STTLanguage: string;
		customAllowedHtmlTags?: string[];
		sourceDirectionMapping: {
			agent: TSourceDirection;
			bot: TSourceDirection;
			user: TSourceDirection;
		};
		sourceColorMapping: {
			agent: TSourceColor;
			bot: TSourceColor;
			user: TSourceColor;
		};
	};
}
```