Skip to main content

Common Examples

Basic Usage

Display the onboarding welcome screen:
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:
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:
import { Welcome } from "@servicetitan/ext-atlas";

function WelcomeWithTestId() {
  return (
    <Welcome
      title="Welcome to Atlas"
      subtitle="Your AI Assistant"
      onContinue={handleContinue}
      continueButtonId="welcome-continue-btn"
    />
  );
}
Last modified on February 12, 2026