We often get requests for Frigade examples in action to see what's possible. Well, this week we're excited to provide another resource: re-introducing the Frigade demo site! The new demo app is built with the Frigade 2.0 SDK and Next.js. You can visit the demo here and see the source code here.

So what's all included in the latest demo? Let's get into it.

Forms

The demo shows what Frigade forms are capable of powering. Our forms give you the ease of updates and edits that you'd come to expect from a Typeform, but with the quality and feel of your own product. No iframes – they are fully embedded within your product with code.

The forms in the demo highlight inline embedding, conditional logic and branching, custom steps with external API calls, and even complex custom behaviors like mandatory video completion. Frigade forms enable you to start building and shipping world-class forms in minutes but with the peace of mind and power to customize them completely, as needed.

Tours

When poorly built and targeted, product tours can be an anger-inducing whack-a-mole type experience. The demo shows the power of a thoughtfully designed and interactive product tour. For best user engagement, you ideally want your users to opt into a product tour. Even better is to tie that opt-in to their actions or behaviors (e.g. You recently tried feature X, do you want us to show you how to use related feature Y?).

And nobody wants to sit through a 25 step "Next, next, next" tour. Whenever possible, show don't tell. With Frigade, that's easy. Connect a step of the tour to an actual user action or outcome, for instance pushing a button or viewing another page. Check out the demo to see this kind of product tour in action.

Checklists

Similar to product tours, getting started guides are best when they are actionable and intelligent. That is, the best guides push users to take useful actions that move them forward in their journey. And they accurately indicate the user's progress in real-time to convey a sense of momentum and accomplishment.

Frigade makes it easy by automatically handling real-time state management for every user. A powerful SDK and API allow you to connect step completion criteria to whatever action you want. From basic actions like "Click to complete" to more complex user actions and event-driven behaviors like "Finish setting up your profile" or "Invite 3 teammates." You're not limited to simple widget behaviors with Frigade.

Modals

Frigade can also help you launch targeted in-app messages to your users at the exact right moment. Basic announcements. Fancy announcements. User surveys. This demo has them all. These experiences can be interruptive, so utilize Frigade's targeting and triggers to catch users at times when they're most likely to engage. And use Frigade Collections to easily add cool-offs and limits to your announcements to prevent bombarding users with messaging from different teams and products at once.

Cards

Most adoption tools on the market are "script-based." That means they inject code into your website at runtime which tends to feel clunky and slow your product down.

Instead, Frigade is installed in your actual codebase and blends the best of code and no-code. That means, Frigade components are able to sit inline within your actual product UI. In the middle of a profile page, at the bottom of a settings page, at the top of the dashboard – wherever. Check out the Cards demo to see how you can seamlessly embed Frigade-powered promotions in your product.

Start shipping better onboarding and growth loops

Want to go deeper on something from the demo? Feel free to send us a note or grab time to talk with our team. Happy building!