Skip to content

Commit c7ef9d0

Browse files
npentrelnpentrel
authored
DOCS-734: Add feedback form (#1363)
1 parent 3ce8c75 commit c7ef9d0

File tree

5 files changed

+101
-43
lines changed

5 files changed

+101
-43
lines changed

‎assets/scss/_styles_project.scss

+14-1
Original file line numberDiff line numberDiff line change
@@ -786,7 +786,6 @@ footer small {
786786
.feedback--response {
787787
display: none;
788788
margin-top: 1em;
789-
text-align: center;
790789
}
791790

792791
.feedback--answer {
@@ -797,6 +796,20 @@ footer small {
797796
display: block;
798797
}
799798

799+
.feedback-form {
800+
display: flex;
801+
justify-content: center;
802+
align-items: center;
803+
}
804+
805+
.feedback-form > button {
806+
margin-left: 0.5rem;
807+
}
808+
809+
.feedback-ty {
810+
text-align: center;
811+
}
812+
800813
/* END Feedback container */
801814

802815
.glossary-anchor {

‎config.toml

+2-2
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@ sidebar_search_disable = true
9191

9292
[params.ui.feedback]
9393
enable = true
94-
yes = 'Glad to hear it! If there is anything we could be doing better, please <a href="https://github.com/viamrobotics/docs/issues/new">create an issue</a>.'
95-
no = "We're sorry about that. If you'd like to talk to us for help, please join the <a href='https://discord.gg/viam'>Community Discord</a>. To ensure we know what's wrong with this page, you can also <a href='https://github.com/viamrobotics/docs/issues/new'>open an issue</a>."
94+
yes = 'Glad to hear it! If you have any other feeback please let us know:'
95+
no = "We're sorry about that. To help us improve, please tell us what we can do better:"
9696

9797
[params.ui.readingtime]
9898
enable = false

‎config_dev.toml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
baseURL = "http://localhost"
2-
disableAliases = true
2+
disableAliases = true

‎layouts/docs/content.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ <h4>
6969
{{ end }}
7070
{{ partial "page-meta-lastmod.html" . }}
7171
{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
72-
{{ partial "feedback.html" .Site.Params.ui.feedback }}
72+
{{ partial "feedback.html" . }}
7373
<br />
7474
{{ end }}
7575
</div>

‎layouts/partials/feedback.html

+83-38
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,87 @@
1-
<div class="d-print-none feedback">
2-
<div class="feedback--prompt">
3-
<p class="feedback--question">Was this page helpful?</p>
4-
<button class="docsbutton feedbackButton feedback--answer feedback--answer-yes">Yes</button>
5-
<button class="docsbutton feedback--answer feedback--answer-no">No</button>
1+
<div class="d-print-none feedback">
2+
<div class="feedback--prompt">
3+
<p class="feedback--question">Was this page helpful?</p>
4+
<button class="docsbutton feedbackButton feedback--answer feedback--answer-yes">Yes</button>
5+
<button class="docsbutton feedback--answer feedback--answer-no">No</button>
6+
</div>
7+
<div class="feedback--response feedback--response-yes">
8+
<p>{{ .Site.Params.ui.feedback.yes | safeHTML }}</p>
9+
<div class="feedback-form">
10+
<input type="hidden" name="url" id="feedback-url" value="{{.Permalink}}">
11+
<textarea name="feedback" id="yes-feedback-text" value="Feedback" style="width:50%; height:100px;"></textarea>
12+
<button class="docsbutton feedback--answer" type="submit" id="yesSubmitButton">Send</button>
13+
</div>
14+
</div>
15+
<div class="feedback--response feedback--response-no">
16+
<p>{{ .Site.Params.ui.feedback.no | safeHTML }}</p>
17+
<div class="feedback-form">
18+
<input type="hidden" name="url" id="feedback-url" value="{{.Permalink}}">
19+
<textarea name="feedback" id="no-feedback-text" value="Feedback" style="width:50%; height:100px;"></textarea>
20+
<button class="docsbutton feedback--answer" type="submit" id="noSubmitButton">Send</button>
621
</div>
7-
<p class="feedback--response feedback--response-yes">
8-
{{ .yes | safeHTML }}
9-
</p>
10-
<p class="feedback--response feedback--response-no">
11-
{{ .no | safeHTML }}
12-
</p>
1322
</div>
14-
<script>
15-
const yesButton = document.querySelector('.feedback--answer-yes');
16-
const noButton = document.querySelector('.feedback--answer-no');
17-
const yesResponse = document.querySelector('.feedback--response-yes');
18-
const noResponse = document.querySelector('.feedback--response-no');
19-
const disableButtons = () => {
20-
yesButton.disabled = true;
21-
noButton.disabled = true;
23+
<div class="feedback--response feedback-ty"><p>Thank you!</p><div>
24+
</div>
25+
<script>
26+
const yesButton = document.querySelector('.feedback--answer-yes');
27+
const noButton = document.querySelector('.feedback--answer-no');
28+
const yesResponse = document.querySelector('.feedback--response-yes');
29+
const noResponse = document.querySelector('.feedback--response-no');
30+
const yesFeedback = document.querySelector('#yes-feedback-text');
31+
const noFeedback = document.querySelector('#no-feedback-text');
32+
const yesSubmitButton = document.querySelector('#yesSubmitButton');
33+
const noSubmitButton = document.querySelector('#noSubmitButton');
34+
const tyResponse = document.querySelector('.feedback-ty');
35+
const disableButtons = () => {
36+
yesButton.disabled = true;
37+
noButton.disabled = true;
38+
};
39+
const sendFeedback = (value) => {
40+
if (typeof gtag !== 'function') return;
41+
const args = {
42+
event_category: 'docs_helpful',
43+
event_label: window.location.pathname,
44+
value: value
2245
};
23-
const sendFeedback = (value) => {
24-
if (typeof gtag !== 'function') return;
25-
const args = {
26-
event_category: 'docs_helpful',
27-
event_label: window.location.pathname,
28-
value: value
29-
};
30-
gtag('event', 'click', args);
46+
gtag('event', 'click', args);
47+
};
48+
async function sendFeedbackText (value, text) {
49+
async function logJSONData(data) {
50+
return fetch("https://feedback-43tn7xos3a-uc.a.run.app", {
51+
method: "POST",
52+
headers: {
53+
"Content-Type": "application/json",
54+
},
55+
mode: "cors",
56+
credentials: "omit",
57+
body: JSON.stringify(data)
58+
});
59+
}
60+
let data = {
61+
value: value,
62+
feedback: text,
63+
url: "{{.Permalink}}"
3164
};
32-
yesButton.addEventListener('click', () => {
33-
yesResponse.classList.add('feedback--response__visible');
34-
disableButtons();
35-
sendFeedback(1);
36-
});
37-
noButton.addEventListener('click', () => {
38-
noResponse.classList.add('feedback--response__visible');
39-
disableButtons();
40-
sendFeedback(0);
41-
});
42-
</script>
65+
let res = await logJSONData(data);
66+
};
67+
yesButton.addEventListener('click', () => {
68+
yesResponse.classList.add('feedback--response__visible');
69+
disableButtons();
70+
sendFeedback(1);
71+
});
72+
noButton.addEventListener('click', () => {
73+
noResponse.classList.add('feedback--response__visible');
74+
disableButtons();
75+
sendFeedback(0);
76+
});
77+
yesSubmitButton.addEventListener('click', () => {
78+
yesResponse.classList.remove('feedback--response__visible');
79+
tyResponse.classList.add('feedback--response__visible');
80+
sendFeedbackText(1, yesFeedback.value);
81+
});
82+
noSubmitButton.addEventListener('click', () => {
83+
noResponse.classList.remove('feedback--response__visible');
84+
tyResponse.classList.add('feedback--response__visible');
85+
sendFeedbackText(0, noFeedback.value);
86+
});
87+
</script>

0 commit comments

Comments
 (0)