Skip to content

Instantly share code, notes, and snippets.

@Arquetipo28

Arquetipo28/index.html

Last active December 21, 2022 19:42
Show Gist options
  • Save Arquetipo28/f3b7dad8183df21fbe79ee09a90fccc7 to your computer and use it in GitHub Desktop.
Save Arquetipo28/f3b7dad8183df21fbe79ee09a90fccc7 to your computer and use it in GitHub Desktop.
Download ZIP
Qrvey Configuration
Raw
index.html
<!DOCTYPE htlm>
<html lang="en">
<body>
<qrvey-end-user settings="EUsetting"></qrvey-end-user>
<script type="text/javascript" src="https://d2be0q12jo392d.cloudfront.net/widgets-launcher/app.js"></script>
<script src="https://cdn.qrvey.com/end-user-run/runEndUser_v4.js"></script>
</body>
</html>
Raw
main.js
var masterObject = {
"domain": 'DOMAIN',
"appid": 'APP_ID',
"userid": 'USER_ID',
}
async function getToken() { //Get sec token
const body = {
...masterObject,
"expiresIn": "10m"
}
const response = await axios.post(
masterObject.domain + "/devapi/v4/core/login/token",
body,
{ headers: { 'Content-Type': 'application/json', 'x-api-key': 'API_KEY' } }
);
console.log(response);
response.data && embedWidget(response.data.token);
}
var myStyles = `
.an-panel-header__button--menu{
display: none !important;
}
`;
function embedWidget(info) { //Inject widget with global settings
widgetContainer = document.querySelector("#enduser");
window['EUsetting'] = { //Setting global endUser settings
"domain": masterObject.domain,
"qv_token": info,
"page_id": 'PAGE_ID',
"styleUrls" : [],
"customCSSRules": myStyles,
custom_styles: true,
}
eu = document.createElement("qrvey-end-user");
eu.setAttribute("settings", "EUsetting");
widgetContainer.append(eu);
}
getToken();
Raw
structure.md

Steps

  • Import the functionality for the widget
  • Token request
  • Configuration
  • Component Rendering

Import the necessary code to the page

Add the following to the index.html

<script type="text/javascript" src="https://d2be0q12jo392d.cloudfront.net/widgets-launcher/app.js"></script>
<script src="https://cdn.qrvey.com/end-user-run/runEndUser_v4.js"></script>

Token request

This should be made from the backend where we can handle the secrets key such as the API_KEY, APP_ID or USER_ID securely. In Rails we can create a service with the following code

class QrveyConfigurationService
  PAGE_ID = "PAGE_ID"
  TOKEN_ENDPOINT = "/devapi/v4/core/login/token"
  DOMAIN = ApplicationConfig.qrvey.domain
  MASTER_OBJECT= {
    'domain': DOMAIN,
    'appid': ApplicationConfig.qrvey.app_id,
    'userid': ApplicationConfig.qrvey.user_id,
  };

  def initialize(practice_id:)
    @practice_id = practice_id
  end

  def configuration
    QrveyConfiguration.new({
      id: 1,
      token: token,
      page_id: PAGE_ID,
      domain: DOMAIN,
      custom_styles: true,
    })
  end

  private

  def token
    body = MASTER_OBJECT.merge('expiresIn': '10m')
    response = Curl.post("#{DOMAIN}#{TOKEN_ENDPOINT}", JSON.dump(body)) do |config|
      config.headers["Content-Type"] = "application/json"
      config.headers["x-api-key"] = ApplicationConfig.qrvey.api_key
    end

    JSON.parse(response.body_str)["token"]
  end
end

Passing the token obtained as well as the following properties as a configuration object to the client:

{
  token: string
  page_id: string
  domain: string
  custom_styles: boolean // if it should use custom styles or not
}

Widget configuration

Ater getting the token we would need to initialize our widget, this can be done by setting a property in the window object using the configuration object mentioned above in the following way:

// We can set any property, this should be the same as the used in the widget
window.config = {
  'domain': string,
  'qv_token': token,
  'page_id': pageId,
  'styleUrls': [],
  'customCSSRules': styles,
  custom_styles: customStyles,
}

styles being an string with the css properties that are going to be injected in the widget, for example:

let styles = `
an-panel-header qui-tooltip, an-panel-header button, qui-action-menu{
    display: none !important;
}
`;

more information about styling can be found at https://partners.qrvey.com/docs/embedding/widgets/app-building/widget-page-view?_highlight=styl#overriding-the-default-styles

Component rendering

Once the configuration is already defined in the window object we should add the following element to our html, where the value of the settings property should be the name of the property defined in the window object.

<qrvey-end-user settings="config"></qrvey-end-user>

Filters

To use filters like "date filters" we can do it by using javascript events with the required configuration as the following, in this example we are evaluating two expressions and this will return only those results where both of this expressions are achieved because of the "AND" operator

setDateFilter() {
  let userFilters = {
    filters: [
      {
        'operator': 'AND',
        'expressions': [
          {
            'enabled': true,
            'groupValue': 'day',
            'qrveyid': 'DATASET_ID',
            'questionid': 'COLUMN_ID',
            'questionType': 'DATE',
            'validationType': 'RANGE',
            'value': [
              {
                gte: START_DATE,
                lte: END_DATE,
              },
            ],
          },
          {
            'enabled': true,
            'groupValue': 'day',
            'qrveyid': 'DATASET_ID',
            'questionid': 'COLUMN_ID',
            'questionType': 'DATE',
            'validationType': 'RANGE',
            'value': [
              {
                gte: START_DATE,
                lte: END_DATE,
              },
            ],
          }
        ]
      }
    ]
  }
  window.dispatchEvent(new CustomEvent('atApplyUserFilters', { detail: { "filters": userFilters.filters } }));
}

You can find more information about the filters implementation at https://partners.qrvey.com/docs/embedding/widgets/filters-embedded-scenarios

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment