Skip to main content
Version: 9.2

Introduction to Widgets

Qrvey Widgets are embeddable UI components that allow developers to integrate powerful analytics directly into their frontend applications. Widgets provide a flexible way to embed dashboards, charts, reports, and other interactive analytics components with full control over styling, behavior, and security.

What Are Widgets?​

Widgets are self-contained web components that encapsulate Qrvey's analytics functionality. Each widget is designed for a specific purpose—from displaying complete dashboards to rendering individual charts or managing data exports. Widgets work with any modern web framework or plain HTML/JavaScript.

Available Widgets​

Qrvey provides several types of widgets, each designed for specific use cases:

Widget Components​

Each Qrvey widget consists of the following main components that work together:

<!-- 1. Widget Tag: The HTML element that renders the widget -->
<qrvey-WIDGET-TYPE settings="config"></qrvey-WIDGET-TYPE>

<!-- 2. Configuration Object: Settings that control the widget's behavior -->
<script>
var config = {
  apiKey: "<YOUR_PRIVATE_API_KEY>",        // For dev/testing only
  domain: "https://<YOUR_QRVEY_DOMAIN>",   // Your Qrvey instance URL
  userId: "<USER_ID>",                     // End user identifier
  appId: "<APP_ID>"                        // Qrvey application ID
};
</script>

<!-- 3. Widget Launcher: Script that initializes the widget -->
<script type="text/javascript" src="https://demo.qrvey.com/widgets-launcher/app.js"></script>

Important Security Note: The example above uses apiKey for simplicity, but API keys should never be exposed in production frontends. For production deployments, use QV Security Tokens generated from your backend.

How to Embed a Widget​

Follow these steps to embed a Qrvey widget in your application:

Step 1: Choose Your Widget​

Select the appropriate widget type based on your use case. Each widget has its own unique tag, configuration options, and capabilities. For more information, see Available Widgets.

2. Get the Widget Code​

You can obtain the widget embedding code in two ways:

Option A: From Documentation​

  • Navigate to the specific widget's documentation page

Option B: From Composer​

The easiest way to get widget code with pre-configured settings is directly from Qrvey Composer:

  1. Navigate to your content. Open the dashboard, chart, or content you want to embed in Qrvey Composer

  2. Access embed options. Depending on the widget type, look for:

    • Embed Widget Options button (</>) in the toolbar

    OR

    • Three-dot menu (⋮) > Embed in the top-right corner

      Embed Script

  3. Copy the embed code. A modal opens displaying:

    • The widget's HTML tag
    • A pre-configured JSON config object with your content IDs
    • The widget launcher script

  4. Paste and customize. Select Copy, close the modal, and paste the code into your application. Remember to:

    • Replace the apiKey with a QV Token for production
    • Adjust any additional configuration parameters as needed

Next Steps​

After embedding your first widget, explore these topics to enhance your integration:

Additional Resources​