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>

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>

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