- Implementation
- SingleRecommendationCard API
- Shared Types
Common Examples
Basic Usage
Present a single-select choice:import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SingleSelectExample() {
const handleSubmit = (response) => {
console.log("Selected:", response.optionIds[0]);
console.log("Action:", response.actionId);
};
return (
<SingleRecommendationCard
recommendationId="rec-123"
message="Which service would you like to schedule?"
options={[
{ id: "opt-1", label: "HVAC Maintenance", description: "Annual checkup and filter replacement" },
{ id: "opt-2", label: "Plumbing Inspection", description: "Full system evaluation" },
{ id: "opt-3", label: "Electrical Review", description: "Safety inspection and testing" },
]}
actions={[
{ id: "confirm", name: "Schedule", type: "primary" },
{ id: "cancel", name: "Cancel", type: "ghost" },
]}
onSubmit={handleSubmit}
/>
);
}
Submitted State
Show previously selected values:import { SingleRecommendationCard } from "@servicetitan/anvil2-ext-atlas";
function SubmittedExample() {
return (
<SingleRecommendationCard
recommendationId="rec-123"
message="Which service would you like?"
options={options}
actions={actions}
onSubmit={() => {}}
submitted={true}
selected={["opt-2"]}
/>
);
}
<SingleRecommendationCard
recommendationId="rec-123"
message="Select an option"
options={[
{ id: "opt-1", label: "Option 1", description: "Description" },
]}
actions={[
{ id: "submit", name: "Submit", type: "primary" },
]}
onSubmit={handleSubmit}
submitted={false}
selected={[]}
/>
SingleRecommendationCard Props
Array of action buttons with
id, name, and optional type.The prompt message to display above the options.
Callback fired when an action button is clicked. Receives
sourceMessageId, optionIds, and actionId.Array of selectable options with
id, label, and optional description.Unique identifier for this recommendation, included in the submit response.
Array of selected option IDs to display when
submitted is true.When true, disables all inputs and shows the selected state.
Options Interface
interface Options {
id: string;
label: string;
description?: string;
value?: string;
}
RecommendationAction Interface
interface RecommendationAction {
id: string;
name: string;
type?: "primary" | "secondary" | "ghost" | "danger" | "link";
url?: string;
}
ConfirmationResponse Interface
interface ConfirmationResponse {
sourceMessageId?: string;
optionIds: string[];
actionId: string;
parameters?: Record<string, string | number | undefined>;
}