Add a feedback widget to end of each page

src/_includes/trailing.html

@@ -0,0 +1,40 @@
+{% assign repo = repo | default: site.repo.this -%}
+{% capture pageSource -%} {{repo}}/tree/{{site.branch}}/{{page.inputPath | replace: './', ''}} {%- endcapture -%}
+{% assign url = site.url | append: page.url -%}
+
+<div id="trailing-content">
+  <div id="page-feedback">
+    <div class="feedback initial-feedback">
+      <div>Was this page's content helpful?</div>
+      <div class="feedback-buttons">
+        <button id="feedback-up-button" class="icon-button" aria-label="Yes, this page was helpful" title="Helpful">
+          <span class="material-symbols" aria-hidden="true">thumb_up</span>
+        </button>
+        <button id="feedback-down-button" class="icon-button" aria-label="No, this page was not helpful or had an issue" title="Not helpful or had issue">
+          <span class="material-symbols" aria-hidden="true">thumb_down</span>
+        </button>
+      </div>
+    </div>
+    <div class="feedback good-feedback">
+      <div>Thank you for your feedback!</div>
+      <a href="{{repo}}/issues/new?labels=from.page-feedback" class="text-button" aria-label="Provide feedback">
+        <span class="material-symbols" aria-hidden="true">feedback</span>
+        <span>Provide details</span>
+      </a>
+    </div>
+    <div class="feedback bad-feedback">
+      <div>Thank you for your feedback! Please let us know what we can do to improve.</div>
+      <a href="{{repo}}/issues/new?labels=from.page-feedback" class="text-button" aria-label="Provide feedback or report an issue">
+        <span class="material-symbols" aria-hidden="true">bug_report</span>
+        <span>Provide details</span>
+      </a>
+    </div>
+  </div>
+
+  <p id="page-github-links">
+    <span>Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on {{page.date | toSimpleDate}}.</span>
+    <a href="{{pageSource}}" target="_blank" rel="noopener">View source</a>
+    <span> or </span>
+    <a href="{{repo}}/issues/new?template=1_page_issue.yml&&page-url={{url}}&page-source={{pageSource}}" title="Report an issue with this page" target="_blank" rel="noopener">report an issue</a>.
+  </p>
+</div>

src/_layouts/base.html

@@ -18,6 +18,10 @@
 
     {%- if isProduction == true -%}
       <meta name="google-site-verification" content="{{ site.google_site_verification }}">
+    {% endif -%}
+      <script>
+        window.dataLayer = window.dataLayer || [];
+      </script>
       <script>
         (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -33,7 +37,6 @@
         ga('create', '{{ site.google_analytics_id }}', 'auto');
         ga('send', 'pageview');
       </script>
-    {% endif -%}
 
     {% assign desc = description | default: site.description | strip_html | strip_newlines | truncate: 160 -%}
     {% unless desc and desc != '' -%}

src/_layouts/default.html

@@ -32,7 +32,7 @@ <h1 id="document-title">{{ title }}</h1>
 
       {% include next-prev-nav.html prev=prev, next=next %}
 
-      {% include page-github-links.html %}
+      {% include trailing.html %}
     </article>
   </main>
 </div>

src/_sass/components/_button.scss

@@ -24,20 +24,24 @@ a, button {
   background: none;
   cursor: pointer;
 
-  &.filled-button {
+  &.filled-button, &.text-button {
     display: flex;
     align-items: center;
     width: fit-content;
     white-space: nowrap;
     outline-offset: 2px;
     border-radius: 24px;
     font-weight: 500;
+    gap: 0.3rem;
     padding: 0.5rem 1rem;
-    background-color: $site-color-primary;
-    color: $site-color-white;
     text-decoration: none;
     cursor: pointer;
     user-select: none;
+  }
+
+  &.filled-button {
+    background-color: $site-color-primary;
+    color: $site-color-white;
 
     &:hover {
       @include mixins.interaction-style(8%);
@@ -48,6 +52,18 @@ a, button {
     }
   }
 
+  &.text-button {
+    color: $site-color-primary;
+
+    &:hover {
+      @include mixins.interaction-style(4%);
+    }
+
+    &:active {
+      @include mixins.interaction-style(8%);
+    }
+  }
+
   &.icon-button {
     border-radius: 0.25rem;
     padding: 0.25rem;

src/_sass/components/_misc.scss

@@ -32,15 +32,6 @@
   }
 }
 
-#page-github-links {
-  font-style: italic;
-  font-size: 0.75rem;
-  padding-top: 0.5rem;
-  margin-bottom: 0;
-
-  border-top: 0.05rem solid $site-color-light-grey;
-}
-
 // A big button centered on top of an image.
 //
 // The container is typically a <div> element. The div has only 2 children:

src/_sass/components/_trailing.scss

@@ -0,0 +1,76 @@
+@use '../base/variables' as *;
+
+#trailing-content {
+  font-size: 0.875rem;
+  margin: 0;
+  margin-block-start: 1rem;
+  font-family: $site-font-family-ui;
+
+  border-top: 0.05rem solid $site-color-light-grey;
+}
+
+#page-feedback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-block: 0.25rem 0;
+  padding: 0.25rem;
+  height: 4.25rem;
+
+  > .feedback {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.2rem;
+
+    .text-button {
+      padding: 0.25rem 0.5rem;
+
+      span.material-symbols {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .initial-feedback {
+    .feedback-buttons {
+      display: flex;
+      flex-direction: row;
+      gap: 0.5rem;
+
+      span.material-symbols {
+        font-size: 20px;
+      }
+    }
+  }
+
+  .good-feedback, .bad-feedback {
+    display: none;
+  }
+
+  &.feedback-up {
+    .initial-feedback {
+      display: none;
+    }
+
+    .good-feedback {
+      display: flex;
+    }
+  }
+
+  &.feedback-down {
+    .initial-feedback {
+      display: none;
+    }
+
+    .bad-feedback {
+      display: flex;
+    }
+  }
+}
+
+#page-github-links {
+  font-style: italic;
+  font-size: 0.75rem;
+  margin-bottom: 0;
+}

src/_sass/site.scss

@@ -27,6 +27,7 @@
 @use 'components/site-switcher';
 @use 'components/tabs';
 @use 'components/toc';
+@use 'components/trailing';
 
 // Styles for specific pages, alphabetically ordered.
 @use 'pages/not-found';

src/content/assets/js/main.js

@@ -389,6 +389,28 @@ function setupSiteSwitcher() {
   });
 }
 
+function setupFeedback() {
+  const feedbackContainer =
+      document.getElementById('page-feedback');
+  if (!feedbackContainer) return;
+
+  const feedbackUpButton = feedbackContainer.querySelector('#feedback-up-button');
+  const feedbackDownButton = feedbackContainer.querySelector('#feedback-down-button');
+  if (!feedbackUpButton || !feedbackDownButton) return;
+
+  feedbackUpButton.addEventListener('click', (_) => {
+    window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'up'});
+
+    feedbackContainer.classList.add('feedback-up');
+  }, { once: true });
+
+  feedbackDownButton.addEventListener('click', (_) => {
+    window.dataLayer?.push({'event': 'inline_feedback', 'feedback_type': 'down'});
+
+    feedbackContainer.classList.add('feedback-down');
+  }, { once: true });
+}
+
 function setupSite() {
   scrollSidenavIntoView();
   initCookieNotice();
@@ -401,6 +423,7 @@ function setupSite() {
   setupTabs();
 
   setupToc();
+  setupFeedback();
 }
 
 if (document.readyState === 'loading') {