1

Install the React SDK

Install the Frigade React SDK using your favorite package manager:

npm install @frigade/react
2

Add the Provider

Add the Frigade Provider component to your app. Make sure to paste in your public API key and user ID:

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}>
      {/* ... */}
    </Frigade.Provider>
  );
};
3

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.

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

SDK OverviewTheming