Announcement
Preview
A <FrigadeAnnouncement/> used for product announcements
Setup Guide
Check out our guide on how to create your first announcement in minutes.
Code
config.yml props
The following props are available in config.yml
in the steps
array:
React component props
- allowBackNavigation
- appearance
- className
- customVariables
- dismissible
- flowId
- hideOnFlowCompletion
- modalPosition
- onButtonClick
- onComplete
- onDismiss
- onStepCompletion
- showPagination
- style
allowBackNavigation
Optional
allowBackNavigation: boolean
Whether to allow the user to navigate back to previous steps. Default is false.
The title of the button can be controlled by the backButtonTitle
prop on the step.
appearance
Optional
appearance: Appearance
The appearance of the flow. See https://docs.frigade.com/sdk/styling
className
Optional
className: string
customVariables
Optional
customVariables: Object
Dynamic variables to use in config.yml. See https://docs.frigade.com/flows/dynamic-variables
Index signature
▪ [key: string
]: string
| number
| boolean
dismissible
Optional
dismissible: boolean
flowId
flowId: string
hideOnFlowCompletion
Optional
hideOnFlowCompletion: boolean
modalPosition
Optional
modalPosition: "center"
| "top-left"
| "top-right"
| "bottom-left"
| "bottom-right"
| "inline"
Indicates the position of the modal if the form type is a modal. Default is center.
onButtonClick
Optional
onButtonClick: (step
: StepData
, index?
: number
, cta?
: "primary"
| "secondary"
| "link"
| "back"
| "collapse"
| "expand"
, nextStep?
: StepData
) => boolean
Handler for when a primary or secondary CTA is clicked (regardless if step is completed or not). Return true if your app performs an action (e.g. open other modal or page transition).
Parameters
Name | Type |
---|---|
step | StepData |
index? | number |
cta? | "primary" | "secondary" | "link" | "back" | "collapse" | "expand" |
nextStep? | StepData |
Returns
boolean
onComplete
Optional
onComplete: () => void
Returns
void
onDismiss
Optional
onDismiss: () => void
Returns
void
onStepCompletion
Optional
onStepCompletion: (step
: StepData
, index
: number
, nextStep?
: StepData
, allFormData?
: any
, stepSpecificFormData?
: any
) => boolean
Handler for when a step is completed.
Parameters
Name | Type | Description |
---|---|---|
step | StepData | |
index | number | |
nextStep? | StepData | |
allFormData? | any | All form data collected so far (only applicable to FrigadeForms) |
stepSpecificFormData? | any | Form data collected for the finished step (only applicable to FrigadeForms) |
Returns
boolean
showPagination
Optional
showPagination: boolean
Show a pagination indicator at the bottom of the announcement when using more than 1 page. Default is true.
style
Optional
style: CSSProperties