Introduction to Widgets

Developers can embed Qrvey platform’s functionality (such as data visualizations) directly into their frontend applications using a comprehensive suite of customizable widgets.

Widget Components

A widget is composed of the following 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>

Note: Originally, widget parameters were in snake_case, but Qrvey widgets are shifting over to camelCase, which is standard for variables in JavaScript. To determine the valid case for each parameter, refer to the widget parameter documentation.

Embed a Widget

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

1. Get the script for the widget to embed. You can find scripts in the following location:

   • Relevant widget script from the documentation.
   • Qrvey Composer, which includes most relevant configuration details. For most widgets, you can copy/paste the widget script from Composer.

2. Add the code to your frontend application.

3. Set authentication and define widget parameters.

Refresh your frontend application to display your widget in the user interface.

Get Widget Script from Composer

The Qrvey Composer contains scripts you can use to embed widgets.

1. Navigate to the target Qrvey Composer interface.

2. Depending on the widget type, find and select the Embed Widget Options button (</>)or three-dot menu > Embed in the right corner of the top bar.

   

   A modal opens containing the following items:

   • Widget's HTML tag.
   • HTML script tag containing the widget's JSON config object.
   • HTML script tag to launch the widget.

3. Click Copy and close the modal.