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 and Governance

Collections provide air traffic control functionality using limits, cool-offs, and priorities. For example, Collections can determine the frequency and timing of a group of Flows to avoid overwhelming users e.g. only show one announcement per day, or space out in-app upsells.

Collections Overview


Launch 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 UI channels which can house new Flows you create from the Frigade web app.

Announcements, Surveys, and Dialogs

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.

A Flow can immediately go live to eligible users once it is added to a Collection

Inline UI Components

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 do not fit the intended 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 access the embed snippet, set the display logic, and add Flows to the Collection.

Ordering Flows

You can specify the priority of Flows within the Collection by dragging and dropping them in Flow priority section of the Collection detail page. This is useful for prioritizing content types (e.g. onboarding > upsells > research) or sequences (welcome > getting started > go deeper).

Ordering Collections

Collections themselves can also be ordered via drag and drop on the Collections overview page. Because Flows can belong to multiple Collections, this priority informs the order in which Frigade processes each Collection.

Combining Collections and Targeting

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 giving each individual Flow its own targeting, Collections can then personalize the product experience to each user by choosing the highest priority eligible Flow for them.

Usecases


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 must be completed to see Flow 2).

If we have defined multiple sequences, we can create a Collection and add all the Flows to ensure that only a single Flow from any campaign can be shown within a desired time frame. This helps ensure that users are not overwhelmed and increases the likelihood that users will engage with the content.

Product communications

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 whichever order makes 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 the audience for each Flow to ensure that only users who are actively in a free trial are eligible to be shown the messages. Once a user upgrades, the Flow audiences will prevent them from receiving any further promos in the sequence.

Frequently Asked Questions


Available in @frigade/react version 2.4.17 and above.