Skip to main content
Version: 9.3

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 getting started with 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.

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 Using 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 AND 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: