Analytic Suite Widget

The Analytic Suite widget enables users to display the distinct data analysis views available within the Analyze functionality of Qrvey Composer.
This includes Summaries, Tables, and Metric Views.

Quick Embeddable Sample (For Testing Only)

The following sample demonstrates how to quickly embed the Analytic Suite widget in your system.

Important: This example is for testing purposes only.

• API Key: In production, your API key must never be exposed in the UI. It should only be used in backend-to-backend communication.
• Minimal Config: The sample uses the minimum set of properties needed for quick testing. Production deployments can require additional properties, as described below.

<!-- Tag -->
<an-dashboard config="anSuiteConfig"></an-dashboard>

<!-- Config -->
<script>
var anSuiteConfig = {
  apiKey: "<YOUR_PRIVATE_API_KEY>", // Testing only. Do not expose in production.
  domain: "<DOMAIN>",
  appId: "<APP_ID>",
  userId: "<USER_ID>",
  qrveyId: "<DATASET_ID>"            // Represents the dataset ID
};
</script>

<!-- Launcher -->
<script type="module" src="https://<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.esm.js"></script>
<script nomodule src="https://<WIDGETS_URL>/qrvey-an-widgets/an-dashboard/andashboard/andashboard.js"></script>

Production Deployment

When deploying to production:

• Use a qvToken instead of an apiKey.
• Ensure appId, userId, and qrveyId are passed using the token, not hard-coded.
• clientId, orgId, and orgs are not required for rendering the widget but can be provided when you want Analytic Suite to act as a gateway for other components (such as Download Manager, Export Data modal, Subscriptions, or personalization).
• Configure additional properties such as settings, themeId, i18n, and customTokens as needed.
• Keep the API key securely stored on the server side only.

Configuration Object

Property	Type	Required	qvToken Support	Description
domain	string	Required	N	Qrvey instance URL. Example: https://example.qrvey.com.
qvToken	string	Required, if apiKey is not provided	-	Encrypted token used for secure authentication. Used in production to securely pass all required parameters. Cannot be used with apiKey.
apiKey	string	Required, if qvToken is not provided	N	Secret token for accessing the application. Caution: For testing only; do not use in production UI. Cannot be used with qvToken.
appId	string	Required	Y	ID of the Qrvey application that contains the asset you want to embed.
userId	string	Required	Y	ID of the Qrvey user that owns the application being embedded.
qrveyId	string	Required	N	Represents the dataset ID used by the Analytic Suite.
clientId	string	N	Y	Unique identifier for the tenant end user. Enables personalization and Download Manager features. Not required for rendering.
orgId	string	N	Y	Not required for rendering. 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	Only	Not required for rendering. Defines users and roles grouped by organization. Used to enable sharing/subscription features in other components.
timezone	object	N	Y	Overrides the time zone setting in Qrvey Admin Center. For more information, see Configuring Time Zone Settings.
customTokens	object	N	N	Add custom tooltips onto metric panels. For more information, see Custom Tokens. Example: { "my_header": "A Cool Tooltip Header!" }
authenticatedSession.email	string	N	Only	Specifies the email address used for sending scheduled exports. If not set, exports are sent to the email associated with the userId.
settings	object	N	N	General configuration object for controlling certain behaviors. For more information, see The Settings Object below.
userFilters	object	N	Y	Collection of custom filters applied to the Analytic Suite views. For more information, see User Filters.
themeId	string	N	N	Theme ID to apply a pre-defined theme. For more information, see Access a Theme Programmatically.

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.

Orgs

For more information about organizations, see Organizations, Ownership, and Subscriptions

Property	Type	Description
orgId	string	ID of the organization to which the roles and users are assigned. To list the roles and users in the subscribe modal, this value should correspond to the user in the session orgId.
users	array	An object/array of users to be listed in the subscribe modal. This does not include the current user. Adjust clientId and email accordingly.
users.clientId	string	clientId of the user.
users.email	string	Email address of the user.

Example

const orgs = [
  {
      orgId: 'ORG_ID',
      users: [
        {
          clientId: 'CLIENT_ID',
          email: 'EMAIL'
        },
        {
          clientId: 'CLIENT_ID2',
          email: 'EMAIL2'
        }
      ]
  }
]

i18n

For more information, see Internationalization, Step by Step.

Property	Type	Required	Description
lang	string	Y	Language to use for the UI (examples: "es", "es-ES").
locale	string	N	Locale code to use for date and number formatting (for example, "es-ES").
currencyFormatOverride	string	N	Accepts currency codes and sets the currency (for example, "EUR") on visualizations and their exports. It overrides the default currency format in the application. Supports the list of ISO 4217 currency codes.

Note: Currency set directly on a column in a chart using the Values Format option supersedes the currency setting in currencyFormatOverride.

Example Configuration

var config = {  
  "domain": "<DOMAIN>",  
  "qvToken: "<QVTOKEN>",      
  "i18n": {
    "lang": "en",
    "locale":"EN",
    "currencyFormatOverride":"EUR"
  }
}

Note: The i18n object is supported only in the widget configuration object. It cannot be passed in a JWT.

Settings

Property	Type	Required	Description
view	string	N	Determines the initial view to display. Accepts: SUMMARY_VIEW/MULTI_PANEL TABULAR_VIEW CUSTOM_VIEW METRIC_VIEW Default: MULTI_PANEL (which is an alias for SUMMARY_VIEW)
mode	string	N	Determines displaying the complete layout or the views only. It depends on set view. Accepts: COMPLETE SIMPLE Default: COMPLETE
displayMode	string	N	Changes the style and extends the layout onto the entire container. FULL NORMAL Default: NORMAL
styles	object	N	Styles options object. These properties will extend from the current theme.
styles.chartsTitle	N	string	Sets the charts' title.
styles.chartsFontFamily	N	string	Sets the chart's font family.
styles.axisDataLabels	string	N	Sets axis labels color in charts.
styles.dataLabels	string	N	Sets a hex color for data labels in charts.
styles.valuesMain	string	N	Sets a hex color for axis ticks values in charts.
styles.chartsLegends	string	N	Sets a hex color for charts legends labels.
styles.chartsTooltips	string	N	Sets a hex color for charts tooltips.
styles.tableHeaderFont	string	N	Sets a hex color for table header texts.
styles.chartsMain	string	N	Sets a hex color for chart data points like bars, symbols and lines.
styles.themePalette	array	N	Sets up to 20 hex colors for use as chart data points.

Timezone

Property	Type	Required	Description
timezone.offset	string	N	Specifies the timezone offset. Accepted formats: +03:00, -03, and so on.

Styles

The Single Panel Widget supports customization through CSS variables, allowing you to adapt the look and feel of dashboards to match your application’s design system. This includes control over fonts, colors, spacing, and other UI elements.

By overriding the available style variables, you can achieve a fully branded experience for end users without altering functionality. This is the recommended way to ensure consistency across embedded dashboards.

For the complete list of available style variables and examples of how to use them, see Styles documentation.