centersl/n8n-docs
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n-docs.git synced 2026-03-27 09:28:43 +07:00
Code Issues Packages Projects Releases Wiki Activity

Doc 1471 Feedback (#3405)

Browse Source
This commit is contained in:
Deborah Barnard
2025-08-01 20:25:57 +01:00
committed by GitHub
parent a5650ea49e
commit f58916eca2
14 changed files with 199 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
_overrides/main.html
View File

@@ -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 %}

48
_overrides/partials/n8nFeedback.html Normal file
View File

@@ -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 %}

67
docs/_extra/css/feedback.css
View File

@@ -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;
}

69
docs/_extra/javascript/feedback.js Normal file
View File

@@ -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');
}}

BIN
docs/_images/assets/thumb_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 B

BIN
docs/_images/assets/thumb_up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 774 B

2
docs/advanced-ai/index.md
View File

@@ -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

2
docs/api/index.md
View File

@@ -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

2
docs/code/index.md
View File

@@ -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

2
docs/embed/index.md
View File

@@ -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

1
docs/hosting/index.md
View File

@@ -5,6 +5,7 @@ description: Access n8n hosting documentation and guides. Find comprehensive res
contentType: overview
hide:
- toc
- feedback
---
# Self-hosting n8n

1
docs/index.md
View File

@@ -5,6 +5,7 @@ description: Access n8n Docs for comprehensive guides on workflow automation and
contentType: overview
hide:
- path
- feedback
---
# Welcome to n8n Docs

2
docs/integrations/index.md
View File

@@ -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

28
mkdocs.yml
View File

@@ -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