​
About this component

The Announcement component is a flexible communication tool that’s perfect for sharing important information or driving user action. They’re especially effective for getting the word out about new feature launches, upcoming webinars, or welcoming users to new areas of your product. When to Use Announcements:
  • Key Communications: Use announcements to highlight significant updates or events that need immediate user attention.
  • Transactional Flows: They’re also great for welcoming users or guiding them to explore new features, like kicking off a product tour.
Advantages of Announcements:
  • Grab Attention: Announcements often interrupt workflows in a way that demands attention, making sure users don’t miss out on important info.
  • Visual Impact: You have ample space for visual assets (videos, images, GIF), which can help draw users in and keep the message engaging.
Best Practices for Effective Announcements:
  • Limit Frequency: To avoid overwhelming users, try to keep announcements to once a session per user, and ideally once a week. This helps maintain their impact and prevents the dreaded “wack-a-mole” effect.
  • Be Concise: Keep your messages short and to the point. The easier they are to digest, the more likely users will engage with them.
  • Target Your Audience: Make sure your announcements are relevant and reach the right people by targeting on user properties, events and other signals.
  • Clear Calls to Action: Use actionable phrases like “Learn more” and direct links over passive language like “Got it” or “Okay”.
  • Utilize Collections: Use Frigade Collections to manage in-app UI channels effectively, ensuring that only one announcement is displayed at a time.
  • Less Critical Info: For non-essential information, consider launching announcements in the corner of the screen without background blurs for a subtler touchpoint.

​
Resources

​
Demo

  • See announcements in action in our live demo

​
Installation

import * as Frigade from '@frigade/react';

const App = () => {
  return (
    <Frigade.Announcement flowId="my-flow-id" />
  );
};

​
Customization

To learn about how to customize Frigade components, see the customization documentation and examples of custom themes in action.

​
SDK Properties

​
as
ElementType<any, keyof IntrinsicElements>
Optional component to wrap the child components in, e.g. as={Dialog} will render the Flow in a modal Dialog. Defaults to Box.
​
autoStart
boolean
Whether to automatically mark the Flow started (i.e. in progress) when the Flow is eligible to be shown. You will need to call flow.start() or step.start() from the parent component if you set this to false. Most components should not need to override this behavior.Defaults to true.
​
css
Interpolation<Theme>
Emotion CSS prop to apply to the component. See Theming documentation for more information.Example usage:

<Frigade.Checklist css={{ backgroundColor: "pink", ".fr-button-primary": { backgroundColor: "fuchsia" } }} />
​
dismissible
boolean
Whether the Flow is dismissible or not
​
flowId
string
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
​
forceMount
boolean
If true, the Flow will be mounted even if it has already been completed or dismissed. However, if the user does not match the Flow’s targeting, the Flow will not be mounted.
​
modal
boolean
Register the Flow as a modal to prevent popup collisions (only one modal Flow will render at a time).
​
onCloseAutoFocus
(event: Event) => void
Event handler called when auto-focusing on close. Can be prevented.
​
onComplete
FlowHandlerProp
Handler for when the Flow is completed. This is event is fired immediately after the user completes the Flow.
​
onDismiss
FlowHandlerProp
Handler for when the Flow is dismissed (skipped). This is event is fired immediately after the user dismisses the Flow.
​
onEscapeKeyDown
(event: KeyboardEvent) => void
Event handler called when the escape key is down. Can be prevented.
​
onInteractOutside
(event: PointerDownOutsideEvent , FocusOutsideEvent) => void
Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.
​
onOpenAutoFocus
(event: Event) => void
Event handler called when auto-focusing on open. Can be prevented.
​
onOpenChange
(open: boolean) => void
​
onPointerDownOutside
(event: PointerDownOutsideEvent) => void
Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.
​
onPrimary
StepHandlerProp
Handler for when primary button is clicked. If this function returns false or a promise that resolves to false, the step will not be automatically completed when clicked.
​
onSecondary
StepHandlerProp
Handler for when secondary button is clicked. If this function returns false or a promise that resolves to false, the step will not be automatically completed when clicked.
​
variables
Record<string, unknown>
Variables to pass to the Flow. You can use variables in the Flow configuration to customize copy. For instance, you can use title: Hello, ${name}! in the Flow configuration and pass variables={{name: 'John'}} to customize the copy.