# Feedback & Communication / Live Chat Init Live chat initiation card with queue availability status and action buttons. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-live-chat-init--introduction ## Pattern variants - Live Chat Init: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-live-chat-init--live-chat-init ## When to use this pattern Use Feedback & Communication / Live Chat Init 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 Init. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Patterns

Live Chat Init

Live chat initiation card with queue availability status and action buttons.

chat

Live Chat Init

Live chat initiation card with queue availability status and action buttons.

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

Live Chat Init

Live chat initiation card with queue availability status and action buttons.

chat

Live Chat Init

Live chat initiation card with queue availability status and action buttons.

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

Live Chat Init

Live chat initiation card with queue availability status and action buttons.

chat

Live Chat Init

Live chat initiation card with queue availability status and action buttons.

``` ### 2. Live Chat Init — Live Chat Init 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 -
``` React: ```jsx import React from 'react'; const FeedbackCommunicationLiveChatInitExample2Demo = () => ( <>

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 -
); export default FeedbackCommunicationLiveChatInitExample2Demo; ``` 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 -
```