Analytic Suite

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, Metric Views, and more.

---

⚡ 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 may 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 via 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 (e.g., Download Manager, Export Data modal, Subscriptions, 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	No	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	No	Secret token for accessing the application. ⚠️ For testing only; do not use in production UI. Cannot be used with qvToken.
appId	String	Required	Yes	ID of the Qrvey application that contains the asset you want to embed.
userId	String	Required	Yes	ID of the Qrvey user that owns the application being embedded.
qrveyId	String	Required	No	Represents the dataset ID used by the Analytic Suite.
clientId	String	Optional	Yes	Not required for rendering. Unique identifier for the tenant end user. Enables personalization and Download Manager features.
orgId	String	Optional	Yes	Not required for rendering. Used to pass organization context to other components.
orgs	Object Array	Optional	Only	Not required for rendering. Defines users and roles grouped by organization. Used to enable sharing/subscription features in other components.
timezone	Object	Optional	Yes	Overrides the time zone setting in Qrvey Admin Center. For more information, see Configuring Time Zone Settings.
customTokens	Object	Optional	No	Object. Add custom tooltips onto metric panels. For details, please see Custom Tokens. Example: { "my_header": "A Cool Tooltip Header!" }
authenticatedSession.email	String	Optional	Only	Specifies the email address to send scheduled exports. If not set, exports are sent to the email associated with the userId.
settings	Object	Optional	No	General configuration object for controlling certain behaviors. For details, please see The Settings Object below.
userFilters	Object	Optional	Yes	Collection of custom filters applied to the Analytic Suite views. For more details, please see User Filters.
themeId	String	Optional	No	Theme ID to apply a pre-defined theme. For more details, please see Accessing a Theme Programmatically.

Orgs

For full details on how orgs work, please see Ownership, Orgs & Subscriptions.

Property	Type	Description
orgId	String	The ID of the organization to which the roles and users will be defined next. Should correspond to the user in session's orgId if you want the roles and users to be listed in subscribe.
users	Array	An object/array of users to be listed in the subscribe modal. This is not for 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, please see Internationalization, Step by Step.

Property	Type	Required	Value
lang	String	Required	The language to use for the UI. Example: "es".
locale	String	Optional	The locale code to use for date and number formatting. Example: "es-ES".

Settings

Property	Type	Required
view	String, 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)	Optional
mode	String, Determines displaying the complete layout or the views only. It depends on set view. Accepts: COMPLETE SIMPLE Default: COMPLETE	Optional
displayMode	String, Changes the style and extends the layout onto the entire container. FULL NORMAL Default: NORMAL	Optional
styles	Object, Styles options object. These properties will extend from the current theme.	Optional
styles.chartsTitle	String, Sets the charts' title.	Optional
styles.chartsFontFamily	String, Sets the chart's font family.	Optional
styles.axisDataLabels	String, Sets axis labels color in charts.	Optional
styles.dataLabels	String, Sets a hex color for data labels in charts.	Optional
styles.valuesMain	String, Sets a hex color for axis ticks values in charts.	Optional
styles.chartsLegends	String, Sets a hex color for charts legends labels.	Optional
styles.chartsTooltips	String, Sets a hex color for charts tooltips.	Optional
styles.tableHeaderFont	String, Sets a hex color for table header texts.	Optional
styles.chartsMain	String, Sets a hex color for chart data points like bars, symbols and lines.	Optional
styles.themePalette	Array, Sets up to 20 hex colors that will be used for chart data points.	Optional

Timezone

Property	Type	Required
timezone.offset	String. Specifies the timezone offset. Accepted formats: +03:00, -03, etc.	Optional

---

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, please refer to the Styles documentation.