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

HelpAndSupportTrigger

HelpAndSupportPopover

HelpAndSupportCard

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.)