DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Display a sticky feedback box with Vue.js
FlyNestor
FlyNestor

Posted on

Display a sticky feedback box with Vue.js

One of the first thing to implement with a MVP (minimum viable product) is a feedback form to know which feature the users are interested in.

The feedback form is also useful if a user has found a bug.

At first I have just made the contact form. The link to the contact form is in the footer of the Home page. I have got some feedbacks with that form but I want to get more. Not all the users are scrolling all the way to the footer section.

What are sticky elements?
Sticky elements are the features that appear to follow you down the page as you scroll. You can see an example on the bottom right corner of my website Rollideo.

You can put a text like β€œFeedback” or β€œNeed help?” on the sticky element.

To display a sticky element with Vue.js, you need to install vue-sticky-directive.

In the template, you can include the container element sticky-container at the beginning.

<template>
<div>
<div sticky-container>
Enter fullscreen mode Exit fullscreen mode

If you want the sticky element to be displayed at the bottom of the webpage you can put the sticky element after the footer section.

In the sticky element I have included a link to the contact page.

<div v-sticky sticky-side="bottom">
<div align="right" class="row-full">
<span> 
<a v-bind:href="apiUrl + '/contact'">Feedback</a>  
</span>
</div>
</div>
Enter fullscreen mode Exit fullscreen mode

In my particular case I want the sticky element to be displayed in the bottom right corner of the webpage, so I have added a CSS class row-full with a width of 100vw (100% width of the viewport).

To make the element looks like a box, we can add a span section with a background color and a border. In the CSS it’s defined as .row-full span:first-child.

.row-full{
font-size: 0.75rem;
padding-bottom: 1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
width: 100vw;
position: relative;
margin-left: -50vw;
height: 25px;
margin-top: 100px;
left: 50%;
}

.row-full span:first-child {
padding: 0.5rem;
background-color: rgb(250, 255, 151);
border-radius:5px;
border:2px solid #c6c2be;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-bottom:0;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await