Skip to main content

Implement Survey

This is where our apps truly shines, we every conceivable cases, and if we don't message us.

Using web endpoint​

1. Share the url​

This is a quick and easy way to share your web link. You can provide a link for your users to following

Target URL
https://quick-feedback.xyz/endpoint/survey-question?key=API_KEY

2. Embed it in your website​

<iframe
  title="Inline feedback"
  width="400"
  height="300"
  src="https://quick-feedback.xyz/endpoint/survey-question?key=API_KEY"
></iframe>
https://quick-feedback.xyz/endpoint/survey-question?key=API_KEY

3. Share it using auto-generated QR codes​

URL for QR
https://quick-feedback.xyz/endpoint/survey-question?key=API_KEY&qr=true
https://quick-feedback.xyz/endpoint/survey-question?key=API_KEY&qr=true

More on using Endpoints

APIs​

1. REST API​

Fetching survey questions​

Using api keys, you can fetch a survey or post feedbacks.

Survey question
const apiURL = "https://quick-feedback.xyz/api/survey-question?key=API_KEY";

fetch(apiURL)
  .then((res) => console.log(res.json()))
  .catch((err) => console.error(err));
response.json
{
  "id": 5,
  "api_key": "API_KEY",
  "title": "Site performance",
  "question": "How would you rate our website load time",
  "data": null
}

Post the feedback​

To post a feedback, you need post

Example.ts
fetch("https://quick-feedback.xyz/api/post-feedback?key=API_KEY", {
  method: "POST",
  body: JSON.stringify({
    rating: 5,
    message:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
  }),
});

2. Emails​

This will automatically send email to the email address provided

Email trigger
https://quick-feedback.xyz/api/survey-question?key=API_KEY&email=example@email.com
<div className="email-container">
  <h2>Survey title</h2>
  <p>Survey Question</p>
  <p>
    <strong>
      We value your feedback! Please take a moment to rate our service
    </strong>
  </p>
  <p>
    <a
      href="https://quick-feedback.xyz/api/survey-question?key={{apiKey}}&hash={{hashValue}}"
      className="button"
      target="_blank"
    >
      Rate your experience
    </a>
  </p>
  <p className="footer">
    If you did not request this survey, you can ignore this email.
  </p>
</div>

More on using APIs

Node​

If you are using node.js, you can use npm

npm
# download the package
npm install quick-feedback

Fetching surveys​

index.ts
import createFB from "quick-feedback";

const quickFB = createFB("API_KEY");
const { data, error } = quickFB.get("survey-question");
response.json
{
  "id": 5,
  "api_key": "API_KEY",
  "title": "Site performance",
  "question": "How would you rate our website load time",
  "data": null
}

Posting feedbacks​

index.ts
const { data, error } = quickFB.post({
  rating: 5,
  message:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
});
response.json
{
  "status": 201,
  "statusText": "Successful"
}

More on using Nodejs

Scripts​

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Sample</title>
  </head>
  <body>
    <div id="container">JS not supported</div>
    <script src="https://cdn.jsdelivr.net/npm/quick-feedback@latest/dist/index.js"></script>
  </body>
</html>
const quickFB = new QuickFB();

// initialise with api key to use anywhere
quickFB.init("API_KEY");

quickFB.render("#container", {
  /** options **/
});

// uses api key: API_KEY
const survey = quickFB.fetchSurvey();

// fetch with a specific api key
const survey = quickFB.fetchSurvey("API_KEY");
response.json
{
  "id": 5,
  "api_key": "API_KEY",
  "title": "Site performance",
  "question": "How would you rate our website load time"
}

React​

React Elements​

import React from "react";
import { QBForm } from "react-quick-feedback";

function ReviewForm() {
  return <QBForm apiKey="API_KEY" />;
}

Hooks​

Written in pure javascript, to support react as well as react-native

import React from "react";
import { useForm } from "quick-feedback-hooks";

function ReviewForm() {
  const { state, handleSubmit, errorMSG, onChange } = useForm("API_KEY");
  if (state.succeeded) {
    return <Text>Thanks for your feedback!</Text>;
  }

  return (
    <View>
      <TextInput
        value={value.message}
        onChangeText={(value) => console.log("message", value)}
      />
      <TextInput
        value={String(value.rating)}
        onChangeText={(value) => console.log("message", value)}
      />
      <TextInput
        value={value.params?.gender}
        onChangeText={(value) => console.log("params.gender", value)}
      />
      <Text style={{ color: "red" }}>{errorMSG}</Text>
      <Button title="Submit" onPress={handleSubmit} />
    </View>
  );
}