A common use case in product onboarding is to allow a user to go through an onboarding flow before registering their account. For instance, a user might a fill out a Form or even a Checklist before they will be assigned a user ID in your own database. Without Frigade, this would typically require developers to build a custom datastore to track guest sessions, managing cookies or local storage for storing IDs, along with hundreds of lines of customized code to map data collected during the guest session to the real users database.

We're happy to share that Frigade now allows you to easily map all data and state collected from an unauthenticated user directly to their registered account with just one line of code.

Simply use the linkExistingGuestSessionToUser method in the Flows Hook as such:

import { useUser } from '@frigade/react';

const { linkExistingGuestSessionToUser } = useUser();

// This will merge all state from  the guest session
// to the user with the ID '1234'
linkExistingGuestSessionToUser('1234');

This feature is available in @frigade/react version 1.38.8 and above. Happy linking!

We've given our developer docs a layout upgrade! Rather than storing all our docs on a single page (let's be honest, it was getting a bit out of hand), we've divided our developer docs into high-level sections to make it much easier to find the content you're looking for.

Head over to the Frigade docs to see our new layout and more easily find what you're looking for.

Understanding how your onboarding and product education flows are performing is crucial to their success. After hearing feedback from Frigade users that they wanted better performance insights directly in the Frigade dashboard, we worked to give Frigade's Flow analytics a big update. Some of the new analytics features include:

• A new graph showing flow breakdowns for user seen, started and completed states along with overall completion rate.
• The ability to view performance over different blocks of time.
• Analytics on individual Flow Step performance which is particularly useful for checklists, tours, multiple step forms and more.
• Unique stats for each Flow version to understand how iterations have performed against each other.

And when more detailed analytics are needed, Frigade’s 3rd party analytics integrations for tools such as Posthog, Amplitude, Mixpanel, or Segment are available to be setup directly in the Frigade dashboard.

Check out the new Frigade Flow analytics in your Frigade Flows stats page now and let us know what you think!

One of the key features of Frigade is the ability to refine and adapt your UX based on actual user data. The need to customize what you're doing based on user properties and events pops up everywhere: Has your user completed prerequisite A and should now see Flow B? Has it been a week since last time you reminded them to complete a task? Are they part of a cohort that needs to fill out extra info in order to meet compliance requirements? All of these are jobs for our targeting system.

If you're not familiar with it, the TL;DR of targeting in Frigade is that we allow you to control the state and visibility of Flows (and Steps within those Flows) based on the data you've recorded about the current user, whether that's via the hooks in our SDK or by syncing an external data integration. We do this via a custom query language that allows you to write boolean expressions against any given property, if user.property('foo') == 'bar' then do the thing, you get the idea.

Previously, targeting was a purely code-based affair, which works well enough for simple queries, but things could get a bit out of hand when writing a more complex targeting query based on multiple different conditions.

Good news: We've fixed that! Now when you view a Flow in the Frigade app, you'll see a "Targeting" tab that contains our visual targeting editor. You can choose what you want to query on from the dropdowns, which include all of the properties and events you've recorded. No more trying to remember the exact targeting syntax and/or whether you tracked a userSignUp or a userSignup event.

As always, reach out and let us know if you have any questions.

The Frigade Forms SDK now supports asynchronous validation between steps/pages in a form using the validationHandler prop on the <FrigadeForm /> component. We heard from developers that when working with forms in Frigade, it's often useful to block the user from going to the next step until an async call has completed. For instance, you may want to make a database or API call and ensure that this succeeds before letting the user continue.

Here it is in action in our own onboarding flow where we use a <FrigadeForm /> (made extra slow for dramatic effect):

As the user clicks "Continue", we use the validationHandler to send the data to our database and wait for the call to succeed (hence the loading indicator in the button). This is an example snippet of what this could look like in your code base:

<FrigadeForm 
  flowId="flow_HBHCxYG8G7BUtcMb"
  validationHandler={async (data) => {
    // Do some network call or async process
    const result = await myValidationFunction(data);
    if (!result) {
      return `An error occurred: ${result}`;
    }
    
    return true;
  }}
/>

To get started with async validation in Frigade Forms, simply bump @frigade/react to version 1.35.29.

Today, Frigade's component library has received a big shiny update 🎉

Our components have had their designs restyled, layouts and flows updated, and they’ve been made interactive in the Frigade dashboard component and component detail pages. You’ll now be able to view and interact with each component to see how they work and how your users will experience them before you add them into your product. Be sure to be on @frigade/react version 1.35.14 or higher to check these updates out.

We're excited to share that all Frigade plans now have access to multiple environments.

With this change, you can keep separate Frigade instances for your development, staging, and production environments, and easily switch between them. This is especially useful when developing new Flows or when iterating on existing Flows. Additionally, the environment separation allows you to avoid ID collisions between development and production while also keeping clean Reporting and Analytics data in Frigade.

Great developer documentation is essential to onboarding and adoption for developers tools like Frigade. We've been working hard to make incremental improvements to our docs over the past few months. But today, we're unveiling a major upgrade.

Here's what you can expect from the new and improved documentation:

• An awesome AI Chatbot to engage with Frigade Docs
• A revamped structure and more intuitive organization
• A dedicated components section with copy/paste code snippets
• Clear setup guides for forms, announcements, and more

We're always looking for ways to make things even better. So, we'd love to hear your thoughts and suggestions on how we can continue improving our docs to make building great onboarding even easier. Your feedback means a ton to us, and thank you to those that have helped contribute to this iteration.

We love YAML, we really do. It's powerful, extensible, and blessedly free of nested curly braces.

But! We also know that you likely have folks on your team who are less in love with general purpose markup languages than we are. One of those people might even be you, the person who is reading this changelog. If so, that's ok, we're here for you too.

To prove that last statement true, we just launched our new Content Editor. It allows you to quickly update existing content in your Flows without having to also manage the structure of the YAML document behind the scenes. You can switch back and forth freely between YAML and Content editing, and your changes will be shared between the two as you type. For now, we only support editing the first-level steps of a Flow, so for deeply nested Flows like Forms you'll have to stick to YAML for now.

Next to the "Content" button in that screenshot, you may have also noticed a "Preview" button. It does exactly what you think it does, assuming that you think it renders a live preview of your Flow.

In our own usage of Previews, we've found them especially useful for quickly swapping back and forth while editing a Flow to make sure that our content is rendering correctly. We also added a fullscreen option at the top right of the preview pane, so you can give larger Components a bit of breathing room when they need it.

Head over to your Flows in Frigade to check out the new editor features, and as always reach out if you have any questions!

Today we are announcing the launch of our Vanilla JavaScript SDK. The SDK allows you to build native onboarding and adoption experiences with Frigade across any platform that can run Javascript -- regardless if this is on web, backend, or even mobile. In this initial release, we're offering a lightweight series of headless APIs for interacting with Frigade.

This allows you to build powerful onboarding experiences that match your application's look and feel such as checklists, tours, and in-product guides that leverage Frigade's Flows, Targeting, and Analytics capabilities.

Getting started

To get started, simply run npm i @frigade/js . The API follows an interface similar to the likes of Segment and Posthog. As such, you can initialize the SDK in a few lines as follows:

import frigade from '@frigade/js'

await frigade.init('FRIGADE_API_KEY')

await frigade.identify('USER_ID', {
  name: 'USER_NAME',
  email: 'USER_EMAIL',
  signed_up_at: 'USER_SIGNED_UP_AT' // ISO 8601 format
})

// Optional: send organization/group id
await frigade.group('ORGANIZATION_ID', {
  name: 'COMPANY_NAME',
})

Once you've set up the SDK, you're all set to start implementing Frigade Flows. Read the docs to get started.

Component support

We will soon be porting over our existing components for the Vanilla SDK which will leverage native web components. In the meantime, you will still have all the power to build any experience.

We're super excited to share the launch of our brand new NPS Survey Component! 🎉

Now, you can effortlessly integrate NPS surveys into your app and gather valuable feedback from your users to understand how satisfied they are with your awesome service.

Just like our other Frigade components, adding the NPS Surveys is a breeze. Use the <FrigadeNPSSurvey /> component in your code, and voila! Watch as NPS results arrive in Frigade in real-time.

Ad blocker-proof

As Frigade's components are part of your application bundle and doesn't require injected third party javascript libraries, you will avoid the common problem of having your NPS Survey blocked by ad blockers.

Avoid distrubing users doing critical tasks

You have complete control over when and where the survey appears in your product. Say goodbye to creating annoying moments when users are caught up in critical tasks and can't give proper feedback. With the Frigade NPS Survey, you can create an optimal user experience and receive unbiased feedback on your product.

Targeting

Using Frigade's Targeting system, you can also choose which users are actually eligible for the NPS survey. It's perfect for making sure only users who have used your product for a certain period or have interacted with specific features will see the survey.

Ready to add an NPS survey to your app? It's easy. Just head over to our Component Library and pick the NPS survey component. Start gathering more product feedback and improving your app today!

Say goodbye to janky iframed Typeforms. Today, we're giving developers a better way to build native multi-page forms. While our existing forms are very useful for gathering quick bits of data such as product feedback or customer information, we have heard from customers that they want to use Frigade for building more comprehensive forms to power their post-registration flows.

Our multi-page forms enable you to create a paginated flow of the form inputs Frigade already supports. This is perfect for situations where you need to gather a large amount of data from users without overwhelming them with a lengthy form. Breaking longer forms into bite-sized steps is a proven way to increase activation rates.

As with all other Frigade React components, some of the powerful features that come baked into forms include:

• Production-ready form components: Frigade Forms comes with common form inputs for collecting common data like email, text, numbers, multiple choice, and more.
• Fully customizable: Apply any CSS to any element. Match your brands look and feel.
• Built-in validation: Build bespoke form validation with Frigade (powered by Zod).
• Embed your own React components: Have that cool custom component in your form? No problem. You can embed any React component inside Frigade forms and use Frigade's data model for storing and retrieving data.

To see it in action, we updated our existing demo flow to use multi-page forms. You can try it out here and view the source code on Github.

Today, we're excited to announce Dynamic Form Validation for Frigade Forms. This feature allows Frigade developers to build native feature rich forms for onboarding and activation directly in existing React Applications without sending users off-site or embedding iframes.

You can use the validation property on any field in the multiInput form type to validate any input. For this, we leverage Zod for validation and error handling.

Head over to the Component Library to get started with Frigade Forms.

This week we're excited to announce the ability to dynamically inject content from your application directly in your flows. Often it's useful to be able to set variables dynamically in your flows. For instance, you might want to set the name of the user in a flow, or dynamically load localized strings. This is possible by using dynamic variables.

Flows now support setting custom variables anywhere in the data defined from the Frigade dashboard. For instance, your flow-data.yml might look like this:

data:
  - title: "Hello ${firstName}!"

In React, you can set the map of custom variables in two ways. Either directly on the flow:

<FrigadeChecklist
  ...
  customVariables={{
    firstName: 'Christian'
  }}
/>

When building a flow with Frigade, it's often useful to be able to emphasize certain words in text, add external links, or even embed an image. This is now possible with the support for Markup and HTML in Frigade flows.

While Frigade offers a wide range of pre-built production-ready UI components such as checklists, tooltips, surveys, you sometimes want to build your own UI component and simply leverage Frigade's Platform and API to power the experience.

This is now possible with our useFlows() hook which is the main entry point for building custom flows in Frigade. It contains a series of functions which will give you all data for a flow, the user’s state in it, and allow you to update the user’s state.

Head over to the docs to learn more.

We're thrilled to introduce webhooks in Frigade, bringing real-time notifications and seamless integration with third-party tools to enhance your user engagement strategies. This allows you to receive instant notifications when users or organizations take actions in your Frigade Flows.

Learn more

Exciting news! Frigade now offers version management for onboarding flows. With this latest update, you can efficiently manage different versions of your onboarding flows, making it easier than ever to iterate and improve your user experiences. Make changes, experiment with new ideas, and iterate on your flows without disrupting the user experience.

With the introduction of version control, you can also leverage the Frigade analytics to understand performance between your iterations. This is super helpful when you're trying to optimize your onboarding funnel to minimize drop-off and maximize activation.

We're thrilled to announce a major update to Frigade that brings powerful analytics capabilities to individual onboarding flows. With this latest enhancement, users can now easily track and analyze user engagement, identify drop-off points, and gain valuable insights—all without the need for custom analytics dashboards. Let's dive into the details of this exciting change:

• Comprehensive Flow Analytics: Frigade now provides in-depth analytics specifically tailored to individual onboarding flows. Gain a clear understanding of how users navigate through each step and identify any bottlenecks or areas of improvement.

• Drop-off Analysis: Pinpoint the exact points where users are dropping off in your onboarding flows. Armed with this knowledge, you can take proactive measures to optimize those specific steps, streamline the user journey, and maximize conversion rates.

• Seamless Integration: The best part? Frigade's analytics for individual onboarding flows seamlessly integrate into your existing setup. No need for complex configurations or custom dashboards. Simply access the analytics data directly from the Frigade Dashboard, making it effortless to monitor and optimize your flows.

We're excited to empower you to make informed decisions and optimize your onboarding experiences.

We're excited to introduce organization targeting, a new feature in the Frigade SDK and Platofrm. With organization targeting, you can personalize user experiences based on your users' organizations.

Here's how it works:

• Start flows for targeted organizations.
• Show or hide steps based on organizational units.
• Block steps from starting for selected organizations.
• Auto-complete steps when targeting logic is met for organizational units.
• Manage organization targeting easily through the Frigade Dashboard. Track engagement and make data-driven decisions.

Stay tuned for more updates on advanced functionalities to further enhance organization-based targeting.

Empower your user engagement strategy with organization targeting in Frigade. Get started today!

Today we're excited to announce the addition of user targeting to the Frigade SDK. Frigade's targeting logic allows you to create complex logic chains that can be used to trigger actions on flows. Targeting logic can be used in the following places:

• Starting a flow for targeted users (controlled in the "Targeting" field on the Flow detail page)
• Showing or hiding a step in a flow (using visibilityCriteria)
• Blocking a step in a flow from starting (using startCriteria)
• Auto-completing a step in a flow when targeting logic becomes true (using completionCriteria)

As always, you can view the properties and tracking events in the Frigade Dashboard under the Users section.

Coming soon ✨ We're excited to soon launch organization-based targeting. Similar to user targeting, but for groups of your users!

Forms and surveys are now available in Frigade! As part of building onboarding and activation flows, you can now collect information from your users and use it to personalize their experience. Common use cases include collecting information about a user's interests, preferences, and goals. You can also use forms to collect feedback from your users.

Head over to the docs to learn more or check out the live demo.

We're excited to launch the first version of the Frigade React SDK. This first version of the SDK comes with a series production-ready UI components such as:

• Checklists
• Tooltips
• Announcements

Additionally, the SDK comes with a series of React Hooks that allow you to build fully headless onboarding while leveraging the Frigade platform.

Head to the docs and get started today!