Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feedback widget #19453

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feedback widget #19453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a0c7dca
feedback widget
ebembi-crdb Mar 16, 2025
454d41e
review changes
ebembi-crdb Apr 1, 2025
b40e3f3
review changes
ebembi-crdb Apr 2, 2025
a620cd0
review changes
ebembi-crdb Apr 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
320 changes: 320 additions & 0 deletions src/current/_includes/feedback-widget.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,320 @@
<!-- _includes/feedback-widget.html -->
<div id="sticky-feedback-widget">
<!-- Sticky button with star SVG icon -->
<button id="sticky-rating-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16" role="presentation" aria-hidden="true">
<path fill="currentColor" d="M7.538 1.11a.5.5 0 0 1 .924 0l1.537 3.696a.5.5 0 0 0 .421.306l3.99.32a.5.5 0 0 1 .285.878l-3.04 2.604a.5.5 0 0 0-.16.496l.928 3.893a.5.5 0 0 1-.747.542L8.261 11.76a.5.5 0 0 0-.522 0l-3.415 2.086a.5.5 0 0 1-.747-.542l.928-3.893a.5.5 0 0 0-.16-.496L1.304 6.31a.5.5 0 0 1 .285-.878l3.99-.32A.5.5 0 0 0 6 4.806L7.538 1.11Z"></path>
</svg>
Rate This Page
</button>

<!-- Feedback overlay -->
<div id="feedback-overlay">
<div id="feedback-window">
<span id="feedback-close-btn">&times;</span>

<div id="star-container">
<div id="star-rating">
<span class="star" data-value="1">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</span>
</div>
</div>

<div id="step1" class="feedback-step active">
<p>Please select a star rating above.</p>
</div>

<div id="step2" class="feedback-step">
<h3 id="feedback-heading">Tell us about your experience</h3>
<textarea id="comments" placeholder="Tell us about your experience"></textarea>
<input type="email" id="email" placeholder="Email Address (Optional)" />
<button id="screenshot-btn">Show us a screenshot</button>
<input type="file" id="screenshot" accept="image/*" />
<button id="submit-btn">Send</button>
</div>

<div id="step3" class="feedback-step">
<h3>Thank you for your feedback!</h3>
<p>Your input helps us improve our documentation.</p>
<hr>
<h4>Explore More Documentation:</h4>
<ul id="doc-links">
<li><a href="https://www.cockroachlabs.com/docs/" target="_blank">CockroachDB Docs</a></li>
<li><a href="https://university.cockroachlabs.com/" target="_blank">Cockroach University</a></li>
<li><a href="https://forum.cockroachlabs.com/" target="_blank">Community Forums</a></li>
<li><a href="https://support.cockroachlabs.com/" target="_blank">CockroachDB Support</a></li>
</ul>
</div>
</div>
</div>
</div>

<!-- Styles -->
<style>
#sticky-feedback-widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
position: relative;
z-index: 9999;
}

#sticky-rating-btn {
position: fixed;
bottom: 120px;
right: 20px;
background-color: rgba(76, 14, 255, 0.05);
color: #4C0EFF;
border: 1.5px solid #4C0EFF;
border-radius: 8px;
padding: 10px 16px;
font-size: 12px; /* font size reduced from 14px */
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px; /* gap reduced from 6px */
backdrop-filter: blur(4px);
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#sticky-rating-btn svg {
color: #4C0EFF;
}

#sticky-rating-btn:hover {
background-color: rgba(76, 14, 255, 0.1);
box-shadow: 0 2px 6px rgba(76, 14, 255, 0.2);
}

#feedback-overlay {
display: none;
position: fixed;
bottom: 160px;
right: 20px;
width: 320px; /* width reduced from 420px */
max-width: 90%;
z-index: 10000;
}

#feedback-window {
position: relative;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
padding: 24px;
max-height: 90vh;
overflow-y: auto;
}

#feedback-close-btn {
position: absolute;
top: 8px;
right: 12px;
font-size: 24px;
cursor: pointer;
color: #666;
}

#feedback-close-btn:hover {
color: #333;
}

#star-container {
text-align: center;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

#star-rating {
margin: 8px 0;
}

.star {
font-size: 24px; /* star size reduced from 30px */
color: #ccc;
cursor: pointer;
margin: 0 4px;
transition: transform 0.25s ease, color 0.25s ease;
}

.star.hover, .star.selected {
color: #FFD700;
transform: scale(1.3);
}

.feedback-step {
display: none;
text-align: center;
}

.feedback-step.active {
display: block;
}

textarea, input[type="email"] {
width: 100%;
padding: 10px;
margin: 12px 0;
border: 1px solid #ddd;
border-radius: 12px;
font-size: 12px; /* font size reduced from 14px */
box-sizing: border-box;
}

textarea {
min-height: 100px;
resize: vertical;
}

#screenshot {
display: none;
}

#screenshot-btn, #submit-btn {
background-color: #4C0EFF;
color: #fff;
border: none;
border-radius: 12px;
padding: 10px 16px;
font-size: 12px; /* font size reduced from 14px */
cursor: pointer;
margin-top: 10px;
display: block;
}

#submit-btn {
margin-top: 16px;
width: 100%;
}

#screenshot-btn:hover, #submit-btn:hover {
background-color: #3a0ccc;
}

#doc-links {
list-style-type: none;
padding: 0;
margin-top: 16px;
text-align: left;
}

#doc-links li {
margin: 8px 0;
}

#doc-links a {
text-decoration: none;
color: #4C0EFF;
font-weight: 500;
}

#doc-links a:hover {
text-decoration: underline;
}

#feedback-window h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 16px; /* font size reduced from 18px */
color: #333;
}

#feedback-window h4 {
margin-bottom: 8px;
font-size: 14px; /* font size reduced from 16px */
color: #333;
}

#feedback-window hr {
border: 0;
height: 1px;
background-color: #eee;
margin: 16px 0;
}
</style>

<!-- Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const stickyBtn = document.getElementById('sticky-rating-btn');
const feedbackOverlay = document.getElementById('feedback-overlay');
const feedbackWindow = document.getElementById('feedback-window');
const closeBtn = document.getElementById('feedback-close-btn');
const step1 = document.getElementById('step1');
const step2 = document.getElementById('step2');
const step3 = document.getElementById('step3');
const stars = document.querySelectorAll('.star');
const feedbackHeading = document.getElementById('feedback-heading');
const commentsField = document.getElementById('comments');
const emailField = document.getElementById('email');
const screenshotBtn = document.getElementById('screenshot-btn');
const screenshotField = document.getElementById('screenshot');
const submitBtn = document.getElementById('submit-btn');
let currentRating = 0;

function resetWidget() {
currentRating = 0;
stars.forEach(s => s.classList.remove('selected', 'hover'));
commentsField.value = '';
emailField.value = '';
screenshotField.value = '';
step1.classList.add('active');
step2.classList.remove('active');
step3.classList.remove('active');
feedbackHeading.textContent = 'Tell us about your experience';
commentsField.placeholder = 'Tell us about your experience';
screenshotBtn.textContent = 'Show us a screenshot';
}

stickyBtn.addEventListener('click', () => {
resetWidget();
feedbackOverlay.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
feedbackOverlay.style.display = 'none';
});

stars.forEach(star => {
star.addEventListener('mouseover', () => {
const val = parseInt(star.getAttribute('data-value'), 10);
stars.forEach(s => s.classList.toggle('hover', parseInt(s.getAttribute('data-value'), 10) <= val));
});
star.addEventListener('mouseout', () => {
stars.forEach(s => s.classList.remove('hover'));
});
star.addEventListener('click', () => {
currentRating = parseInt(star.getAttribute('data-value'), 10);
stars.forEach(s => s.classList.toggle('selected', parseInt(s.getAttribute('data-value'), 10) <= currentRating));
step1.classList.remove('active');
step2.classList.add('active');
if (currentRating <= 2) {
feedbackHeading.textContent = 'Tell us how we can improve';
commentsField.placeholder = 'Tell us how we can improve';
screenshotBtn.textContent = 'Show us where the problem is';
} else {
feedbackHeading.textContent = 'Tell us more about your experience';
commentsField.placeholder = 'Tell us more about your experience';
screenshotBtn.textContent = 'Show us a screenshot';
}
});
});

screenshotBtn.addEventListener('click', () => {
screenshotField.click();
});

submitBtn.addEventListener('click', () => {
step2.classList.remove('active');
step3.classList.add('active');
});

feedbackWindow.addEventListener('click', (e) => {
e.stopPropagation();
});
});
</script>
1 change: 1 addition & 0 deletions src/current/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,5 +117,6 @@
});
};
</script>
{% include feedback-widget.html %}
</body>
</html>
Loading