​
Preview

A <FrigadeAnnouncement/> used for product announcements

​
Setup Guide

Check out our guide on how to create your first announcement in minutes.

​
Code

import { FrigadeAnnouncement } from '@frigade/react';

const App = () => {
  return (
    <FrigadeAnnouncement
      flowId="my-flow-id"
      modalPosition="bottom-right"
    />
  );
};

​
config.yml props

The following props are available in config.yml in the data array:

data
array
The individual steps/pages of the announcement
data[].id
string
Unique identifier for the step. Do not change this once the step has been created.
data[].title
string
The title of the step
data[].subtitle
string
The description of the step
data[].imageUri
string
Url to an image to display in the step
data[].videoUri
string
Url to a video to display in the step such as YouTube, Vimeo, or a direct link to an mp4 file
data[].primaryButtonTitle
string
The title of the primary button
data[].primaryButtonUri
string
The url to open when the primary button is clicked
data[].primaryButtonUriTarget
string
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.
data[].secondaryButtonTitle
string
The title of the secondary button
data[].secondaryButtonUri
string
The url to open when the secondary button is clicked
data[].secondaryButtonUriTarget
string
Works similarly to primaryButtonUriTarget but for the secondary button
data[].completionCriteria
string
Targeting that automatically completes the step (e.g. user.properties.connectedBank == true).
data[].startCriteria
string
Targeting that automatically blocks the step from starting until it becomes true (e.g. user.properties.connectedBank == true)
data[].visibilityCriteria
string
Targeting that automatically shows the step when it becomes true (e.g. user.properties.connectedBank == true)

​
React component props

​
appearance

Optional appearance: Appearance

The appearance of the flow. See https://docs.frigade.com/sdk/styling

View definition

​
className

Optional className: string

View definition

​
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

View definition

​
dismissible

Optional dismissible: boolean

View definition

​
flowId

flowId: string

View definition

​
hideOnFlowCompletion

Optional hideOnFlowCompletion: boolean

View definition

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

View definition

​
onButtonClick

Optional onButtonClick: (step: StepData, index?: number, cta?: "primary" | "secondary" | "link", 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
NameType
stepStepData
index?number
cta?"primary" | "secondary" | "link"
nextStep?StepData
Returns

boolean

View definition

​
onComplete

Optional onComplete: () => void

Returns

void

View definition

​
onDismiss

Optional onDismiss: () => void

Returns

void

View definition

​
onStepCompletion

Optional onStepCompletion: (step: StepData, index: number, nextStep?: StepData, allFormData?: any, stepSpecificFormData?: any) => boolean

Handler for when a step is completed.

Parameters
NameTypeDescription
stepStepData
indexnumber
nextStep?StepData
allFormData?anyAll form data collected so far (only applicable to FrigadeForms)
stepSpecificFormData?anyForm data collected for the finished step (only applicable to FrigadeForms)
Returns

boolean

View definition

​
style

Optional style: CSSProperties

View definition