Skip to main content
Version: 9.2

Qrvey Quickstart Guide

Whether you're getting started with Qrvey Pro or Qrvey Ultra, use this quickstart guide to go from zero to embedded!

Before You Begin​

  1. Confirm whether you're running a trial of Qrvey Pro or Qrvey Ultra. The UI can differ slightly.

  2. Ensure you've received the following:

    • Qrvey Composer username and password.
    • Platform API key.

Step 1: Prepare Your Data​

When your platform is running, get your data into Qrvey. You can use the tutorial video to perform the following tasks:

  1. Create an Application.

  2. Configure a Connection.

  3. Create a Dataset.

    • Qrvey Pro: Select New Live Connect Dataset.
    • Qrvey Ultra: Select New Managed Dataset or New Live Connect Dataset.

    Select the data view dbo.CustomerSummaryView, which contains data ready for analysis.

The connection used in this video is available for trial users. Contact customer support for access.

Additional Resources​

Step 2: Create a Dashboard​

After you set up your dataset, you can use it to build an analytics dashboard. This tutorial video shows you how to perform the following tasks:

  1. Create a dashboard.
  2. Add multiple charts.
  3. Create a filter that adjusts data across all charts.
  4. Apply basic styling to the dashboard.
  5. Preview and publish dashboards.

Additional Resources​

Step 3: Embed Your Widget​

After you create a dashboard, you can embed it into your application. This tutorial video shows you how to perform the following tasks:

  • Embed your widget in dev mode.
  • Use Qrvey's authentication API.

Additional Resources​

Code Samples​

You can review the following resources to assist with your Qrvey development:

Embedding Tutorial Snippets​

<!-- HTML to embed the widget -->
<h2>The Quickstart Dashboard</h2>
<h3>Authenticated via QV Token</h3>
<div id='widget-container'></div>
<script type="module" src="https://demo.qrvey.com/qrvey-dashboard/qrvey-dashboard/qrvey-dashboard.esm.js"></script>
// Frontend Script

// The qrveyDomain needs to be a "var" to put it in the global scope.
var masterObject = { 
    backendDomain: "https://get-demo-token.qrveyapp.com",
    qrveyDomain: "https://demo.qrvey.com"
}

// A frontend call to your backend, which fetches & forwards the qvToken.
async function fetchToken() { 
  try { 
    const response = await axios.get(
      masterObject.backendDomain + "/quickstart-dashboard"
    );
    console.log("RESPONSE:", response);
    return response.data?.token;
  } catch(error) { 
    console.log(error)
  }
}

// Injects widget with global settings.
async function embedWidget() { 
    let token = await fetchToken();
    let widgetContainer = document.querySelector("#widget-container");
    window["qrvey-dashboard-config"] = { // Setting global settings
        "domain": masterObject.qrveyDomain,
        "qvToken": token,
        };
    let dashboard = document.createElement("qrvey-dashboard");
    dashboard.setAttribute("settings", "qrvey-dashboard-config");
    widgetContainer.append(dashboard);
}

embedWidget();
// Your backend server
const express = require("express");
const axios = require("axios");
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 3000;

const {
  API_KEY,
  DOMAIN,
  APP_ID,
  USER_ID,
  CLIENT_ID
} = process.env;

// CORS setup
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

// Token generator
async function generateToken(body, baseUrl) {
  const response = await axios.post(
    `${baseUrl}/devapi/v4/core/login/token`,
    body,
    {
      headers: {
        "Content-Type": "application/json",
        "x-api-key": API_KEY,
      },
    }
  );
  return response.data;
}

// Static quickstart config
const quickstartConfig = {
  apiKey: API_KEY,
  userId: USER_ID,
  clientId: CLIENT_ID,
  appid: APP_ID,
  dashboardId: DASHBOARD_ID,
  orgId: "org:0",
};

// Quickstart dashboard route
app.get("/quickstart-dashboard", async (req, res) => {
  if (!API_KEY || !DOMAIN || !APP_ID || !USER_ID || !CLIENT_ID) {
    return res.status(400).json({ error: "Missing required configuration." });
  }

  try {
    const token = await generateToken(quickstartConfig, DOMAIN);
    res.json(token);
  } catch (err) {
    console.error("Error generating token:", err);
    res.status(500).json({ error: "Error generating token" });
  }
});

Production Resources​

Use the following pages to make your embedded widgets production-ready: