<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 primarily to build the UI.

The final result looks like this:

1

Create a new Announcement Flow

In the Frigade dashboard, tap “Create Flow” from the top right corner and select “Announcement” as the Flow type.

2

Update the Flow YAML

Next, we can update the YAML to include our desired announcement content. Here’s an example we can start with:

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
3

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:

"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. `

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>
  );
}
4

Place the component in your product

Now, if you’ve already installed Frigade via the quick start guide, 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:

"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;
5

You're done!

That’s it! You’ve built a custom announcement component using the Frigade 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.

Cards and BannersuseFlow Hook