1

Install the React SDK

2

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.

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

OverviewTheming