- Implementation
- Welcome API
Common Examples
Basic Usage
Display the onboarding welcome screen:Copy
Ask AI
import { Welcome } from "@servicetitan/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:Copy
Ask AI
import { Welcome, ChatWindow, Content } from "@servicetitan/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:Copy
Ask AI
import { Welcome } from "@servicetitan/ext-atlas";
function WelcomeWithTestId() {
return (
<Welcome
title="Welcome to Atlas"
subtitle="Your AI Assistant"
onContinue={handleContinue}
continueButtonId="welcome-continue-btn"
/>
);
}
Copy
Ask AI
<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.
