Overview
The Wingify plugin is a browser extension that connects your website with the Wingify platform. It gives you a centralized interface for running QA checks (such as verifying campaign targeting, checking segmentation, and managing cookies), generating AI-powered test hypotheses, capturing qualitative observations, and configuring how Wingify tools load on your site, all without leaving the website you are working on.
The plugin lets you use key Wingify capabilities, such as the Visual Editor, heatmaps, and AI-powered idea generation, even if SmartCode is not configured on your website. This feature makes it easier to test, analyze, and validate experiences without additional setup. It also handles common technical barriers automatically, such as Content Security Policy (CSP) restrictions, Cross-Origin Resource Sharing (CORS) rules, and Cross-Origin Read Blocking (CORB) blocks, so your testing environment stays stable.
For example, consider a scenario where you are analyzing a checkout page and notice a high abandonment rate. Instead of switching to the Wingify dashboard, you can open the plugin directly on that page to scan it with AI for improvement ideas, or immediately pin an observation to a specific element that looks broken. This lets you move seamlessly from identifying a problem to planning an experiment.
Key Capabilities of the Wingify Plugin
- SmartCode Injection: Use the Visual Editor on any domain, including local and staging environments, by injecting a temporary SmartCode without modifying the site permanently.
- AI-Powered Ideas: Scan a page and generate data-driven hypotheses to improve conversion rates.
- Visual Observations: Capture annotated screenshots of specific page elements and sync them to your Wingify account.
- Performance Controls: Manage cookies and block unnecessary third-party scripts to help the Visual Editor load quickly.
- Mitigate CSP Restrictions: Content Security Policy (CSP) rules on your website control which external domains can load resources. These rules can sometimes block the Visual Editor or heatmaps. The plugin automatically resolves CSP restrictions to keep Wingify tools running smoothly.
-
Mitigate CORS and CORB Restrictions: While viewing session recordings or heatmaps, you may notice that certain UI elements on the page are not displayed properly. This is often caused by the following security policies:
- Cross-Origin Resource Sharing (CORS): A security policy that specifies which origins are allowed to access resources such as APIs and images. It is configured by your website's server and enforced by the browser.
- Cross-Origin Read Blocking (CORB): A browser-implemented security mechanism that prevents unauthorized cross-origin pages from reading certain types of sensitive responses. These policies can prevent Wingify from fetching assets like CSS files needed to render recordings and heatmaps accurately. The plugin modifies request headers as needed to overcome these restrictions.
- Incognito Mode Support: The plugin can operate in your browser's Incognito mode. To enable this, navigate to chrome://extensions, click Details next to the Wingify plugin, and toggle on Allow in Incognito.
Install and Authenticate the Wingify Plugin
Prerequisites
- A Chromium-based browser: Google Chrome, Microsoft Edge, Opera, or Brave.
- An active Wingify account.
- The Wingify account ID you use to log in to the plugin must match the account ID associated with the SmartCode installed on the website you are viewing.
Installation Steps
- Download the Wingify plugin from the Chrome Web Store.
- Click Add to Chrome, then click Add extension in the confirmation pop-up.
- Open the plugin from your browser's extension menu.
- Log in using your Wingify credentials.
The plugin automatically detects the account ID of the account you are currently logged into and displays it in the top-right corner of the plugin window. If it is blank or incorrect, log out and log back in.
If you work with more than one Wingify account, or visit websites that belong to different Wingify accounts, here is what to expect:
- The account ID is always visible at the top of the plugin panel, use this to quickly confirm you are viewing data for the correct account.
- The plugin displays data only for the account you are currently logged into. If you visit a site whose SmartCode belongs to a different account, the plugin will show no live campaign data or targeting statistics for that site.
- To switch accounts, log out of the plugin and log in with the credentials for the relevant account.
- If you frequently switch between accounts, consider using separate browser profiles, one per Wingify account, to avoid logging in and out repeatedly.
- The plugin works on any domain, including localhost and staging URLs. If SmartCode is not installed in these environments, enable the Required for Editor and Heatmaps toggle in the SmartCode section of Settings to load Wingify tools temporarily for QA and testing purposes.
Navigate the Wingify Plugin Interface
The plugin interface is organized into two primary tabs and a settings panel.
Campaigns Tab
This tab shows a snapshot of Wingify activity on the page you are currently viewing. It displays two counters:
- Live campaigns: The number of campaigns currently running that you, as a visitor, are a part of. This means, you have passed all segmentation and traffic allocation rules for those campaigns.
- Campaigns targeting this page: The total number of campaigns set up for this URL. This number may be higher than Live campaigns because it includes campaigns you have not qualified for yet. This may be due to failed segmentation checks, traffic allocation rules, or other evaluation criteria.
The counters track all active campaign types, including A/B testing, multivariate testing (MVT), split URL, heatmaps, session recordings, Pulse, rollouts, and personalization campaigns.
From the Campaigns tab, you can also generate AI-powered test ideas tailored to your goals.
Observations Tab
This tab is dedicated to qualitative research. You can view all observations already pinned to the current page, search for observations by description, and switch to Observation Mode to capture new observations.
Get AI-Powered Testing Ideas via the Wingify Plugin
The AI scan feature analyzes your page and generates data-driven ideas. You can use these as a starting point for Wingify test campaigns.
To generate AI-powered testing ideas from the plugin:
- Navigate to your target page, open the plugin, and go to the Campaigns tab.
- Click Scan Page. The plugin scans the page. You will see a brief loading screen while it identifies your business and page type.
- On the Confirm Scanned Business Details screen, review the Business Type and Page Type that the AI has detected. If either is inaccurate, click the refresh icon to rescan the page, or correct the fields manually. Accurate category selection directly affects the quality of the ideas generated.
- Click Continue.
- On the next screen, enter your primary business goal in the text field, or select one from the AI goal suggestions list.
- Click Generate A/B Test Ideas to produce the ideas.
Once complete, click any idea to view a detailed hypothesis, the rationale behind it, and suggested modifications.
Capture Observations via the Wingify Plugin
Observations let you record annotated visual feedback on any page element and share it with your team. Unlike observations added directly from heatmap or session recording reports, which only support text, the plugin captures a screenshot of the selected element alongside your note.
To capture an observation from the plugin:
- Switch to the Observations tab in the plugin.
- Toggle the Observation Mode switch on. A floating Observations bar appears at the bottom of the page, confirming that Observation Mode is active.
- Hover over the element you want to comment on and click to select it. The selected area is highlighted.
- In the pop-up that appears, enter a description for your observation and add labels in the labels field, separating multiple labels with commas.
- Click the checkmark button to save. The plugin captures a screenshot of the selected element and saves the observation.
- To exit Observation Mode, toggle off the Observations switch on the floating bar at the bottom of the page, or click the X button on the bar.
Observations are automatically synced to your Wingify account and accessible from Plan > Observations in the Wingify dashboard. You can also search for them directly in the plugin's Observations tab using the search bar.
Configure Plugin Settings
Click the gear icon in the top-right corner of the plugin to access Settings. The settings panel is organized into four sections:
- SmartCode
- Clear Cookies
- Advanced Configuration
- Privacy & Behavior
Let us understand them in detail.
SmartCode
This section lets you control whether Wingify tools are enabled on your site and whether SmartCode is injected on the current page.
Required for Editor and Heatmaps toggle
This setting injects the SmartCode on the page and helps load the Visual Editor and Heatmaps. It is mainly useful when the website does not already have the SmartCode installed. By default, this setting is enabled to ensure the Visual Editor and Heatmaps work seamlessly across all websites, with or without the SmartCode.
Enable the Allow User Scripts Permission
Both SmartCode injection and Custom JS Style rely on Chrome’s user scripts capability. The Wingify plugin cannot run either feature until you grant the Allow User Scripts permission. This setting lives outside the Wingify plugin, in your browser’s extension settings. Chrome disables it by default for every extension. Complete the following steps once to enable both features:
- Open a new browser tab, type chrome://extensions in the address bar, and press Enter.
- Find the Wingify plugin card in the list and click Details.
- On the extension details page, scroll down to the Allow User Scripts toggle. Chrome displays a warning that the extension can run unreviewed code. This is expected and safe to proceed with for Wingify's use case.
- Toggle on the Allow User Scripts switch.
-
Return to the Wingify plugin and re-open Settings. SmartCode injection and the Custom JS Style fields now work without any further warnings.
Note: You only need to enable this permission once. It persists across browser restarts and remains active when the Wingify plugin updates to a new version. You only need to re-enable it if you manually turn it off, remove the plugin, or reset Chrome’s extension settings.
When to use SmartCode injection:
- Testing the Visual Editor on a new site before committing to a permanent SmartCode installation.
- Working in a local development or staging environment where SmartCode is not present.
Clear Cookies
Click Clear all to delete Wingify platform cookies and local storage for the current domain. This resets your visitor session, allowing you to be re-randomized into campaign variations. This is essential for testing the first-time visitor experience or verifying that a campaign is serving correctly from the start.
Advanced Configuration
This section contains the following latency settings and custom code options:
| Visual Editor Latency (in ms) | Wingify loads the Visual Editor once your website finishes loading. If your site takes a long time to load, the Visual Editor may time out before it can open. Increase this value to give your site more time. The default value is optimized for most networks. Adjust it only if you are experiencing timeouts, then click Save changes. |
| Heatmap Download Latency (in ms) | Controls the wait time for heatmap data to load. Increase this value if heatmaps are timing out on slow networks, then click Save changes. |
| Custom CSS Style | When your website is viewed inside the Visual Editor or on a heatmap, you may occasionally see display disruptions caused by CSS conflicts specific to the Wingify environment. Enter corrective CSS here to resolve these issues for your local session only and click Save changes. This code does not affect your live website or other users. |
| Custom JS Style | Enter corrective JavaScript here and click Save changes to resolve JS-related display issues that only appear within the Wingify environment. This code runs only in your local session and does not affect your live website. |
Attention:
- To use Custom JS, you must enable the Allow User Scripts permission for the Wingify plugin. If this permission is not enabled, the Custom JS field will display an Allow user scripts required warning.
- Wingify Support can supply the appropriate CSS or JS code to resolve known display issues. Contact Wingify Support for help.
Privacy & Behavior
| User Agent Control | When switching the Visual Editor from desktop to mobile or tablet view, Wingify sends a request using the user agent for the selected device. If your website's security settings block that request, the Visual Editor cannot render the correct view. Enable Keep the same user agent when switching devices to allow the Visual Editor to load the desktop version of your site inside a mobile or tablet-sized frame instead. |
| Block Third-Party Ads and Tracking Library | Third-party ads and tracking scripts can slow the Visual Editor's load time. Toggle this on to block those unnecessary network calls while working in Wingify tools, resulting in faster load times. |
Privacy and Data Sharing while Using the Wingify Plugin
The Wingify plugin is designed to operate locally within your browser session. Here is what you need to know about how data is handled:
- The AI page scan analyzes page structure and visible content only after you provide explicit consent. The data shared is anonymized and used solely to generate test ideas.
- Campaign and account data is read from your logged-in Wingify account and displayed only within the plugin, it is never shared externally.
- Browser permissions requested by the plugin (such as reading page data and blocking third-party scripts) are used exclusively to power plugin functionality and are not used to collect or transmit personal browsing data.
FAQs
-
Will the plugin impact my live website?
No. Every feature in the plugin, including Observations, AI Scan, SmartCode injection, Custom CSS/JS, Clear Cookies, and Block Third-Party Ads, operates only within your local browser session. Nothing is pushed to your live site, and real visitors are never affected.
Need more help?
For more information or further assistance, contact Wingify Support.