Advanced settings enable you to track your participant responses via google analytics. It also enables you to enter your own custom CSS and js to modify the look and feel of your custom to match your brand.

Below are some of the code snippets to get started.

1) Update custom fonts to Mitr google font.

<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<style>
.qw__wrapper.v1-wrapper{
font-family: 'Mitr', sans-serif;
}
</style>

2) Change button color

<style>
.qw__wrapper.v1-wrapper .btn, .qw__wrapper.v1-wrapper .skin-overlay-btn, .qw__wrapper.v1-wrapper .dropdown-overlay-btn {
color: #fff !important;
}
</style>

3) Add your own Favicon for your survey.

<link rel="apple-touch-icon" sizes="180x180" href="<IMAGE_URL>">
<link rel="icon" type="image/png" sizes="32x32" href="<IMAGE_URL>">
<link rel="icon" type="image/png" sizes="16x16" href="<IMAGE_URL>">

4) Show question title for mobile breakpoint for video survey.

<style>
@media only screen and (max-width: 767px){
.qw__wrapper.v1-wrapper .split-layout.controls-enabled .question-head{
display: block !important;
}
.qw__wrapper.v1-wrapper .split-layout.controls-enabled .question-number {
display: none !important;
}
.qw__wrapper.v1-wrapper .split-layout.controls-enabled .question-head .question-title{
text-align: center;
color: #fff;
}
}
</style>

5) Modify border-radius

<style>
.qw__wrapper.v1-wrapper .component_icon_container, .qw__wrapper.v1-wrapper .btn, .qw__wrapper.v1-wrapper .skin-overlay-btn, .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .progress-wrap , .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .branding-btn, .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .cy-select, .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .next-arrow-v2, .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .prev-arrow-v2, .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .next-arrow-v2, .qw__wrapper.v1-wrapper .sticky-footer .footer-panel .prev-arrow-v2{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
</style>

6) Hide keyboard shortcut text

<style>
.qw__wrapper.v1-wrapper .bottom-label, .qw__wrapper.v1-wrapper .user-info {
display: none!important;
}
</style>

Did this answer your question?