Build a greeter app

```bash
yarn app-store create
```

<iframe
  width="560"
  height="315"
  src="https://cdn.iframe.ly/AK13z2x"
  title="Step 1"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

1. Create a component `greeter/components/GreeterButton.tsx` - You can name it whatever you want.

2. Import this component in `Shell.tsx` and add it wherever you want to so that the button is available on all pages.

```js
/**
* GreeterButton.tsx
* It creates a button that can be added anywhere. The button is visible only if the app is installed.
*/
import useApp from "@calcom/lib/hooks/useApp";
import showToast from "@calcom/lib/notification";
import { Button } from "@calcom/ui/button/Button";

import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";

export default function GreeterButton() {
  const { data: user } = useMeQuery();
  const { data: greeterApp } = useApp("greeter");
  // Make sure that greeterApp is installed. We shouldn't show the button when app is not installed
  if (!user || !greeterApp) {
    return null;
  }
  return (
    <Button
      onClick={() => {
        showToast("Hello, " + user.name, "success");
      }}
    >
      Greet Me!
    </Button>
  );
}
```

```;
/**
* Shell.tsx
*/
// ...
import GreeterButton from "@calcom/app-store/greeter/components/GreeterButton";
// ...

<GreeterButton />;
```




A sample line where I used the component in the demo

<iframe
  width="560"
  height="315"
  src="https://www.loom.com/embed/b0fd31cc11444799af7a6f12a01d4321"
  title="Step 3"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>