> ## Documentation Index
> Fetch the complete documentation index at: https://engage-docs.frigade.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow Component

`<Flow>` is a generic wrapper that bootstraps all of the functionality of a Frigade Flow. We use it as the basis for building Flow-aware Components in our SDK, and we recommend it as the starting point when building your own custom components.

In this example, we will build a custom announcement component with an open source UI kit. We'll use `AnnouncementProps` and `Flow` from `@frigade/react` to get the data. We'll use [Sanity UI](https://www.sanity.io/ui) primarily to build the UI.

The final result looks like this:

<Frame>
  <img src="https://mintcdn.com/frigade-docs/2ELnoUYc9O4Ydjzw/images/guides/custom/sanity-announcement.png?fit=max&auto=format&n=2ELnoUYc9O4Ydjzw&q=85&s=29f4e0062593b174af3534d393efb510" style={{maxWidth: '700px'}} width="2716" height="1527" data-path="images/guides/custom/sanity-announcement.png" />
</Frame>

<Steps>
  <Step title="Create a new Announcement Flow">
    In the Frigade dashboard, tap "Create Flow" from the top right corner and select "Announcement" as the Flow type.
  </Step>

  <Step title="Update the Flow YAML">
    Next, we can update the YAML to include our desired announcement content. Here's an example we can start with:

    ```yaml theme={"system"}
    steps:
      - id: announcement-page-one
        title: First page title
        subtitle: A space to share more details with users about your product update or announcement.
        primaryButton:
          title: Click me
          uri: https://www.frigade.com
          target: _blank
        secondaryButton:
          title: Next
        imageUri: https://frigade.com/img/grey-box-two.svg
      - id: announcement-page-two
        title: Second page title
        subtitle: This is also a space to share more details with users about your product update or announcement.
        imageUri: https://frigade.com/img/grey-box-two.svg
        primaryButton:
          title: Learn more
          uri: https://www.frigade.com
          target: _blank
    ```
  </Step>

  <Step title="Create a React component">
    Now let's create a React component to render our announcement in the product.

    We will import some components from `@frigade/react` and `@sanity/ui` to build the UI. Here are our imports:

    ```jsx theme={"system"}
    "use client";
    import { Button, Card, Dialog, Flex, ThemeProvider } from "@sanity/ui";
    import { buildTheme } from "@sanity/ui/theme";
    import { AnnouncementProps, Flow, Progress, Text } from "@frigade/react";
    ```

    Next we have the announcement component. We use `flowId` to connect the component to our Frigade Flow. Then we use the Announcement props such as `step.title`, `step.subtitle`, `step.imageUri`, `step.primaryButton.title`, and `step.secondaryButton.title` to render the content where we like.

    We are using the Sanity UI `Dialog`, `Button`, `Card`, and `Flex` components to build the UI. Sanity doesn't have a component for progress, so we can import the `Progress` component from `@frigade/react` to render optional progress indicators for the current page.
    \`

    ```jsx theme={"system"}
    export function AnnouncementWithFrigade({
      flowId,
      ...props
    }: AnnouncementProps) {
      return (
        <ThemeProvider theme={buildTheme()}>
          <Flow as={null} flowId={flowId} {...props}>
            {({
              flow,
              handleDismiss,
              handlePrimary,
              handleSecondary,
              parentProps: { dismissible },
              step,
            }) => (
              <Dialog
                __unstable_autoFocus={false}
                header={step.title}
                id="dialog-example"
                onClose={
                  dismissible
                    ? () => {
                        // @ts-expect-error - handleDismiss expects an event to be passed to it
                        handleDismiss();
                      }
                    : undefined
                }
                zOffset={1000}
              >
                <Flex
                  direction="column"
                  gap={4}
                  paddingRight={4}
                  paddingLeft={4}
                  paddingBottom={4}
                >
                  {step.imageUri && (
                    <Card radius={4} overflow="hidden">
                      <img src={step.imageUri} />
                    </Card>
                  )}

                  <Text.Body2>{step.subtitle}</Text.Body2>

                  <Progress.Dots
                    current={flow.getCurrentStepIndex() + 1}
                    marginInline="auto"
                    total={flow.getNumberOfAvailableSteps()}
                  />

                  <Flex direction="row" gap={3}>
                    {step.primaryButton?.title && (
                      <Button
                        onClick={handlePrimary}
                        text={step.primaryButton.title}
                        tone="primary"
                        width="fill"
                      />
                    )}
                    {step.secondaryButton?.title && (
                      <Button
                        onClick={handleSecondary}
                        mode="ghost"
                        space={3}
                        text={step.secondaryButton.title}
                        width="fill"
                      />
                    )}
                  </Flex>
                </Flex>
              </Dialog>
            )}
          </Flow>
        </ThemeProvider>
      );
    }
    ```
  </Step>

  <Step title="Place the component in your product">
    Now, if you've already installed Frigade via the [quick start guide](/quickstart), you can simply place the `AnnouncementWithFrigade` component in your product where you'd like the announcement to appear with the `Flow ID` we generated in the first step. Here's an example of how you might do that:

    ```jsx theme={"system"}
    "use client";
    import { AnnouncementWithFrigade } from "@/components/Sanity/Announcement";

    const ECommerce: React.FC = () => {
      return (
        <>

          <AnnouncementWithFrigade dismissible={true} flowId="flow_VEJdWA2M" />

          {/* Your application here */}

        </>
      );
    };

    export default ECommerce;
    ```
  </Step>

  <Step title="You're done!">
    That's it! You've built a custom announcement component using the Frigade Engage React SDK and Sanity UI. If you visit the page you should now see your announcement in the product.

    As you interact with the Flow, you will see a user profile generated in the Frigade dashboard. You can delete the user or reset this specific Flow in the user profile page in order to see it again after completing it.

    Of course, you can always use targeting as well to ensure your announcement only shows up after a certain action or to a specific audience.
  </Step>
</Steps>