HelpAndSupport

A comprehensive, responsive help and support widget that provides users with easy access to customer support options through a trigger-popover interface.

Figma Library View in Storybook View in Playroom

Quick Start

Installation: npm install @adaptavant/help-and-support
Import: import { HelpAndSupport } from '@adaptavant/help-and-support';

Basic Usage

The HelpAndSupport widget provides a comprehensive support interface with a trigger button and popover containing multiple action options. This example shows the basic usage with a default trigger button, avatar images, and various support options including chat, phone, booking, and video meeting capabilities.

const images = [
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_1.png",
		name: "Support Agent 1",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_2.png",
		name: "Support Agent 2",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_3.png",
		name: "Support Agent 3",
	},
];

const buttonSize = useIsMobile() ? "large" : "standard";
const textLinkClasses = useIsMobile() ? "text-body-14 h-10" : "text-body-12 h-8";

return (
	<Box className="flex justify-center p-4">
		<HelpAndSupport
			closeButtonPropsForMobile={{
				label: "Dismiss",
				onClick: () => alert("Close button clicked"),
			}}
		>
			<HelpAndSupportTrigger iconStart={CustomerFilledIcon}>
				Connect with us
			</HelpAndSupportTrigger>
			<HelpAndSupportPopover
				description="Reach a real person, 24/7"
				images={images}
				title="Need Help?"
			>
				<Button iconStart={ChatIcon} size={buttonSize}>
					Chat with Us
				</Button>
				<ButtonLink
					href="#"
					iconStart={PhoneIcon}
					size={buttonSize}
					variant="neutralSecondary"
				>
					Call +1-800-716-9964
				</ButtonLink>
				<ButtonLink
					href="#"
					iconStart={CalendarFoldIcon}
					size={buttonSize}
					variant="neutralSecondary"
				>
					Book With an Expert
				</ButtonLink>

				<TextLink
					className={`flex items-center justify-center ${textLinkClasses}`}
					href="#"
					variant="neutralSecondary"
				>
					Visit the Support Center
				</TextLink>
			</HelpAndSupportPopover>
		</HelpAndSupport>
	</Box>
);

View in Playroom

Custom Trigger

The HelpAndSupport widget supports fully custom triggers when you need more control over the trigger element. Instead of using the default HelpAndSupportTrigger, you can use any component as a trigger - such as an IconButton, custom box, avatar, or any other interactive element. The widget provides triggerProps that you spread onto your custom trigger to handle all the necessary interactions and accessibility attributes.

const images = [
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_1.png",
		name: "Support Agent 1",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_2.png",
		name: "Support Agent 2",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_3.png",
		name: "Support Agent 3",
	},
];

const buttonSize = useIsMobile() ? "large" : "standard";
const textLinkClasses = useIsMobile() ? "text-body-14 h-10" : "text-body-12 h-8";

return (
	<Box className="flex justify-center p-4">
		<HelpAndSupport 
			closeButtonPropsForMobile={{
				label: "Dismiss",
				onClick: () => alert("Close button clicked"),
			}}
			popoverPlacement="bottom-start"
		>
			{({ triggerProps }) => {
				return (
					<>
						<IconButton
							{...triggerProps}
							aria-label="Toggle Help and Support menu"
							icon={SupportFilledIcon}
							variant="neutralSecondary"
						/>

						<HelpAndSupportPopover
							description="Reach a real person, 24/7"
							images={images}
							title="Need Help?"
						>
							<Button iconStart={ChatIcon} size={buttonSize}>
								Chat with Us
							</Button>
							<ButtonLink
								href="#"
								iconStart={PhoneIcon}
								size={buttonSize}
								variant="neutralSecondary"
							>
								Call +1-800-716-9964
							</ButtonLink>
							<ButtonLink
								href="#"
								iconStart={CalendarFoldIcon}
								size={buttonSize}
								variant="neutralSecondary"
							>
								Book With an Expert
							</ButtonLink>

							<TextLink
								className={`flex items-center justify-center ${textLinkClasses}`}
								href="#"
								variant="neutralSecondary"
							>
								Visit the Support Center
							</TextLink>
						</HelpAndSupportPopover>
					</>
				);
			}}
		</HelpAndSupport>
	</Box>
);

View in Playroom

HelpAndSupportCard

The HelpAndSupportCard component can be used as a standalone card or as a wrapper around the HelpAndSupport widget for enhanced presentation. This approach is useful when you need to display support information prominently on a page, such as in help sections, empty states, or dedicated support areas. The card provides a structured layout with title, description, and avatar images, while containing the interactive help widget as its child.

Need Help with your Booking Page?We're real people here to help you 24/7

const images = [
  {
    src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_1.png",
    name: "Support Agent 1",
  },
  {
    src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_2.png",
    name: "Support Agent 2",
  },
  {
    src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_3.png",
    name: "Support Agent 3",
  },
];

const buttonSize = useIsMobile() ? 'large' : 'standard';
const textLinkClasses = useIsMobile() ? 'text-body-14 h-10' : 'text-body-12 h-8';

return (
  <HelpAndSupportCard
    description="We're real people here to help you 24/7"
    images={images}
    title="Need Help with your Booking Page?"
  >
    <HelpAndSupport 
      closeButtonPropsForMobile={{
        label: "Dismiss",
        onClick: () => alert("Close button clicked"),
      }}
    >
      <HelpAndSupportTrigger iconStart={CustomerFilledIcon}>
        Connect with us
      </HelpAndSupportTrigger>
      <HelpAndSupportPopover
        description="Reach a real person, 24/7"
        images={images}
        title="Need Help?"
      >
       	<Button iconStart={ChatIcon} size={buttonSize}>
								Chat with Us
							</Button>
							<ButtonLink
								href="#"
								iconStart={PhoneIcon}
								size={buttonSize}
								variant="neutralSecondary"
							>
								Call +1-800-716-9964
							</ButtonLink>
							<ButtonLink
								href="#"
								iconStart={CalendarFoldIcon}
								size={buttonSize}
								variant="neutralSecondary"
							>
								Book With an Expert
							</ButtonLink>

							<TextLink
								className={`flex items-center justify-center ${textLinkClasses}`}
								href="#"
								variant="neutralSecondary"
							>
								Visit the Support Center
							</TextLink>
      </HelpAndSupportPopover>
    </HelpAndSupport>
  </HelpAndSupportCard>
);

View in Playroom

Card Orientation

The HelpAndSupportCard supports two orientation modes: vertical (default) and horizontal. This example demonstrates the horizontal orientation, which displays the avatar images and text content side-by-side for a more compact layout. The horizontal orientation automatically adapts to vertical layout on smaller screens to ensure optimal mobile experience and readability.

Need Help with your Booking Page?We're real people here to help you 24/7

const images = [
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_1.png",
		name: "Support Agent 1",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_2.png",
		name: "Support Agent 2",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_3.png",
		name: "Support Agent 3",
	},
];

const buttonSize = useIsMobile() ? "large" : "standard";
const textLinkClasses = useIsMobile() ? "text-body-14 h-10" : "text-body-12 h-8";

return (
	<HelpAndSupportCard
		description="We're real people here to help you 24/7"
		images={images}
		orientation="horizontal"
		title="Need Help with your Booking Page?"
	>
		<HelpAndSupport 
			closeButtonPropsForMobile={{
				label: "Dismiss",
				onClick: () => alert("Close button clicked"),
			}}
		>
			<HelpAndSupportTrigger iconStart={CustomerFilledIcon}>
				Connect with us
			</HelpAndSupportTrigger>
			<HelpAndSupportPopover
				description="Reach a real person, 24/7"
				images={images}
				title="Need Help?"
			>
				<Button iconStart={ChatIcon} size={buttonSize}>
					Chat with Us
				</Button>
				<ButtonLink
					href="#"
					iconStart={PhoneIcon}
					size={buttonSize}
					variant="neutralSecondary"
				>
					Call +1-800-716-9964
				</ButtonLink>
				<ButtonLink
					href="#"
					iconStart={CalendarFoldIcon}
					size={buttonSize}
					variant="neutralSecondary"
				>
					Book With an Expert
				</ButtonLink>

				<TextLink
					className={`flex items-center justify-center ${textLinkClasses}`}
					href="#"
					variant="neutralSecondary"
				>
					Visit the Support Center
				</TextLink>
			</HelpAndSupportPopover>
		</HelpAndSupport>
	</HelpAndSupportCard>
);

View in Playroom

API Reference

HelpAndSupport

Props	Type	Description	Default
`children`	`((menuState: { isOpen: boolean; triggerProps: TriggerProps<React.ElementType>; }) => React.ReactNode) \| React.ReactNode`	Accepts either a React node or a render function. The render function provides the menu's state (isOpen) and accessibility/interaction props (triggerProps) for the trigger.	_
`closeButtonPropsForMobile?`	`object`	To render and customise Sheet close button contains `label` and `onClick`	_
`closeButtonPropsForMobile.label`	`string`	Aria label content for the close Icon button	_
`closeButtonPropsForMobile.onClick`	`function`	Callback function to be invoked when the close button is clicked.	_
`popoverMaxWidth?`	`number`	The max width of the dropdown panel popover.	`280`
`popoverOffset?`	`number`	The offset of the dropdown panel popover.	`8`
`popoverPlacement?`	`'bottom' \| 'bottom-start' \| 'bottom-end'\| 'top-start'\| 'top-end'`	The placement of the dropdown panel popover relative to the dropdown menu trigger.	`'bottom'`
`strategy?`	`'absolute' \| 'fixed'`	The strategy used to position the floating element.	`'absolute'`
`onClose?`	`function`	Callback triggered on closing the popover and will activate upon pressing "Esc" or clicking on the overlay.	_

HelpAndSupportTrigger

Prop	Type	Description	Default
`children`	`React.ReactNode`	The trigger content	_
`variant?`	`'accentPrimary' \| 'accentSecondary'\| 'criticalPrimary'\| 'criticalTertiary'\| 'neutralPrimary'\| 'neutralSecondary'\| 'neutralSecondaryIntense'\| 'neutralTertiary'`	Variant of the button.	`'neutralSecondary'`
`size?`	`'large' \| 'standard' \| 'small'`	Size of the button.	`'standard'`
`iconStart?`	`Icon`	The icon to display before the buttons children.	_
`iconEnd?`	`Icon`	The icon to display after the buttons children.	_
`loadingLabel?`	`string`	Text to read out to assistive technologies when button is loading.	_
`isDisabled?`	`boolean`	If true, the button is disabled.	`false`
`isLoading?`	`boolean`	If true ,the button will display a loading indicator.	`false`
`isPressed?`	`boolean`	If true, the button will be visually styled as pressed and the `aria-pressed` attribute will be set accordingly.	_
`form?`	`string`	Specifies the form element the button is associated with.	_
`onBlur?`	`function`	Function to call when the button loses focus.	_
`onFocus?`	`function`	Function to call when the button receives focus.	_

Props	Type	Description	Default
`title`	`string`	By default rendered as Heading with H3 tag.	_
`description`	`string`	Description for the popover.	_
`images?`	`HelpAndSupportImages[]` It should follow this pattern `{ src: string; name: string; }`	Images to be rendered for the popover. Note: By default 3 images are mandatory if provided more , rest will be ignored.	_
`orientation`	`'vertical'\|'horizontal'`	The layout of the card	`'vertical'`
`itemList`	`{ title: string; description: string }[]`	List of Pro plan benefits shown in the modal body.	_
`children?`	`ReactNode`	Additional actionable and Interactive elements can fit in here.	_
`shouldUsePortal?`	`boolean`	Determines whether the Popover should be rendered in a React Portal. If `true`, the Popover will be rendered outside the DOM hierarchy of the parent component.	`true`

HelpAndSupportCard

Props	Type	Description	Default
`title`	`string`	By default rendered as Heading with H3 tag.	_
`description`	`string`	Description for the popover.	_
`images?`	`HelpAndSupportImages[]` It should follow this pattern `{ src: string; name: string; }`	Images to be rendered for the popover. Note: By default 3 images are mandatory if provided more , rest will be ignored.	_
`orientation`	`'vertical'\|'horizontal'`	The layout of the card	`'vertical'`
`itemList`	`{ title: string; description: string }[]`	List of Pro plan benefits shown in the modal body.	_
`children?`	`ReactNode`	Additional actionable and Interactive elements can fit in here.	_

Style API

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

HelpAndSupport parts

const images = [
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_1.png",
		name: "Support Agent 1",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_2.png",
		name: "Support Agent 2",
	},
	{
		src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_3.png",
		name: "Support Agent 3",
	},
];

const buttonSize = useIsMobile() ? "large" : "standard";
const textLinkClasses = useIsMobile() ? "text-body-14 h-10" : "text-body-12 h-8";

return (
	<Box className="flex justify-center p-4">
		<HelpAndSupport
			closeButtonPropsForMobile={{
				label: "Dismiss",
				onClick: () => alert("Close button clicked"),
			}}
		>
			<HelpAndSupportTrigger iconStart={CustomerFilledIcon}>
				Connect with us
			</HelpAndSupportTrigger>
			<HelpAndSupportPopover
				classNames={{
					title: "text-positive",
					header: "border-b ",
					description: "text-critical",
					avatarsContainer: "bg-neutral-pressed",
					textContainer: "p-4",
					content: "w-full",
					sheetContent: "bg-inverse-tertiary-pressed",
					closeButton: "bg-critical" 
				}}
				description="Reach a real person, 24/7"
				images={images}
				title="Need Help?"
			>
				<Button iconStart={ChatIcon} size={buttonSize}>
					Chat with Us
				</Button>
				<ButtonLink
					href="#"
					iconStart={PhoneIcon}
					size={buttonSize}
					variant="neutralSecondary"
				>
					Call +1-800-716-9964
				</ButtonLink>
				<ButtonLink
					href="#"
					iconStart={CalendarFoldIcon}
					size={buttonSize}
					variant="neutralSecondary"
				>
					Book With an Expert
				</ButtonLink>

				<TextLink
					className={`flex items-center justify-center ${textLinkClasses}`}
					href="#"
					variant="neutralSecondary"
				>
					Visit the Support Center
				</TextLink>
			</HelpAndSupportPopover>
		</HelpAndSupport>
	</Box>
);

View in Playroom

Stylable Parts	Description
root	The root container element of the popover in desktop viewport.
header	The header section containing title, description, and avatars.
title	The Heading which is by default H3 tag.
description	The description text element.
avatarsContainer	Wrapper for the avatar images
textContainer	Wrapper for title and description text.
content	Container for custom children content (buttons, links, etc.)
sheet	The mobile sheet container.
sheetWrapper	Wrapper element for the mobile sheet.
sheetContent	Content area within the mobile sheet.
closeButton	The close button for mobile sheet.

HelpAndSupportCard parts

Need Help with your Booking Page?We're real people here to help you 24/7

const images = [
  {
    src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_1.png",
    name: "Support Agent 1",
  },
  {
    src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_2.png",
    name: "Support Agent 2",
  },
  {
    src: "https://assets.anywhereworks.com/anywhereworks/app-assets/images/help_support_image_3.png",
    name: "Support Agent 3",
  },
];

const buttonSize = useIsMobile() ? 'large' : 'standard';

return (
  <HelpAndSupportCard
    className="shadow-20"
    classNames={{
      title: "text-positive",
      header: "border-b",
      description: "text-critical",
      avatarsContainer: "bg-neutral-pressed",
      textContainer: "p-4",
      content: "w-full"
    }}
    description="We're real people here to help you 24/7"
    images={images}
    title="Need Help with your Booking Page?"
  >
    <Button iconStart={ChatIcon} size={buttonSize} variant="neutralSecondary">
      Chat with Us
    </Button>
  </HelpAndSupportCard>
);

View in Playroom

Stylable Parts	Description
root	The root container element of the popover in desktop viewport.
header	The header section containing title, description, and avatars.
title	The Heading which is by default H3 tag.
description	The description text element.
avatarsContainer	Wrapper for the avatar images
textContainer	Wrapper for title and description text.
content	Container for custom children content (buttons, links, etc.)

HelpAndSupport

Quick Start

Basic Usage​

Custom Trigger​

HelpAndSupportCard​

Card Orientation​

API Reference​

HelpAndSupport​

HelpAndSupportTrigger​

HelpAndSupportPopover​

HelpAndSupportCard​

Style API​

HelpAndSupport parts​

HelpAndSupportCard parts​

Basic Usage

Custom Trigger

HelpAndSupportCard

Card Orientation

API Reference

HelpAndSupport

HelpAndSupportTrigger

HelpAndSupportPopover

HelpAndSupportCard

Style API

HelpAndSupport parts

HelpAndSupportCard parts