From f58916eca2f3f49a6f0ac1f0a4f345d19d828fc7 Mon Sep 17 00:00:00 2001
From: Deborah Barnard <deborah@deborahwrites.com>
Date: Fri, 1 Aug 2025 20:25:57 +0100
Subject: [PATCH] Doc 1471 Feedback (#3405)

---
 _overrides/main.html                 |  14 +++++-
 _overrides/partials/n8nFeedback.html |  48 +++++++++++++++++++
 docs/_extra/css/feedback.css         |  67 +++++++++++++++++---------
 docs/_extra/javascript/feedback.js   |  69 +++++++++++++++++++++++++++
 docs/_images/assets/thumb_down.png   | Bin 0 -> 648 bytes
 docs/_images/assets/thumb_up.png     | Bin 0 -> 774 bytes
 docs/advanced-ai/index.md            |   2 +
 docs/api/index.md                    |   2 +
 docs/code/index.md                   |   2 +
 docs/embed/index.md                  |   2 +
 docs/hosting/index.md                |   1 +
 docs/index.md                        |   1 +
 docs/integrations/index.md           |   2 +
 mkdocs.yml                           |  28 +++++------
 14 files changed, 199 insertions(+), 39 deletions(-)
 create mode 100644 _overrides/partials/n8nFeedback.html
 create mode 100644 docs/_extra/javascript/feedback.js
 create mode 100644 docs/_images/assets/thumb_down.png
 create mode 100644 docs/_images/assets/thumb_up.png

diff --git a/_overrides/main.html b/_overrides/main.html
index 3b78931c4..58f3eb736 100644
--- a/_overrides/main.html
+++ b/_overrides/main.html
@@ -31,7 +31,12 @@
 <!--
 https://plausible.io/docs/script-extensions?ref=ryansechrest.com#all-our-script-extensions
  -->
-<script defer {% if page.meta and page.meta.contentType %}event-content_type="{{ page.meta.contentType }}"{% endif %} data-domain="docs.n8n.io" src="https://plausible.io/js/script.file-downloads.outbound-links.pageview-props.js"></script>
+
+<script defer {% if page.meta and page.meta.contentType %}event-content_type="{{ page.meta.contentType }}"{% endif %} data-domain="docs.n8n.io" src="https://plausible.io/js/script.file-downloads.outbound-links.pageview-props.tagged-events.js"></script>
+<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+
+
+
 
 <!-- n8n Workflow Preview Service -->
 <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
@@ -57,6 +62,7 @@ https://plausible.io/docs/script-extensions?ref=ryansechrest.com#all-our-script-
 
 {% block scripts %}
   <!-- Add scripts that need to run before here -->
+
   {{ super() }}
   <!-- Add scripts that need to run afterwards here -->
   <script>
@@ -153,3 +159,9 @@ https://plausible.io/docs/script-extensions?ref=ryansechrest.com#all-our-script-
 
   <!---->
 {% endblock %}
+
+
+{% block content %}
+{{ super() }}
+{% include "partials/n8nFeedback.html" %}
+{% endblock %}
\ No newline at end of file
diff --git a/_overrides/partials/n8nFeedback.html b/_overrides/partials/n8nFeedback.html
new file mode 100644
index 000000000..807386f40
--- /dev/null
+++ b/_overrides/partials/n8nFeedback.html
@@ -0,0 +1,48 @@
+<!-- n8n CUSTOM
+ This is a custom partial created by n8n (it isn't part of Material for MkDocs)
+
+ We add it to the site by including it in _overrides/main.html
+ It relies on docs/_extra/javascript/feedback.js to handle the behavior
+ And docs/_extra/css/feedback.css to handle the styling
+ -->
+
+<!-- Determine feedback configuration -->
+{% if config.extra.n8n_extra.feedback %}
+  {% set feedback = config.extra.n8n_extra.feedback %}
+{% endif %}
+
+<!-- Determine whether to show feedback -->
+{% if page.meta and page.meta.hide %}
+  {% if "feedback" in page.meta.hide %}
+    {% set feedback = None %}
+  {% endif %}
+{% endif %}
+
+<!-- Was this page helpful? -->
+{% if feedback %}
+  <div class="n8n-feedback-container">
+        <div id="n8n-ratings-feedback" style="display: flex; gap: 1em; align-items: center;">
+            <span>{{ feedback.question }}</span>
+            <button type="submit" class="plausible-event-name=Positive+Rating plausible-event-page=/{{ page.url }} n8n-feedback-button-positive" onclick="handleRating('positive')" >
+                <img src="/_images/assets/thumb_up.png" alt="Thumbs up" style="width: 20px; height: 20px; border: none !important;">{{ feedback.positive_button_text }}
+            </button>
+            <button type="submit" class="plausible-event-name=Negative+Rating plausible-event-page=/{{ page.url }} n8n-feedback-button-negative" onclick="handleRating('negative')">
+                <img src="/_images/assets/thumb_down.png" alt="Thumbs down" style="width: 20px; height: 20px; border: none !important;">{{ feedback.negative_button_text }}
+            </button>
+        </div>
+        
+        <div id="n8n-feedback-thank-you-message" style="display: none;">
+            {{ feedback.thankyou_message }}
+        </div>
+        
+        <div id="n8n-feedback-comment" style="display: none;">
+            <div class="n8n-feedback-comment-inner">
+                <input type="text" name="n8n-feedback-input" id="n8n-feedback-input" placeholder="{{ feedback.comment_input_placeholder }}">
+                <button type="submit" class="n8n-feedback-submit-button" onclick="submitFeedback()">
+                    Submit
+                </button>
+            </div>
+            <div class="n8n-feedback-comment-hint">{{ feedback.comment_input_hint }}</div>
+        </div>
+    </div>
+{% endif %}
\ No newline at end of file
diff --git a/docs/_extra/css/feedback.css b/docs/_extra/css/feedback.css
index 39eea6f39..f63b9ca04 100644
--- a/docs/_extra/css/feedback.css
+++ b/docs/_extra/css/feedback.css
@@ -1,39 +1,60 @@
-/* form itself */
-.md-feedback {
-	background-color: var(--color-primary-tint-1);
-	padding: 10px;
+/*
+This file contains the styling for the n8nFeedback.html partial
+*/
+
+.n8n-feedback-container {
+    border-top: 1px solid #eee;
+    color: #666;
+    margin-top: 2em; 
+    padding-top: 1em; 
 }
 
-.md-feedback fieldset {
+.n8n-feedback-button-positive, .n8n-feedback-button-negative, .n8n-feedback-submit-button {
+    align-items: center;    
+    border: none;
+    border-radius: .1rem; 
+    color: #333;
+    cursor: pointer;
+    display: flex;
+    gap: 0.5em;
+    padding: 0.5em 1em;
 }
 
-/* form title */
-.md-feedback__title {
-	color: var(--color-primary);
-	font-size: 1.3rem;
+.n8n-feedback-button-positive {
+    background: #90EE90;
 }
 
-/* container for vote buttons and note */
-.md-feedback__inner {
+.n8n-feedback-button-negative {
+    background: #FFB6C1;
 }
 
-/* list of rating buttons */
-.md-feedback__list {
+.n8n-feedback-submit-button {
+    background: var(--color-primary);
+    color: white;
 }
 
-/* rating button icons */
-.md-feedback__icon {
+#n8n-feedback-comment {
+    display: flex; 
+    flex-direction: column; 
+    gap: 0.4em; 
+    width: 100%;
 }
 
-.md-feedback__icon:enabled.md-icon[data-md-value="0"]:hover {
-	color: var(--color-feedback-negative);
+.n8n-feedback-comment-inner {
+    display: flex; 
+    gap: 1em; 
+    align-items: center; 
+    width: 100%;
 }
 
-.md-feedback__icon svg {
-	width: 1.5rem;
-	height: 1.5rem;
+#n8n-feedback-input {
+    flex: 1; 
+    font-size: 1em; 
+    padding: 0.5em; 
+    border: 1px solid #ddd; 
+    border-radius: 0.1rem;
 }
 
-/* post-submission note */
-.md-feedback__note {
-}
+.n8n-feedback-comment-hint {
+    font-size: 0.75em;
+}
\ No newline at end of file
diff --git a/docs/_extra/javascript/feedback.js b/docs/_extra/javascript/feedback.js
new file mode 100644
index 000000000..9d0c62e4e
--- /dev/null
+++ b/docs/_extra/javascript/feedback.js
@@ -0,0 +1,69 @@
+/*
+This script contains the functonality for the n8nFeedback.html partial
+*/
+
+function showElement(id) {{
+    document.getElementById('n8n-ratings-feedback').style.display = 'none';
+    document.getElementById('n8n-feedback-thank-you-message').style.display = 'none';
+    document.getElementById('n8n-feedback-comment').style.display = 'none';
+    document.getElementById(id).style.display = 'flex';
+
+    // Focus the input if showing the feedback form
+    if (id === 'n8n-feedback-comment') {{
+        setTimeout(() => {{
+            const input = document.getElementById('n8n-feedback-input');
+            input.focus();
+            input.onkeydown = function(e) {
+                if (e.key === 'Enter') {{
+                    submitFeedback();
+                }}
+            };
+        }}, 0);
+    }}
+}}
+
+function handleRating(rating) {{
+    // Send event to Google Analytics
+    if (typeof gtag !== 'undefined') {{
+        try {{
+            const eventParams = {
+                'feedback_rating': rating,
+                'page_location': window.location.href,
+                'page_title': document.title
+            };
+            gtag('event', 'feedback', eventParams);
+        }} catch (error) {{
+            console.error('Error sending GA event:', error);
+        }}
+    }} else {{
+        console.warn('Google Analytics (gtag) not found. Event not sent.');
+    }}
+    
+    if (rating === 'positive') {{
+        showElement('n8n-feedback-thank-you-message');
+    }} else {{
+        showElement('n8n-feedback-comment');
+    }}
+}}
+
+function submitFeedback() {{
+    const feedbackText = document.getElementById('n8n-feedback-input').value;
+    // Send feedback to Google Analytics
+    if (typeof gtag !== 'undefined') {{
+        try {{
+            const eventParams = {
+                'feedback_text': feedbackText,
+                'page_location': window.location.href,
+                'page_title': document.title,
+                'feedback_length': feedbackText.length
+            };
+            gtag('event', 'feedback_submitted', eventParams);
+            plausible("Feedback Comment", { props: { page: eventParams.page_location, feedback_comment: eventParams.event_value } });
+        }} catch (error) {{
+            console.error('Error sending GA event:', error);
+        }}
+    }} else {{
+        console.warn('Google Analytics (gtag) not found. Event not sent.');
+    }}
+    showElement('n8n-feedback-thank-you-message');
+}}
\ No newline at end of file
diff --git a/docs/_images/assets/thumb_down.png b/docs/_images/assets/thumb_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..62e946426bcdec098a175101caf29670684eeb58
GIT binary patch
literal 648
zcmV;30(bq1P)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0v$<2K~#7F&6tZ(
z!!Qhn|8fk_5wrnigE9eZK$w7b0@4Y93Cad#gLVVDLBj+s6BMhqunBfZnuq<}{dXY|
zj{J}!6*!-<(oAWkv{O1Z)Q3`r9$?3wl=jZc_NBj@Xoe0U*wtDq-5H0^A%mURxnscR
z+}=3W1uxK(orDZ7Q6FA0p6Rtxfo>?!5q#!&rWv|rXB1@QTyr#r&H``2R_O-qA?S(T
zI^(hy@T{oo;L#Wqfq`F@-qD^+Y3aFNKp&q&=pWg^9K%44copC3ynjdseQ<X8a~>~{
z4qM;NR2(FuP5D7=2MPL9w>H<GRmL&S;0pdC;wRn3UcotZZWVDF<EZu)5V50};gypD
z;zUYO%y5$4AfYWT!;Z=4??jVorVqp+x#psTlpcJ>DMT@!y)0xL!$E?MSgF#pD&v?@
zEYZ6zKS(7=IC?oSsQjQwJtzas(P63XuruTSDvI4G=7RL<pFy};nwUWf)Pri+Nc1ky
zk|}Iwm({S((Xu}tp*aLwedMT~^#ryXWCy+icKi)KphNhD($iKoTQH7^-QeWr<-F}w
zVJ8WBiU@GvNPjyG*hrqM?1B4)V7~_U0h=8CH2<|B=xR8$mBFvYkgyYyhRE|=0&9$j
z5W*|P=QZj!3zAyO$(N8uYjJ{C(6`l%9PG22k*av<+?yaVa_AM4Ut}K<F=2<0sD6h1
iZ96FlHa|*{QJZi1%eWVaeg4$|0000<MNUMnLSTZFt|T1*

literal 0
HcmV?d00001

diff --git a/docs/_images/assets/thumb_up.png b/docs/_images/assets/thumb_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..983e0febb7414ca26f7181e9ecc8050ccfef3488
GIT binary patch
literal 774
zcmV+h1Nr=kP)<h;3K|Lk000e1NJLTq001Ze001Zm1^@s6jQ+T700009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0-H%hK~#7F%~*|j
z+CU6_>DK`m;YOen^q8P*5O;!PgSZofP5_-C=>(<|&`y9iNH<9Qaykq|_k(>2yzkQo
zwq;qTlb&P)?~h3*_nkDI+~5MS?BuzVC;7d{1)+j-YAMGHIX1WeaBH_BM$S#)9K6K^
zfLp0K!*eyx3?Heja_uAsKcPHKClB&}c64njzyEPYkWNB*R>`#~&IC^>i@@~_^lg84
zuwuEbbZ!;Uv2wk_2gATcCFUH^Q_hFNqVEuOMDGS?h@O8a9h^t>jOa8NfX^5Pk}#{Z
zg`<*I(P3U1^px`pF5(*2C<H##(?}!78hjVY73OB88M;!=Sva239)1lMl^+P_oR99h
zlRrp<&-o^HXNW|T3goHSN|{R)!Z4!ufYV@*k*A(yYq>#_3F4TGjX6%o3JDtG3LY^I
zW5y{)Zxd4}H3l&XT&&I1=dRo#V__v6H0WF25NU8UZ4c$akaPY4e=%&NvT)lx6B`E@
z8^Nl84U0aKZ!p$4jXq&Kd?R>8$%(q;l)ST5(m{3&Uy(yW{<PSmyZu(ju*O<g4w&HN
z!WQ}f5yNEf-rWFFvWkf>a2??quA1A7dnV{R)K9no?Y6kIgTz<F$1n{fX#Ythn9C)I
z+G6<R%<6s9i;s&WH4LOM=KdrL(EA4CKnH_F8-c;$N2VS2tJvoOTg-38$Rm{Yqo9VP
znilz^Jn4lIOy+Hc{uNSd<hiKPzwM>O52^+uun=Q5Q{RaGM(#0+++tWds9<h!rCa2!
zH1|X0Dy5g(>X;wjaX3=Nzy-BP^Wa*34GN)xizMYPV%Tq=MI1}f3)0gSPKSY;n*Ap<
zR`)*~M$3QM=Q*}7jpNu3Eynl%AS_%C<yNa!y~&rW7oIKhWOeBx7XSbN07*qoM6N<$
Ef;N_0F#rGn

literal 0
HcmV?d00001

diff --git a/docs/advanced-ai/index.md b/docs/advanced-ai/index.md
index ab68d0e6d..b1e3310a8 100644
--- a/docs/advanced-ai/index.md
+++ b/docs/advanced-ai/index.md
@@ -3,6 +3,8 @@
 title: n8n Advanced AI Documentation and Guides
 description: Use n8n's LangChain integrations to build AI-powered functionality within your workflows. Connect your LangChain functionality to other data sources and services.
 contentType: overview
+hide:
+  - feedback
 ---
 
 # Advanced AI
diff --git a/docs/api/index.md b/docs/api/index.md
index ec6bc8f07..447a83782 100644
--- a/docs/api/index.md
+++ b/docs/api/index.md
@@ -5,6 +5,8 @@ description: Access n8n public REST API documentation and guides. Find comprehen
 contentType: overview
 search:
     boost: 5
+hide:
+  - feedback
 ---
 
 # n8n public REST API
diff --git a/docs/code/index.md b/docs/code/index.md
index d40170894..0d3682b98 100644
--- a/docs/code/index.md
+++ b/docs/code/index.md
@@ -3,6 +3,8 @@
 title: Code in n8n Documentation and Guides
 description: Access documentation and guides on using code and expressions in n8n and other developer resources.
 contentType: overview
+hide:
+  - feedback
 ---
 
 # Code in n8n
diff --git a/docs/embed/index.md b/docs/embed/index.md
index 8c4bccce4..85f032bd5 100644
--- a/docs/embed/index.md
+++ b/docs/embed/index.md
@@ -3,6 +3,8 @@
 title: n8n Embed Documentation and Guides
 description: Learn how to white label and integrate n8n into your products with the Embed feature. Includes usage, costs, licensing, and support details.
 contentType: overview
+hide:
+  - feedback
 ---
 
 # n8n Embed
diff --git a/docs/hosting/index.md b/docs/hosting/index.md
index e82642660..292f8aab4 100644
--- a/docs/hosting/index.md
+++ b/docs/hosting/index.md
@@ -5,6 +5,7 @@ description: Access n8n hosting documentation and guides. Find comprehensive res
 contentType: overview
 hide:
   - toc
+  - feedback
 ---
 
 # Self-hosting n8n
diff --git a/docs/index.md b/docs/index.md
index 04308575f..514420d86 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,6 +5,7 @@ description: Access n8n Docs for comprehensive guides on workflow automation and
 contentType: overview
 hide:
   - path
+  - feedback
 ---
 
 # Welcome to n8n Docs
diff --git a/docs/integrations/index.md b/docs/integrations/index.md
index 3d79f7cec..621acd528 100644
--- a/docs/integrations/index.md
+++ b/docs/integrations/index.md
@@ -3,6 +3,8 @@
 title: n8n Integrations Documentation and Guides
 description: Access n8n integrations documentation and guides. Find comprehensive resources to help you master app integrations using different types of nodes to improve your automation workflows.
 contentType: overview
+hide:
+  - feedback
 ---
 
 # Integrations
diff --git a/mkdocs.yml b/mkdocs.yml
index 6d4563547..ba5b3ca61 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -53,23 +53,18 @@ extra:
   analytics:
     provider: google
     property: G-0SC4FF2FH9
-    feedback:
-      title: Was this page helpful?
-      ratings:
-        - icon: material/emoticon-happy-outline
-          name: This page was helpful
-          data: 1
-          note: >-
-            Thanks for your feedback!
-        - icon: material/emoticon-sad-outline
-          name: This page wasn't helpful
-          data: 0
-          note: >-
-            Thanks for your feedback! Help us improve this page by
-            submitting an issue or a fix in our <a href="https://github.com/n8n-io/n8n-docs" target="_blank" rel="noopener">GitHub repo</a>.
   # https://squidfunk.github.io/mkdocs-material/reference/#setting-the-page-status
   status:
     beta: This feature is in beta
+  # Additional YAML for n8n-specific templates and functionality
+  n8n_extra:
+    feedback:
+      question: This page was
+      positive_button_text: Helpful
+      negative_button_text: Not helpful
+      comment_input_placeholder: This page needs...
+      comment_input_hint: We read all feedback personally
+      thankyou_message: Thanks for your feedback!
 # https://squidfunk.github.io/mkdocs-material/customization/?h=#additional-css
 extra_css:
   - _extra/css/extra.css
@@ -79,10 +74,13 @@ extra_css:
   - _extra/css/feedback.css
 # https://squidfunk.github.io/mkdocs-material/customization/?h=#additional-javascript
 extra_javascript:
+  - _extra/javascript/feedback.js
   - _extra/javascript/init_kapa_widget.js
+
 watch:
   - _glossary
   - _snippets
+  - _overrides
 markdown_extensions:
   # used for https://squidfunk.github.io/mkdocs-material/reference/tooltips/
   - abbr
@@ -159,7 +157,7 @@ plugins:
   # - info
   - exclude:
       glob:
-       #- integrations/builtin/*
+       # - integrations/builtin/*
   # https://squidfunk.github.io/mkdocs-material/reference/images/#lightbox
   - glightbox:
       touchNavigation: false