Skip to main content
Version: 9.1

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: Please confirm whether you're running a trial of Qrvey Pro or Qrvey Ultra (don't worry, you can follow along either way, but the UI may differ slightly), as well as received your Qrvey Composer username, password, and platform API key.

1. Prepare Your Data​

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

  1. Create an Application
  2. Configure a Connection
  3. Create a Dataset.

The connection used in this video is available for trial user to follow along. Please reach out to customer support for access.

Additional Resources

2. Create a Dashboard​

Now it's time to use the dataset we've configured 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. And some basic styling to our dashboard
  5. Explore how to preview and publish dashboards.

Additional Resources

3. Embed your Widget​

In this video, we'll go over how to embed your widget in "dev-mode" as well as 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.