Banner
Communicate information or drive action via in-line banners
Code
Flow Configuration
The following props are available in the YAML Config defined in the Frigade Dashboard:
primaryButton.title
instead. The title of the primary buttonprimaryButton.uri
instead. The url to open when the primary button is clickedprimaryButton.target
instead. The target of the primary button url (default: _blank; use _self to open in the same window). Setting it to # will open the existing page and dismiss any Frigade modals.secondaryButton.title
instead. The title of the secondary buttonsecondaryButton.uri
instead. The url to open when the secondary button is clickedsecondaryButton.target
instead. The target of the secondary button url (default: _blank; use _self to open in the same window). Setting it to # will open the existing page and dismiss any Frigade modals.React Component Props
dismissible
Optional
dismissible: boolean
Whether the Flow is dismissible or not
flowId
flowId: string
The Flow ID to render. You can find the Flow ID in the Frigade dashboard.
forceMount
Optional
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.
onComplete
Optional
onComplete: FlowHandlerProp
Handler for when the Flow is completed.
If this function a promise that evaluates to false
, the Flow will not be marked as completed.
onDismiss
Optional
onDismiss: FlowHandlerProp
Handler for when the Flow is dismissed.
If this function a promise that evaluates to false
, the Flow will not be marked as dismissed.
onPrimary
Optional
onPrimary: StepHandlerProp
Handler for when primary button is clicked.
If this function a promise that evaluates to false
, the step will not be automatically completed when clicked.
onSecondary
Optional
onSecondary: StepHandlerProp
Handler for when secondary button is clicked.
If this function a promise that evaluates to false
, the step will not be automatically completed when clicked.
variables
Optional
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.