HelpAndSupport

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

Figma LibraryView in StorybookView 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

PropDefaultDescription
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?280number
The max width of the dropdown panel popover.
popoverOffset?8number
The offset of the dropdown panel popover.
popoverPlacement?'bottom''bottom' | 'bottom-start' | 'bottom-end'| 'top-start'| 'top-end'
The placement of the dropdown panel popover relative to the dropdown menu trigger.
strategy?'absolute''absolute' | 'fixed'
The strategy used to position the floating element.
onClose?_function
Callback triggered on closing the popover and will activate upon pressing "Esc" or clicking on the overlay.

HelpAndSupportTrigger

PropDefaultDescription
children_React.ReactNode
The trigger content
variant?'neutralSecondary''accentPrimary' | 'accentSecondary'| 'criticalPrimary'| 'criticalTertiary'| 'neutralPrimary'| 'neutralSecondary'| 'neutralSecondaryIntense'| 'neutralTertiary'
Variant of the button.
size?'standard''large' | 'standard' | 'small'
Size of the button.
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?falseboolean
If true, the button is disabled.
isLoading?falseboolean
If true ,the button will display a loading indicator.
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.

HelpAndSupportPopover

PropDefaultDescription
title_string
By default rendered as Heading with H3 tag.
description_string
Description for the popover.
images?_HelpAndSupportImages[]
It should follow this pattern, Images to be rendered for the popover.
{
src: string;
name: string;
}
Note: By default 3 images are mandatory if provided more , rest will be ignored.
orientation'vertical''vertical' | 'horizontal'
The layout of the card
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?trueboolean
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.

HelpAndSupportCard

PropDefaultDescription
title_string
By default rendered as Heading with H3 tag.
description_string
Description for the popover.
images?_HelpAndSupportImages[]
It should follow this pattern, Images to be rendered for the popover.
{
src: string;
name: string;
}
Note: By default 3 images are mandatory if provided more , rest will be ignored.
orientation'vertical''vertical'|'horizontal'
The layout of the card
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 PartsDescription
rootThe root container element of the popover in desktop viewport.
headerThe header section containing title, description, and avatars.
titleThe Heading which is by default H3 tag.
descriptionThe description text element.
avatarsContainerWrapper for the avatar images
textContainerWrapper for title and description text.
contentContainer for custom children content (buttons, links, etc.)
sheetThe mobile sheet container.
sheetWrapperWrapper element for the mobile sheet.
sheetContentContent area within the mobile sheet.
closeButtonThe 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 PartsDescription
rootThe root container element of the popover in desktop viewport.
headerThe header section containing title, description, and avatars.
titleThe Heading which is by default H3 tag.
descriptionThe description text element.
avatarsContainerWrapper for the avatar images
textContainerWrapper for title and description text.
contentContainer for custom children content (buttons, links, etc.)