The Mouseflow feedback campaign is added directly to your website so that any CSS code you have loaded on the page will also apply to the feedback campaign widget. Here is how the widget appears with no extra CSS code:

Center the feedback campaign dialog

You can add the following CSS code to your website so that when the feedback campaign widget is open, it will be positioned in the center of the screen.

#mouseflow .mf-feedback .mf-step {
top: calc(50vh - 150px) !important;
left: calc(50vw - 150px) !important;
bottom: auto !important;
right: auto !important;
}

Optionally, you may want to use a lightbox to darken the rest of the screen. This can be done by using the CSS psuedo-elements.

#mouseflow .mf-feedback::before {
content: " ";
display: block;
height: 100%;
width: 100%;
position: fixed;
top: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}

Add a logo to the header

You can add a custom logo to the header of the feedback campaign.

#mouseflow .mf-widget-text {
display: inline-flex !important;
align-items: center;
}

#mouseflow .mf-widget-text::before {
content: " ";
display: inline-block;
background-image: url(/path/to/your/image);
min-height: 40px;
min-width: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 0.5em;
}

You may adjust the min-height and min-width properties of this CSS code to change the size of the logo.

Adding square borders

The rounded borders may clash with your website's design, so you can fix this with a small bit of CSS code.

#mouseflow .mf-step {
border-radius: 0px;
}

Did this answer your question?