Skip to main content

What’s New

Required Update for 8.5.1
Attention 8.5.1 customers: for any 8.5.1 instance deployed prior to 08/05/2024, an update is required to ensure you are running the latest images.
Learn More
Qrvey 8.6
Version 8.6 of the Qrvey platform is now available to customers. This version includes several new feature enhancements and performance improvements.
Learn More
Qrvey 8.5
Version 8.5 (LTS) of the Qrvey platform is now available to customers. This version includes several new features and performance improvements.
Learn More
End-of-life Schedule
We've added a new article that lists the features and endpoints that have been scheduled for deprecation. All features and endpoints will be supported for (1) year after the release date of the LTS version that contains the alternative.
Learn More
Version: 8.6

Embedded Widgets Overview

Developers can seamlessly embed the Qrvey platform’s functionalities (such as web form builders, data visualizations, and more) directly into their frontend applications using a comprehensive suite of customizable “widgets”.

Anatomy of a Widget​

Note: Originally, widget parameters were in snake_case, but Qrvey widgets are shifting over to camelCase, which is standard for variables in JS. Please see the widget parameter documentation to choose the right case for each parameter.

A widget is composed of three embeddable HTML scripts.

<!-- widget's tag -->
<qrvey-WIDGET-TYPE settings="config"></qrvey-WIDGET-TYPE>

<!-- widget's Config Object -->
<script>
var config = {
  apiKey: "<YOUR_PRIVATE_API_KEY>",
  domain: "https://<YOUR_QRVEY_DOMAIN>",
  userId: "<USER_ID>",
  appId: "<APP_ID>"
};
</script>

<!-- widget's launcher -->
<script type="text/javascript" src="https://demo.qrvey.com/widgets-launcher/app.js"></script>

How to Embed a Widget​

  1. Get the script for the widget you'd like to embed. You can find scripts in two places:
    • Get the relevant widget script from the documentation.
    • For most widgets, you can copy/paste the widget script in Qrvey Composer, which will include most relevant configuration details.
  2. Place the code in your frontend application as desired.
  3. Set authentication and configure widget parameters as desired.

Refresh your frontend application and your widget should appear in the UI.

Widget Scripts and Configuration​

Each widget has its own unique tag, configuration options, and launcher. For details, please browse the following sections.

WidgetDescription
Single PanelEmbeds a single chart, map, or metric.
Dashboard ViewEmbeds a dashboard containing charts, maps, and metrics.
Dashboard BuilderEnables end users to build custom charts and dashboards.
Analytic SuiteEnables end-users to build custom charts.
Web Form DesignEnables end users to create and publish their own web forms.
Web Form (End User)Embeds an existing web form (form, survey, or quiz), in which end users can enter data.
Analytic SuiteEnables end-users to perform their own analysis of their data by embedding a Summary, Tabular, or Custom Analysis view.
Pixel-perfect ReportsEmbeds a Pixel-perfect report.
AutomationEmbeds workflow functionality into your application.
Download ManagerEnables end-users to access Download Manager to manage exported files.

Get Widget Script from Composer​

widget-guide

With the exception of Web Form Design and Web Form (End User), embeddable widget scripts can be also be found in Qrvey Composer.

  1. Navigate to the Qrvey Composer interface you'd like to embed.
  2. Depending on the widget type, find and click either the </> Embed Widget Options button or three-dot menu > Embed in the right corner of the top bar. A modal will appear containing:
    • The widget's HTML tag.
    • An HTML Script tag containing the widget's JSON config object.
    • An HTML script tag to launch the widget.
  3. Click Copy and close the modal.