Skip to main content
Version: 9.2

Introduction to Widgets

Developers can seamlessly embed the Qrvey platform’s functionalities (such as 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

Scripts to embed widgets 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.