- Implementation
- Welcome API
Common Examples
Basic Usage
Display the onboarding welcome screen:import { Welcome } from "@servicetitan/anvil2-ext-atlas";
function WelcomeScreen() {
const [showWelcome, setShowWelcome] = useState(true);
if (!showWelcome) {
return <ChatInterface />;
}
return (
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={() => setShowWelcome(false)}
/>
);
}
Conditional Screen Display
Switch between welcome and chat states:import { Welcome, ChatWindow, Content } from "@servicetitan/anvil2-ext-atlas";
function AtlasApp() {
const [showWelcome, setShowWelcome] = useState(true);
if (showWelcome) {
return (
<Welcome
title="Welcome to Atlas"
onContinue={() => {
setShowWelcome(false);
initializeChat();
}}
/>
);
}
return (
<ChatWindow open>
<Content>{/* messages */}</Content>
</ChatWindow>
);
}
With Test ID
Include test ID for automation:import { Welcome } from "@servicetitan/anvil2-ext-atlas";
function WelcomeWithTestId() {
return (
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={handleContinue}
continueButtonId="welcome-continue-btn"
/>
);
}
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={handleContinue}
continueButtonId="welcome-continue"
/>
Welcome Props
Callback fired when the user clicks the Continue button.
Test ID for the continue button.
Secondary heading text displayed below the title.
Main heading text displayed on the welcome screen.