Merge pull request #209 from cmu-delphi/sgratzl/feedback

feat: simple feedback button/form

Author: sgratzl

config.toml

@@ -111,3 +111,9 @@ relativeURLs = false
     mission = "Develop the theory and practice of epidemiological forecasting, with a long-term vision of making this technology as universally accepted and useful as weather forecasting is today."
     apiUrl = "https://cmu-delphi.github.io/delphi-epidata"
     twitter = "CmuDelphi"
+    feedbackForm = "https://docs.google.com/forms/d/e/1FAIpQLSeIeOJtrAhdOriEyiRY7LkpQX8DZBY19dl6De8l56Q9CZhmxw/viewform?usp=pp_url&entry.1245962748="
+    feedbackLikelihoodMobile = 0.2
+    feedbackLikelihoodDesktop = 1
+    feedbackDelayMin = 10 # in sec
+    feedbackDelayMax = 100 # in sec
+    feedbackDuration = 60 # show it for 60sec

content/covidcast/_index.md

@@ -7,4 +7,5 @@ order: 1
 modeTitle: Map Overview
 icon: solid/map
 heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg
+feedback: true
 ---

content/covidcast/export.md

@@ -7,4 +7,5 @@ app_mode: export
 order: 6
 icon: solid/download
 heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg
+feedback: true
 ---

content/covidcast/single.md

@@ -7,4 +7,5 @@ app_mode: single
 order: 4
 icon: location-solid
 heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg
+feedback: true
 ---

content/covidcast/survey-results.md

@@ -8,4 +8,5 @@ app_mode: survey-results
 order: 5
 icon: solid/poll
 heroImage: /images/landing-page/hero-images/covidcast_survey.jpg
+feedback: true
 ---

content/covidcast/timelapse.md

@@ -7,4 +7,5 @@ app_mode: timelapse
 order: 2
 icon: solid/clock
 heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg
+feedback: true
 ---

content/covidcast/top10.md

@@ -7,4 +7,5 @@ app_mode: top10
 order: 3
 icon: solid/list
 heroImage: /images/landing-page/hero-images/covidcast_withfill.jpg
+feedback: true
 ---

themes/delphi/assets/css/components/_feedback.scss

@@ -0,0 +1,62 @@
+.feedback-modal {
+  padding-top: 1.5em;
+  height: calc(100vh - 100px);
+  display: block;
+  position: relative;
+}
+
+.feedback-modal > iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.feedback-message {
+  width: unset;
+
+  .uk-notification-message {
+    background: #60a5fa;
+    color: white;
+    border-radius: 5px;
+    padding: 0;
+    font-size: 1rem;
+    cursor: inherit;
+    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25);
+
+    > div {
+      padding: 1.5rem 3rem 1.5rem 1.5rem;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+  }
+
+  .uk-notification-close {
+    color: white;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block !important;
+  }
+
+  .uk-button {
+    background: #2563eb;
+    border-radius: 3px;
+    // padding: 14px 24px 14px 24px;
+  }
+}
+
+.feedback-text {
+  margin-right: 1em;
+}
+
+@media only screen and (max-width: 550px) {
+  .feedback-message {
+    .uk-notification-message > div {
+      flex-direction: column;
+    }
+
+    .uk-button {
+      margin-top: 0.5em;
+    }
+  }
+}

themes/delphi/assets/css/main.scss

@@ -23,6 +23,7 @@
 @import "./components/card_grid";
 @import "./components/latest_card";
 @import "./components/toc";
+@import "./components/feedback";
 
 // Page Designs
 @import "./pages/about";

themes/delphi/assets/js/feedback-button.js

@@ -0,0 +1,88 @@
+import UIkit from "uikit/dist/js/uikit.js";
+
+(() => {
+  const markSubmitted = () => {
+    if (!localStorage) {
+      return;
+    }
+    // expires in a month
+    const expiresAt = new Date();
+    expiresAt.setMonth(expiresAt.getMonth() + 1);
+    localStorage.setItem("feedback-submitted", expiresAt.toString());
+
+    // send a google analytics event
+    if (window.ga) {
+      window.ga("send", "event", "feedback", "open", "show feedback form", "true");
+    }
+  };
+  const wasRecentlySubmitted = () => {
+    if (!localStorage) {
+      return false;
+    }
+    const r = localStorage.getItem("feedback-submitted");
+    if (!r) {
+      return false;
+    }
+    const expiresAt = new Date(r);
+    // check if expired
+    return expiresAt > new Date();
+  };
+
+  const showForm = (formLink) => {
+    const url = `${formLink}${encodeURIComponent(location.href)}&embedded=true`;
+    UIkit.modal.dialog(
+      `<button class="uk-modal-close-default" type="button" uk-close></button><div class="feedback-modal"><iframe src="${url}" uk-video></iframe></div>`
+    );
+  };
+  const btn = document.querySelector(".feedback-button");
+  if (btn) {
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      markSubmitted();
+      showForm(btn.href);
+    });
+  }
+
+  const container = document.querySelector(".feedback-popup-container");
+
+  if (container && !wasRecentlySubmitted()) {
+    const delayMin = Number.parseInt(container.dataset.delayMin, 10) * 1000;
+    const delayMax = Number.parseInt(container.dataset.delayMax, 10) * 1000;
+    const delay = delayMin + Math.random() * (delayMax - delayMin);
+
+    const feedbackLikelihoodDesktop = Number.parseFloat(container.dataset.likeDesktop);
+    const feedbackLikelihoodMobile = Number.parseFloat(container.dataset.likeMobile);
+    const isMobile = window.matchMedia("only screen and (max-width: 700px)").matches;
+
+    const showByChance =
+      (isMobile && Math.random() <= feedbackLikelihoodMobile) ||
+      (!isMobile && Math.random() <= feedbackLikelihoodDesktop);
+
+    const duration = Number.parseInt(container.dataset.duration, 10) * 1000;
+    const formLink = container.dataset.href;
+
+    const showFeedbackNotification = () => {
+      const elem = UIkit.notification({
+        message: container.innerHTML,
+        pos: "bottom-right",
+        timeout: duration,
+        clsContainer: "feedback-message uk-notification",
+      });
+      elem.$el.querySelector("div").addEventListener("click", (e) => {
+        // stop auto close
+        e.stopPropagation();
+        e.preventDefault();
+      });
+      elem.$el.querySelector(".feedback-button").addEventListener("click", (e) => {
+        e.preventDefault();
+        elem.close(true);
+        markSubmitted();
+        showForm(formLink);
+      });
+    };
+    // initial delay
+    if (showByChance) {
+      setTimeout(showFeedbackNotification, delay);
+    }
+  }
+})();