Integrate Wingify Feature Flags with StoryBlok

Feature Availability: This integration is available with the Wingify Feature Experimentation Enterprise plan.

This article covers the following:

• Overview
• Prerequisites
• Enable the Storyblok Integration for your Wingify Account
• Install the Wingify App Plugin in Storyblok
• Create the Experiment Blocks in Storyblok
• Create Content Variations in Storyblok
• Authenticate the Wingify Plugin in Storyblok
• Configure Feature Flags and Map Variations
• Verify Mapping
• Test the Variations with a Test Campaign in Wingify
• Integrate the Wingify SDK to Display Storyblok Variations

Overview

The Wingify-Storyblok integration allows you to run A/B tests and optimize conversions with Wingify in Storyblok. You can create, manage, and test multiple content variations for your website directly within Storyblok, using feature flags in Wingify’s Feature Experimentation. 

With this integration, you can:

• Prepare variations in Storyblok
  Create different versions of content, for example, banners, CTAs, product descriptions, or other content without duplicating pages (creating multiple copies of the same webpage just to show different versions of content).
• Link variations to Wingify feature flags
  Map each variation in Storyblok to a corresponding variation under a feature flag in Wingify, ensuring seamless delivery during experiments. The feature flag acts as the switch that determines which variation is shown to each visitor.
• Run experiments without developer intervention
  Wingify uses the feature flag configuration to determine which variation to serve to each visitor, based on your experiment setup or targeting rules.
• Measure impact
  View performance metrics in Wingify to identify which content drives the best engagement or conversions.

For example, you have two homepage banners, a blue one and a red one. In Storyblok, you add both under the same experiment. You link them to a feature flag in Wingify, where each version becomes a variation under that flag. Wingify then uses the feature flag to show different banner versions to different visitors, tracks the results, and tells you which banner performs better, helping you make data-driven content decisions without manual changes to your site code.

This article further explains how to set up the integration and use it for optimum results.

Prerequisites

• Ensure you have:
  • Active Wingify and Storyblok accounts.
  • Admin-level access in Wingify and Storyblok.
• Ensure you are on the appropriate Storyblok plan. Check Storyblok App Store page for more details.

Enable the Storyblok Integration for your Wingify Account

1. Log in to your Wingify account.
2. From the left panel of your Wingify dashboard, go to Configurations > Integrations.
3. Search for and select the Storyblok tile. A connection screen appears.
4. Click Connect Feature Experimentation with Storyblok
5. Enter a connection name in the Connection Field, then click Create Connection.
6. Once you create the connection, the system auto-generates an API access token. Copy it, you will need it during your setup.

Install the Wingify App Plugin in Storyblok 

The Wingify app plugin is the bridge that connects your Storyblok content with Wingify Feature Experimentation. It enables the two platforms to communicate. Once you install the plugin, you will be able to:

• Create and manage Wingify feature flags directly from Storyblok
  The plugin lets you create feature flags in Wingify straight from the Storyblok interface. It also lets you fetch existing feature flags from Wingify so you can map new content to them without switching between platforms.
• Link content variations to Wingify feature flags
  The plugin allows you to add a special custom field inside your Storyblok components. This field enables you to assign each Storyblok variation to a specific variation under a Wingify feature flag. Without the custom field, Wingify would not be able to decide which content version should be delivered to visitors in an experiment.

 To install the Wingify app plugin in Storyblok:

1. Log in to your Storyblok account and open the Storyblok space where you want to add the Wingify plugin.
2. From the left panel, select Apps to open the App Directory.
3. Go to Personalization, and locate and click on the Wingify app.
4. Click Install. The plugin is now available in your space.

Next, you must authenticate the plugin. Before authenticating the plugin, you must first create the components you want to test. Once your components are ready, you can authenticate the plugin while configuring variations for those components.

Create the Experiment Blocks in Storyblok

1. In your Storyblok space, from the left panel, go to Block library and create a new nestable block for your experiment, for example experimentation-vwo This block acts as a container for all content variations in your experiment.
2. Add a field of type Blocks to the parent block. Let's call it variations. This field will hold all the variations you create for each component you want to test. For more information on how to add fields to a block, see Fields in Storyblok.
   
3. Based on your requirement, create another nested block for a component that you want to test. For example, to test the banner component of your page, create a block called banner.
4. Add the required fields to the component block. For example, the fields for the banner component can include title, colour, image, and text. For more information, see Fields in Storyblok.
   
   
5. For each component you want to test, add a custom field of type Plugin in the block. Set this field’s Custom Type value as sb-vwo. This field establishes the link between Storyblok content and Wingify feature flags.
   
   Attention: Using a different value other than sb-vwo will break the Storyblok-Wingify mapping.
   
   
6. Once you have created all testing blocks, create a new content story. The story is the entry point where you add the blocks, configure the variations, and test them. 
7. Add the parent experiment block (experimentation-vwo) to the story.
8. In the Variations field of the block, add the test component blocks (in this case, Banner) within the parent experiment block.

Once you have configured the story, create variation blocks for each component you want to test.

Create Content Variations in Storyblok

1. Create variations for each component you want to test. For example, for the banner component, you might add Banner 1, Banner 2, and Banner 3 as separate variations.
   
   
2. Configure each variation by defining values for its fields, such as the title, color, image, and text.
3. In the plugin field, configure and authenticate the Wingify plugin. 

Authenticate the Wingify Plugin in Storyblok

1. The first time you create a content variation in Storyblok, the system prompts you to authenticate the Wingify plugin. To do this, in the custom plugin field, click Add Credentials.
   
   
2. On the Let’s Get You Authenticated pop-up screen, enter the Wingify Account ID and the Wingify API token (generated while enabling the Storyblok integration in Wingify).
   
   Note: Ensure the Wingify account ID is of an account that is enabled with admin-level access permissions.
   
   
   
    
3. Click Save Authentication. Once the plugin is successfully authenticated, a success toast message is displayed. Close the pop-up screen.
   
   Tip: If you wish to update the plugin data in the future, click the gear icon. This opens the same authentication pop-up screen. Enter the updated details and click Update Authentication.

Configure Feature Flags and Map Variations

The Wingify plugin is bidirectional. Upon successful authentication, Storyblok automatically fetches all the feature flags you create in your Wingify account. They appear in the Feature Flag dropdown. Otherwise, the integration gives you an option to create a feature flag from Storyblok itself. Based on your requirement, click New Feature Flag, or select an existing feature flag from the list, or scroll down to the bottom of the list and click Create new feature flag. 

Note: To create a feature flag in Wingify, see Set up feature flags in Wingify.

To create a feature flag in Storyblok:

1. Click New feature Flag. Alternatively, click the Feature Flag dropdown and select Create new feature flag.
2. Enter a suitable name. In this case, since we are testing banners, let’s call it Banners.

3. Click Create.
   
   Storyblok creates a feature flag and automatically creates a variation. It sets this variation as the default variation, and links it to the feature flag. Alternatively, you can create a new variation or map the feature flag to an existing variation by selecting it from the Variation dropdown.

   To verify if the feature flag was created correctly, go to your Wingify account. Navigate to Wingify Feature Experimentation > Feature Flags and refresh the page. The plugin fetches all the feature flags you created in Storyblok. Additionally, the feature flag’s associated variable is created and the UUID for the first (default) variation is automatically mapped and linked to its corresponding content.

4. Similarly, add more variation blocks under the feature flag and configure their details. For all subsequent variation blocks you add to the feature flag, you must create variations in Wingify. For example, for variation block Banner 2, click Create new variation.
   
   You are auto-navigated to the Variations tab of the feature flag in your Wingify account. Click Add. The new variation is added and its UUID is auto-generated.
5. Click Save now.
6. Go back to your content story in Storyblok. Click the refresh icon to update the list and display the newly created variation.
   
   Attention: Without refreshing, the new variation will not be visible in Storyblok.
   
   
7. Navigate to the variation block and click the Select a variation dropdown. Select the newly created variation from the list.
   
   

8. Click Link Variation. You’ll see a success toast message on the screen once the variation is linked successfully. 

   Note: For linking the subsequent variations, you need not authenticate the plugin again. Simply click Link variation to map each variation in Storyblok to its corresponding variation in Wingify.

9. Check the Preview this variation checkbox to see what the variation would appear as to the visitors. The preview is displayed on the left panel of the content story screen.
   
   
10. Click Save and then Publish to save and publish your changes.

Verify Mapping

Perform these steps to verify and confirm that the variations are correctly linked and ready for testing.

1. In StoryBlok, click the Publish dropdown arrow and select Published JSON to load the published JSON file.
   
   
   Confirm each variation includes the correct featureKey and variationKey. 
2. In Wingify, verify that each variation has a unique UUID.

Test the Variations with a Wingify Test Campaign

After successfully setting up the configuration in Storyblok, you can switch to Wingify to set up other test campaign parameters, such as metrics, audience targeting, and other settings. You can set up rollout or experimentation rules to test the variations. 

The steps below demonstrate this procedure for an A/B Testing rule.

To complete the test setup in Wingify:

1. Navigate to Feature Experimentation > Your Feature Flag > Rules > Testing and Personalize.
   
   Note: The Rules tab is enabled only after you configure the metrics.
    
2. Click Create a new AB testing rule. For more information, see Step-by-Step Guide to Setting Up an AB Testing Rule.
3. Select the variations you want to test and configure the traffic allocation.
4. Activate the rule by switching the toggle on.
   
   Ensure both the main Feature Flag and the Experimentation Rule are activated (toggle switched on) for the test to start collecting data.

After the test starts, Wingify starts showing variations to your visitors based on your rule settings. Allow the experiment to run for a sufficient duration to collect meaningful data. Monitor the results of your campaign and make data-driven decisions to improve your conversion rates.

Integrate the Wingify SDK with Storyblok to Display Variations

The Storyblok + Wingify demo repository provides a sample project that demonstrates how to integrate Storyblok with Wingify Feature Management & Experimentation. It serves as a reference implementation for setting up content variations and testing workflows. Use this repository as a starting point to explore, experiment, and adapt the setup for your own implementation.

Note: In addition to using Storyblok with Wingify Feature Experimentation, you can install the Wingify SmartCode on your Storyblok-powered site to access Wingify Web Experimentation, Insights, and Personalize.

Need more help?

For further assistance or more information, contact Wingify Support.