Skip to main content

What’s New

Qrvey 8.7
Version 8.7 of the Qrvey platform is now available to customers! This version includes new features including area charts, the ability to pivot and export data, as well as numerous bug fixes and performance improvements.
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
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.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.7

Introduction to Widgets

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​

Each widget has its own unique tag, configuration options, and launcher. To embed a widget, follow these steps:

  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.

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 within the Qrvey Composer UI.

  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.