​
About this component

The Banner component is a versatile, persistent UI component that typically span the full width of a page or container, often at the top or bottom of the page. They serve as an unobtrusive way to communicate important information and promote additional offerings without disrupting the user’s workflow.

When to use Banners:

  • Alerts: Ideal for notifying users about critical updates, such as free trial expirations or scheduled maintenance.
  • Lightweight Up-sells: Effective for promoting related products or features, banners can be strategically targted and placed next to relevant content.

Advantages of Banners:

  • Non-Disruptive Communication: Since banners remain visible without interrupting the user experience, they allow users to continue their tasks while still being informed.
  • Flexible Design Options: Banners can be customized with full-bleed graphics and images, making them visually appealing and engaging. Frigade supports custom components including on-brand, eye-catching banners.

Best Practices for Banners:

  • Use Collections: Leverage Collections to define reusable in-app UI channels, enabling teams to efficiently manage and launch banners across different pages, such as your product dashboard or a specific product pages.
  • Regulate Frequency: Control the frequency of banner displays to ensure they remain relevant and engaging without overwhelming users.
  • Make Dismissible: Most often, banners are easily dismissible for the best user expeirence. In select cases, banners may be non-dismissible to communicate a critical message for some time (e.g. product downtime).

​
Resources

​
Demo

​
Installation

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

const App = () => {
  return (
    <Frigade.Banner 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).

​
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.

​
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.

AnnouncementCard