Help Desk
Your user's are having hard time to ask questions? help desk is here to help you, plug in the form and grow those numbers.
Examples
Basic usage of the help desk component.
Note: enable one form at a time the last one holds the preference.
Look at the right side of the screen to see the help desk.
How can we help you?
Send us a message and we'll get back to you as soon as possible.
Help desk when we have an error.
Look at the right side of the screen to see the help desk.
Customized help desk.
Look at the right side of the screen to see the help desk.
Installation
npx shadcn@latest add "https://aetherui.in/c/help-desk.json"
Component Props
You can use the HelpDesk component by passing the following props to it.
HelpDeskProvider Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content to be displayed inside the help desk. | |
| defaultOpen | boolean (Optional) | false | Initial open state of the help desk. |
| open | boolean (Optional) | false | Control the open state (controlled mode). |
| onOpenChange | function (Optional) | Callback function to be called open state changes. | |
| status | 'idle' | 'submitting' | 'success' | 'error' | idle | Status of the help desk. |
| onSubmit | function (Optional) | Callback function to be called when the submit button is clicked. | |
| ...props | any | Additional props to be passed to the help desk. |
HelpDesk Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content to be displayed inside the help desk. | |
| title | string (Optional) | Query(title) | Title to be displayed in the help desk. |
| subtitle | string (Optional) | Query(subtitle) | Subtitle to be displayed in the help desk. |
| className | string | Additional class names to be applied to the help desk. | |
| ...props | any | Additional props to be passed to the help desk. |
HelpDeskFomr Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional class names to be applied to the help desk form. | |
| btnClassName | string | Additional class names to be applied to the help desk form submit button. | |
| ...props | any | Additional props to be passed to the help desk form. |
HelpDeskButton Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | Additional class names to be applied to the help desk button. | |
| ...props | any | Additional props to be passed to the help desk button. |