Skip to main content
Version: 9.2

Qrvey Quickstart Guide

Greetings Qrveyer! Whether you're getting started with Qrvey Pro or Qrvey Ultra, this guide will take you from "zero to embedded"!

Before you Begin: Confirm whether you're running a trial of Qrvey Pro or Qrvey Ultra (you can follow along either way, but the UI may differ slightly) and ensure you've received your Qrvey Composer username, password, and platform API key.

1. Prepare Your Data​

Once your platform is running, you'll need to get your data into Qrvey. To do this:

  1. Create an Application.
  2. Configure a Connection.
  3. Create a Dataset.
    • If using Qrvey Pro, choose "New Live Connect Dataset".
    • Select the data view dbo.CustomerSummaryView. Its data is ready for analysis.

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

Additional Resources

2. Create a Dashboard​

Now use the dataset to build an analytics dashboard. In this video, we will:

  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. Explore how to preview and publish dashboards.

Additional Resources

3. Embed your Widget​

In this video, we'll cover how to embed your widget in "dev-mode" and by using Qrvey's authentication API.

Additional Resources

Code Samples​

You can review the code snippets from this quickstart embed tutorial below, browse and fork items from our Codepen Widget Library, or clone a backend test server on GitHub.

<!-- 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" });
  }
});

4. Next Steps​

Here are additional resources to help make your embedded widgets production-ready: