feat: simple feedback button/form

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);
+    }
+  }
+})();

themes/delphi/assets/js/main.js

@@ -1,5 +1,6 @@
 import UIkit from "uikit/dist/js/uikit.js";
 import plugin from "uikit/dist/js/uikit-icons.js";
+import "./feedback-button";
 UIkit.use(plugin);
 
 // re export for COVIDcast

themes/delphi/layouts/partials/footer.html

@@ -40,8 +40,31 @@ <h5 class="uk-text-bold">Contact</h5>
           <li>
             <a class="uk-link-text uk-text-small" href="https://twitter.com/{{ .Site.Params.twitter }}/">Twitter</a>
           </li>
+          <li>
+            <a class="uk-link-text uk-text-small feedback-button" href="{{ .Site.Params.feedbackForm }}"
+              >Submit Feedback</a
+            >
+          </li>
         </ul>
       </div>
     </div>
   </div>
 </footer>
+{{ if .Params.feedback }}
+  <div
+    class="feedback-popup-container"
+    style="display: none"
+    data-href="{{ .Site.Params.feedbackForm }}"
+    data-like-mobile="{{ .Site.Params.feedbackLikelihoodMobile }}"
+    data-like-desktop="{{ .Site.Params.feedbackLikelihoodDesktop }}"
+    data-delay-min="{{ .Site.Params.feedbackDelayMin }}"
+    data-delay-max="{{ .Site.Params.feedbackDelayMax }}"
+    data-duration="{{ .Site.Params.feedbackDuration }}"
+  >
+    <div>
+      {{ partial "font-awesome.html" "solid/question-circle" }}
+      <span class="feedback-text">We'd love to hear from you</span>
+    </div>
+    <button class="uk-button uk-button-primary feedback-button">Feedback survey</button>
+  </div>
+{{ end }}