Pixel-Perfect Reports Widget

The Pixel-Perfect Reports widget enables you to embed the Pixel-Perfect Reports feature in an application.

Embeddable Sample

Important: This example is for testing purposes only.

• In production, you must use a qvToken instead of exposing an apiKey in the UI.
• The apiKey is private and should only be used for backend-to-backend communication.

<!-- Tag -->
<qrvey-pixel-builder settings="reportsConfig"></qrvey-pixel-builder>

<!-- Config -->
<script>
  var reportsConfig = {
    "apiKey": "<YOUR_PRIVATE_API_KEY>",
    "domain": "<DOMAIN>",
    "userId": "<USER_ID>",
    "appId": "<APP_ID>",
    "clientId": "<CLIENT_ID>", //Optional.
    "orgId": "org:0" // Optional. your relevant orgId

  };
</script>

<!-- Launcher -->
<script type="text/javascript" src="https://<YOUR_QRVEY_DOMAIN>/widgets-launcher/app.js"></script>

Production Deployment

• Use qvToken instead of apiKey.
• Pass sensitive values (appId, userId, clientId) securely using qvToken.
• Configure timezone, parameters, and UI options as needed for production.

Configuration Object

Local and scheduled exports created from this widget are associated with the clientId and orgId that control their display in the Download Manager widget.

Property	Value	Required	Description
qvToken	string	Y (if apiKey is not provided)	Encrypted token used for secure authentication.
apiKey	string	Y (if qvToken is not provided).	Your organization’s unique API key. Required to access the Qrvey platform.
domain	string	Y	Base URL of your Qrvey instance.
appId	string	Y	ID of the Qrvey application that contains the asset to embed.
userId	string	Y	ID of the Qrvey Composer user account accessing this feature. Alternatively, you can specify the user ID in a Qrvey session cookie.
clientid	string	N	Unique identifier for the tenant end user. Required for using the End User Personalization and Download Manager features. The clientid must be set to a unique value for each tenant end user.
timezone	object	N	Overrides the time zone setting in Qrvey Admin Center. For more information, see timezone object.
reportId	string	N	Used to embed a specific report by ID. If omitted, this embeds the "browse all reports" page.
orgId	string	N	Organization ID for the end user. Used to pass organization context to other components. Exports created from the widget are owned by the clientId under the orgId. For more information, see Exports.
orgs	object array	N	The orgs object to list users, defined per organization, in the Subscribe modal.
email	string	N	Email of the clientId user. When passed in the qvToken, enables scheduling of exports and subscriptions.
showFormulasButton	Boolean	N	Shows (default) or hides the formula modal button in the toolbar.
showBucketsButton	Boolean	N	Shows (default) or hides the bucket modal button in the toolbar.
parameterValues	object	N	Set the value of a Pixel-Perfect report parameter. This value overrides the default value set for the parameter. Pattern: { key1: value1, key2: value2 } Example: { parameterName: paramVal }. To pass a column for page groups and report groups, use a datasetId.columnId format.
defaultMode	string	N	Either "preview" or "design" (default). A value of "preview" enables users to embed the Pixel-Perfect Reports in preview mode.
userFilters	object	N	Collection of custom filters that the system applies to the visualized data. For more information, see Filters in Widgets.

Exports

Local and scheduled exports created from this widget are associated with the clientId and orgId that control their display in the Download Manager widget.

If clientId and orgId are passed through a JWT to the widget, the same JWT is sent to the export requests and considered when creating the Download Manager records, even if the widget itself does not use these properties.

Timezone

For more information, see Configuring Time Zone Settings.

Property	Value	Required	Description
offset	string	N	Time to offset by. Pattern: {"HH:MM" } Example: { "offset": "-1:00" }

Customization

The customization options for the Pixel-Perfect Reports allow you to hide the export options.

const widgetConfig = {
  domain: "my-domain.qrvey.com",
  qvToken: "mySecureToken",
  ...
  customization: {
    // Global elements to remove
    remove: [
      '*.qDownloadReport', //The Download option in Preview mode.
      '*.qScheduleOption', //The schedule button inside the download modal.
      '*.qSubscribeOption', //The Subscribe tab within the Download modal.
      '*.qSubscribeExternalUsers' //The option to add external users using the Enter key within the Subscribe tab.
    ]
  }
};