This article covers the following:
- Overview of the Websites and Apps module
- Deploy Wingify on your platform
- Manage your Websites and Apps in Wingify
Overview of the Websites and Apps module
As the very first step towards linking Wingify with your domain / mobile app / server-side project, you need to establish the connection by deploying the SmartCode or SDK, respectively. This sets the ground for you to pump the power out of Wingify by creating and executing campaigns to optimize your platform for amplified turnouts.
The Websites and Apps module is the arena for you to initiate your journey with Wingify. It is the common strata for registering and managing all your website, mobile apps, and server-side projects hassle-free.
You can access the Websites and Apps module from the main menu > Configurations to register a new platform or manage your existing ones.
The Websites and Apps module features the following sections:
- Introduction - Gives you an overview of how each of your platforms can be connected to Wingify via the SmartCode or the respective keys. It hosts an overview section along with three others, each for the SmartCode, mobile app SDK, and server-side SDK.
- Websites and Apps - Displays the list of your websites and apps in your Wingify account.
NOTE: The Websites and Apps section appears only after you have added at least one entry.
- Privacy - Gives an account of Wingify’s privacy policy concerning The collection, storage, and management of data.
- Compliance - Gives an account of the compliances and certificates for Wingify’s adherence to industrial standards.
- FAQs - Displays the most frequently asked questions around the SmartCode installation.
Deploy Wingify on Your Platform
Upon registering your platform, Wingify will display the corresponding SmartCode/SmartCode plugin/SDK using which you can connect your platform with Wingify. This step is crucial for you to create and execute campaigns in Wingify.
As you start off using Wingify, you can connect your platform via the Introduction page. The overview section on the Introduction page has a Connect Now button, which, when clicked, will display a popup that lets you select the type of your platform. Based on that, you will be shown the appropriate steps to be performed to get your platform added to Wingify.
Connect a Website
Perform the following steps to connect your website with Wingify:
- On the SmartCode for Websites (Client-Side) section under Introduction, click on the Connect Your Website button.
- In the popup that appears, enter your website’s domain name.
- Click Add domain.
Now, Wingify analyzes and verifies your website to generate the SmartCode specific to your website. Once done, the platform is registered on Wingify:
The websites installed with Wingify are displayed under Websites and Apps. Clicking on one of them will feature three tabs - Code, Performance, and Audit.
The Code tab, by default, features the HTML SmartCode that Wingify has specifically generated for that website. If your website is hosted on WordPress, Drupal, or Shopify, Wingify will automatically detect it and display the respective plugins for installing the SmartCode.
INFO: To know how to configure and install the SmartCode, refer to this article.
The HTML SmartCode is tagged with the version number at the top, along with the change log that lists the log of changes made to the SmartCode for each version.
You can customise your SmartCode, based on your requirements, by clicking on the ⚙ icon at the top-right of the SmartCode. The following are the options available for customising your SmartCode:
| Option | Action to customize |
|---|---|
| Code type | You can select either Asynchronous or Synchronous. By default, Asynchronous is selected. If you are customizing this option post installation, you need to replace the existing SmartCode on your website with the updated one for the new changes to reflect |
| Settings timeout & Library timeout | The Settings timeout refers to the time until which the asynchronous SmartCode waits for the page settings to load. The Library timeout refers to the wait time between the request sent by asynchronous code to CDN for fetching the Wingify library and loading the file. When these time limits are breached due to scenarios such as longer loading time of your webpages and heavier changes in your variation, the visitors will be served the original content. Extending these time limits can prevent the display of the original content. To know more about SmartCode timeouts, check out this article. If you are customizing these options post installation, the SmartCode is auto-updated. However, your current visitors will experience the changes on your website only upon the subsequent visit or session |
| Avoid flicker due to Rocket Loader | By default, this option remains unselected. It is recommended that you select this option if your website uses Rocket Loader to load the scripts. Selecting this will allow Wingify to add an attribute to the SmartCode. This way, it prevents issues such as flickering when the SmartCode is applied to your website the default way when Rocket Loader is enabled. If you are customizing this option post installation, you need to replace the existing SmartCode on your website with the updated one for the new changes to reflect |
| Hide body tag in HTML | By default, this option remains selected, implying that Wingify will hide the body elements so as to avoid the flash of the original content as the web pages are being rendered. If you are customizing this option post installation, the SmartCode is auto-updated. However, your current visitors will experience the changes on your website only upon the subsequent visit or session |
To reset the SmartCode customizing options to system settings, click Reset to defaults.
After your customization options are set, you can click Save to apply the changes, and your SmartCode is ready to be installed on your website.
Post installing the SmartCode, you can verify the installation by entering your website URL in the SmartCode checker.
The Performance tab features the impact of Wingify after installing the SmartCode on your website.
The performance scores displayed in the Wingify dashboard serve two primary purposes:
- Performance comparison: With vs Without Wingify SmartCode The Performance tab represents how your website performs in terms of key metrics like First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Thread Blocking Time (TBT), both with and without Wingify SmartCode, for Mobile and Desktop. This side-by-side comparison helps highlight the actual impact of Wingify SmartCode on your site's loading performance.
- How "Without Wingify" scores are measured To measure your site’s baseline performance (without Wingify), Wingify loads your homepage with a special query parameter (__wingify_disable__) added to the URL. This disables the Wingify SmartCode, allowing for an accurate benchmark.
The data appears after the website gets steady traffic. This is because the Wingify system only tracks 1% of visits and avoids counting the same domain more than once until the processing is complete. The website’s performance is measured using Google’s PSI (Page Speed Insights) API, only for the homepage.
Beneath these vitals, you can find the breakdown of the sizes of the Wingify library and every individual Wingify campaign, categorized by type and size. The size reflects the amount of data (changes, code, assets) added to each campaign. This table also provides clear benchmarks to help you gauge the performance impact of each campaign. The campaigns are classified into three categories:
- Good (< 10 KB): These campaigns have a minimal impact on page load speed and are well-optimized.
- Needs Improvement (10 KB - 30 KB): These campaigns are moderately sized and may have minimal impact on performance. It is recommended to review them for optimization.
- Poor (> 30 KB): These campaigns are large and are likely to affect your page load speed and user experience. Wingify recommends enabling Lazy Loading for campaigns categorized as Poor and Needs Improvement. Lazy loading defers the execution of heavy campaigns, which ensures your website’s essential content (text, images, navigation) is not delayed. Instead of loading simultaneously with your page's critical content, a lazy-loaded campaign runs asynchronously (in the background) after the main page is usable. For more information on how to enable lazy loading for a campaign, see Set up More Configurations in Your Campaign.
You can also find the total size of all your Wingify campaigns at the bottom of the list. Besides these, based on the performance of your website, Wingify also provides suggestions to improve it.
The Audit tab streams all the events that are performed by the visitors on your website. To view the streaming of the events on all of the websites linked to your Wingify account, you can access Audit under the main menu > Data360. To know more about Audit, click here.
Connect a Mobile App
Note: This setup requirement is specific to our deprecated product, Wingify Mobile App Testing, and is not a mandatory step in the current Wingify Feature Management and Experimentation (FME) platform. Wingify FME is the evolved form of Wingify Mobile App Testing. Similarly, connecting your server using the older flow was relevant to Wingify Fullstack, which is also now deprecated.
Both Mobile App Testing and Wingify Fullstack have been fully merged into Wingify FME, which offers a unified, streamlined experience for managing feature flags, rollouts, personalization, and experimentation across platforms—without the rigid prerequisites of earlier products.
To learn more about how Wingify FE works, see Introduction to Wingify Feature Experimentation (FME).
Perform the following steps to connect your mobile app with Wingify:
- On the Mobile App section, click on the Connect Your App button.
- In the Add a mobile app popup that appears, enter your mobile app name.
- Click Add app.
With this, your app is registered in Wingify and is displayed as follows:
A mobile app under the Websites and Apps section features two tabs - SDK and Configuration. Wingify generates an API key individually for Android and iOS. Cordova, Flutter, and React-native can avail of either of the Android and iOS API keys, as required. To learn about installing the SDK on your mobile app, click on the SDK guide button.
NOTE: The API key generated above applies only to A/B testing. To generate a key for mobile insights, you must Enable and Configure Data Collection for Recordings.
The Configuration tab lets you configure your variables for running tests on your mobile app. Test variables are elements or parameters of your mobile app. After you define a variable, you can run an unlimited number of A/B tests on the variable without any code changes or redeployment. For example, you can create a string-type variable for testing different text versions on the app screen.
To add variables for your mobile app testing, perform the following steps:
- Under the Variables section, click Create Variable.
- Assign a name to the variable, and then select its data type.
- Enter its default value (This refers to the current value or the value that it should be assigned if there is no A/B test).
- Click Create. You can add multiple variables to your app.
You can view the relevant Java, Objective, or Swift code snippet in the right panel as you create the variable. You can use this code snippet to update the changes in your mobile app code.
For example, let us consider you want to create an A/B test for your mobile app for the following use cases:
- Control: Requires users to sign in (after signing up) to the app to make a booking.
- Variation: Users can directly make the payment without signing in.
Once you’re done creating your variable, it gets listed under the Variables section in the Configuration tab. You can always modify the name and the default value of the variable by clicking on the Edit Variable icon. However, deleting a variable is not possible.
To learn how to create an A/B test on your mobile app, refer to this article.
Connect a Server-side Project
Note: This setup requirement is specific to our deprecated product, Wingify Fullstack, and is not a mandatory step in the current Wingify Feature Management and Experimentation (FME) platform. Wingify FME is the evolved form of Wingify Fullstack. Similarly, connecting a mobile app using the older flow was relevant to Mobile App Testing, which is also now deprecated.
Both Wingify Fullstack and Mobile App Testing have been fully merged into Wingify FME, which offers a unified, streamlined experience for managing feature flags, rollouts, personalization, and experimentation across platforms—without the rigid prerequisites of earlier products.
To learn more about how Wingify FE works, see Introduction to Wingify Feature Experimentation (FME).
Perform the following steps to connect your server with Wingify:
- On the Server-side section, click on the Connect Your Project button.
- In the Add a Project popup that appears, enter your project name.
-
From the Languages dropdown, choose the language(s) for your project.
Info: A language lets you choose the SDK for your project.
- In the Environment Name field, enter the name of the environment where you want to run your test.
- To add multiple environments, click Add another environment. You can set an environment as default by selecting the Set as default checkbox. This will make the environment to be auto-selected while selecting a project inside a campaign. Setting your environment as a default makes it automatically appear in the Environment(s) list once you select the project from the Projects dropdown in the Feature Rollout, Feature Test and A/B Test campaigns.
- To enable webhooks, select the Enable Webhook checkbox. To know more about webhooks and how to configure them, click here.
- Click Add project.
After the project is created in Wingify, it displays two tabs:
SDK - Features the SDK that Wingify has generated to be installed on your server. To know how to install, you can refer to the corresponding SDK guides for Python, Java, and .NET by clicking on the respective SDK guide buttons. This also shows you the SDK key that you have to use when initializing the Wingify client in your code. Configuration - Allows you to manage the environment(s) that you have added to the project.
Managing Your Websites and Apps in Wingify
Clicking on Websites and Apps under Configurations > Websites and Apps will display the list of all the platforms that have registered in your Wingify account. To quickly access a registered platform, you can use the search bar.
The listed properties are organized in a table with the following columns:
- Name - Displays the name of the platform.
- Type - Displays the type of the platform (Website / mobile app / server-side project).
-
Status - Displays the connectivity status of the SmartCode / SDK.
- Connected - Implies that the SmartCode / SDK has been successfully installed on your platform.
- Not connected - Implies that the SDK has not been installed on your platform.
- No SmartCode detected - Implies that the SmartCode has not been added to your website.
- Error - Implies that the SmartCode has not been installed properly on your website. The reasons are classified and can be viewed by clicking on the corresponding platform.
- Last activity - Displays the timestamp when Wingify last detected a visitor's engagement on your webpage.
Apart from viewing these details, you can also prevent Wingify from collecting data from the platforms that are no longer required by archiving them. To do so, along the corresponding platform, click on the vertical ellipsis (⋮) > Archive. The archived platforms appear as a list under the Archived Websites and Apps section. To unarchive a platform, click on the Unarchive option corresponding to it.
Need more help?
For further assistance or more information, contact Wingify Support.