Available in @frigade/react version 2.4.5 and above.

Collections are groups of Flows that can be used to orchestrate the user experience as well as to launch Flows with no-code.

Launch with No-Code

You can add new Flows to your product with no-code by embedding a Collection in your UI and adding Flows to that Collection. This is useful for product teams who want to launch new Flows without needing to update the product codebase.

Orchestration

Collections can be used to orchestrate groups of Flows using limits and cool-offs. For example, Collections can determine the frequency and timing in order to avoid overwhelming users e.g. show at most one announcement per day, or space out a series of in-app product upsells.

Collections Overview


Launching New Flows with No-Code

You can embed Collections within your product to launch new Flows with no-code. These Collections serve as in-app channels you can then use to house new Flows you create from the Frigade web app.

Launching Announcements, Surveys and Dialog components w/ No-Code

Frigade comes with a default Collection called Dialogs. The Dialogs Collection is built-in to the Frigade SDK and can be used to launch Frigade Announcements, Surveys, and other Dialog-based components without updating your product codebase.

1

Install the Frigade SDK

To add a new dialog-based component to your product, first make sure the Frigade Provider is properly installed in your product. This is also where you can add custom CSS for your dialog components.

import * as Frigade from "@frigade/react";

const FRIGADE_API_KEY = "api_public_abcd1234";

export const App = () => {
  const userId = "...";

  return (
    <Frigade.Provider
        apiKey={FRIGADE_API_KEY}
        userId={userId}
        css={{
        '.fr-announcement': ANNOUNCEMENT_CSS,
        }}>
        {/* ... */}
    </Frigade.Provider>
  );
};
2

Create a new Flow

Next, create a new dialog-based Flow (e.g. Announcement, NPS Survey) in Frigade. Customize this Flow with your content and targeting logic.

3

Add the Flow to the Dialog Collection

Finally, add the Flow you just created to the Collection via the Add Flows button in the Collection detail page. From here, you can also control the cool-off and priority of included Flows.

Collections
Once a Flow is added to a Collection it can immediately go live to eligible users.

Launch In-App UI Flows w/ No-Code

You can also use Collections to launch new Flows that are embedded directly into your product UI with no-code.

1

Create a New Collection

To start, create a new Collection in the Frigade dashboard.

2

Restrict the Flow Types

Next, we recommend restricting the Flow types to only what you plan to support for this in-app channel e.g. Banners, Cards, etc. This prevents accidentally adding Flows to an embedded Collection that not fit the provisioned space.

3

Embed and Style the Collection

Next, grab the install snippet for the Collection and place it in your product codebase where you want the in-app channel to live. You can also style the Collection with custom CSS.

import * as Frigade from '@frigade/react';

const App = () => {
  return (
    <Frigade.Collection collectionId="collection_4jDCTYUm" css={NAV_CARD_CSS}/>
  );
};
4

Create and Add a Flow to your Collection

Finally, create a Flow and add it to the Collection. Depending on the Flow targeting and Collection priority, the Flow will begin to go live to eligible users.

Creating a Collection

To create a Collection, visit the Collections page in the Frigade dashboard and click on the New Collection button. You will be prompted to enter a name and description for the Collection. Once created, you can then add logic and Flows as well as embed the Collection.

Collections

Ordering Flows

When you add Flows to a Collection, you can specify the priority in which they should be shown by dragging and dropping them in the Collection editor. This is useful for prioritizing certain content type (e.g. onboarding > upsells > research) or sequences (welcome > getting started > go deeper).

Collections

Note: Collections do not guarantee Flows will be shown in that order.

Ordering Collections

Collections can also be ordered by drag and dropping them on the Collections tab. Because Flows can belong to multiple Collections, this priority informs the order in which Frigade processes each Collection.

Combining Collections and Targeting

As mentioned above, Collections can and should be combined with Flow targeting to ensure the right Flows are shown to the right users at the right time.

You can think of Collections as content pools. By casting the right net for each individual Flow with its own targeting, Collections can then personalize the product experience to each user with the highest priority eligible Flow.

Examples


Feature adoption

Let’s say we have a few different educational in-app sequences to encourage further feature adoption and that a user may be eligible for multiple sequences. For each sequence, we can use Flow targeting to define 1) the eligible audience (e.g. enterprise, free trial, etc.) and 2) the exact order of the sequence (e.g. Flow 1 is completed or dismissed to get Flow 2).

Now, if we have defined multiple parallel sequences, we can create a Collection to ensure that only a single Flow from any sequence can be shown within any desired time frame. This way we can ensure that users are not overwhelmed and are more likely to engage with the content.

Product communications (floating UI)

SaaS products often use dialogs and floating UI to communicate and collect important information. For example, an announcement or a survey. Oftentimes, product teams may accidentally show multiple competing experiences to the same user at the same time.

This can easily be avoided with Frigade. The default Collection called “Dialogs” can house all of our announcements and surveys to spread these experiences out with cool-offs. We can rank these Flows so that onboarding announcements take priority over product updates and user research, or whatever order makes the most sense for your product.

Product Upsells

Let’s say our product has a free trial experience and we want to nudge users toward upgrading to a paid plan. We can create a Collection called “Upsells” and add our entire catalog of upsell Flows to this Collection (announcements, cards, banners, etc.). We can then set a limit of one per day to ensure we’re not overwhelming users with too many upsell messages.

We can define audiences on each Flow to ensure that only users who are eligible for the upsell (e.g. are actively in a free trial) are shown the message. Once a user upgrades, the audience will prevent them from receiving any further promos in the sequence.