2 Minute Use Cases: Empowering Users with Opt-In Feature Flags

2 Minute Use Cases: Empowering Users with Opt-In Feature Flags

Feature flags aren't merely a way to hide or show a feature. They can also empower users by giving them the option to opt-in to new features on their own terms. This way, rather than forcing a feature on your entire user base, you provide them with a choice, improving their overall experience and ensuring that they use features that they find truly valuable.

With DevCycle, you can offer an opt-in option for any new feature. This allows users to decide whether they want to try out the new feature or stick to the traditional interface they are familiar with. By giving users this control, you can gather more accurate feedback and ensure smoother transitions when rolling out updates.

To demonstrate this "User Opt-in" use case, we'll use a NextJS application because it's a straightforward way to showcase this functionality in a front-end React application.

Step 1: Setup the Demo App

‍Start by following the instructions provided in the README at https://github.com/devcyclehq/devcycle-use-cases.

In this user opt-in example, our focus will be on a confetti feature that has been added to the "User Optin" page UI 🎉.

Step 2: Create the Feature & Targeting Rules on DevCycle

‍You'll first create a new Permission feature in DevCycle called `user-optin` and set the initial variable key to `optin` with the type `boolean`.

Next, in the Users & Targeting rules for your Development environment, select the `All Users` dropdown in the Definition section, and scroll down to `Add Property`. Once here set:

• ‍Property Key to `optin`
• ‍Property Type to `boolean`.

Finally, in the Users & Targeting rules for your Development environment, update the main targeting rule with the following values:

• Name: User Optin On
• Definition: optin is true
• Serve: Configuration 1
• Schedule: None

For more detailed instructions on create feature flags and targeting rules, be sure to check out the Quickstart Guide in the DevCycle Docs.

Step 3: Review our NextJS App Code

‍With the setup done in DevCycle, let's see how we have integrated this feature flag into the `User Optin` page of our NextJS app. This feature flag allows a logged-in user to show or hide the confetti effect on the page using a toggle and a React State Variable to control the on-or-off state for a user.

Below are the steps that we followed to implement this use-case in our sample NextJS app:

1. Create `userOptIn` variable with the default of false.

‍

2. Wrap the confetti effect in conditional logic reliant on `userOptIn` being truthy.

‍

3. Initialize `optIn` React state variable to store user choice.

‍

4. Create a DevCycle user object and define a custom property which relies on the state variable.

‍

5. Create a toggle switch to allow a user to opt-in or opt-out using the state variable.

Step 4: Testing the Feature Flag

The opt-in feature flag is initially set to off for users. However, after navigating to the User Optin page and moving the toggle to the on position, the confetti feature becomes visible.

If users decide they're not ready, or no longer wish to see it the feature, they can simply opt-out by changing the toggle to the off position, turning off the confetti UI feature.

Wrapping Up

‍Using Opt-in feature flags doesn't just improve your development process; it places your users at the heart of every decision. Empowering users with choice leads to increased satisfaction and a stronger bond between the product and its users.

Want to empower your users and enhance their experience? Dive into opt-in feature flags with DevCycle now.

‍

‍