# Feedback & Communication / Contact Channels Multi-channel contact support options with phone, chat, email, and walk-in centre cards. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-contact-channels--introduction ## Pattern variants - Contact Channels: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-feedback-communication-contact-channels--contact-channels ## When to use this pattern Use Feedback & Communication / Contact Channels 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 / Contact Channels. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Contact Channels — Contact Channels HTML: ```html

Still need help?

Contact our support team — we are here to help.

phone
Phone Support 1800-XXX-XXXX · Toll free · Mon-Sat 9AM-6PM
forum
Live Chat Available now · Estimated wait 1-2 minutes
mail
Email Support Response within 2 working days
directions_walk
Walk-in Centre Visit your nearest Common Service Centre
``` React: ```jsx import React from 'react'; const FeedbackCommunicationContactChannelsExample1Demo = () => ( <>

Still need help?

Contact our support team — we are here to help.

phone
Phone Support 1800-XXX-XXXX · Toll free · Mon-Sat 9AM-6PM
forum
Live Chat Available now · Estimated wait 1-2 minutes
mail
Email Support Response within 2 working days
directions_walk
Walk-in Centre Visit your nearest Common Service Centre
File a complaint about this portal
Powered by -
); export default FeedbackCommunicationContactChannelsExample1Demo; ``` Angular: ```html

Still need help?

Contact our support team — we are here to help.

phone
Phone Support 1800-XXX-XXXX · Toll free · Mon-Sat 9AM-6PM
forum
Live Chat Available now · Estimated wait 1-2 minutes
mail
Email Support Response within 2 working days
directions_walk
Walk-in Centre Visit your nearest Common Service Centre
``` ### 2. Introduction — Introduction HTML: ```html
Patterns

Contact Channels

Multi-channel contact support options with phone, chat, email, and walk-in centre cards.

support_agent

Contact Channels

Multi-channel contact support options with phone, chat, email, and walk-in centre cards.

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

Contact Channels

Multi-channel contact support options with phone, chat, email, and walk-in centre cards.

support_agent

Contact Channels

Multi-channel contact support options with phone, chat, email, and walk-in centre cards.

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

Contact Channels

Multi-channel contact support options with phone, chat, email, and walk-in centre cards.

support_agent

Contact Channels

Multi-channel contact support options with phone, chat, email, and walk-in centre cards.

```