React SDK Quickstart
How to set up Frigade in your React app
Install the React SDK
Add the Provider
Add the Frigade Provider
component to your app. Make sure to paste in your public API key and user ID.
Optionally, you can pass in user properties like firstName
, lastName
, and email
to decorate the user profile in Frigade.
import * as Frigade from "@frigade/react";
const FRIGADE_API_KEY = "api_public_abcd1234";
export const App = () => {
const userId = "..."; // If no user id is provided, Frigade will generate a guest id
return (
<Frigade.Provider
apiKey={FRIGADE_API_KEY}
userId={userId}
userProperties={{
firstName: "John",
lastName: "Doe",
email: "john.doe@acme.com"
}}
>
{/* ... */}
</Frigade.Provider>
);
};
For a full list of supported properties, see the Provider documentation.
Use your first component
That’s pretty much it! You can now use the SDK. Here’s an example of how to use the Announcement
component:
import * as Frigade from "@frigade/react";
export const DemoComponent = () => {
return <Frigade.Announcement flowId="flow_abcd1234" />;
};
Be sure to create an Announcement
in Frigade web dashboard and link the FlowId to the component above. Check out our general Quickstart for more information.
Next steps
Now that you have Frigade running in your application, you will likely want to style them to fit your brand. See the styling guide to get started.