# Feedback & Communication / Live Chat Conversation Live chat conversation interface with message bubbles, timestamps, and quick reply options. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-live-chat-conversation--introduction ## Pattern variants - Live Chat Conversation: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-live-chat-conversation--live-chat-conversation ## When to use this pattern Use Feedback & Communication / Live Chat Conversation when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Feedback & Communication / Live Chat Conversation. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Patterns

Live Chat

Live chat conversation interface with message bubbles, timestamps, and quick reply options.

forum

Live Chat Conversation

Real-time chat conversation interface with multimedia message support.

``` React: ```jsx import React from 'react'; const FeedbackCommunicationLiveChatConversationExample1Demo = () => ( <>
Patterns

Live Chat

Live chat conversation interface with message bubbles, timestamps, and quick reply options.

forum

Live Chat Conversation

Real-time chat conversation interface with multimedia message support.

); export default FeedbackCommunicationLiveChatConversationExample1Demo; ``` Angular: ```html
Patterns

Live Chat

Live chat conversation interface with message bubbles, timestamps, and quick reply options.

forum

Live Chat Conversation

Real-time chat conversation interface with multimedia message support.

``` ### 2. Live Chat Conversation — Live Chat Conversation HTML: ```html

Live Chat Support

Chat with a support agent for real-time help with your application.

check_circle
Queue agent available Estimated wait time: 1-2 mins

Connect now to discuss your application with our support team. Average response time under 2 minutes.

Powered by -

How was your experience?

``` React: ```jsx import React from 'react'; const FeedbackCommunicationLiveChatConversationExample2Demo = () => ( <>
{/* Help Centre & Contact Support Section */}
{/* Header */}

Live Chat Support

Chat with a support agent for real-time help with your application.

{/* Status Banner */}
check_circle
Queue agent available Estimated wait time: 1-2 mins
{/* Description */}

Connect now to discuss your application with our support team. Average response time under 2 minutes.

{/* Action Buttons */}
{/* Footer Branding */}
Powered by -
{/* chat modal */}

How was your experience?

); export default FeedbackCommunicationLiveChatConversationExample2Demo; ``` Angular: ```html

Live Chat Support

Chat with a support agent for real-time help with your application.

check_circle
Queue agent available Estimated wait time: 1-2 mins

Connect now to discuss your application with our support team. Average response time under 2 minutes.

Powered by -

How was your experience?

```