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 primarily to build the UI.
The final result looks like this:
Create a new Announcement Flow
In the Frigade dashboard, tap “Create Flow” from the top right corner and select “Announcement” as the Flow type.
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
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>
);
}
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;
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.