Can I make completely different design of the widgets?

3min
You will probably like our pre-build tracker themes, but you will need a custom design in one moment. You can want to change the microphone icon or perform some other tweaks on the visual widget. That's why we implement the functionality to change the CSS on per tracker basis.
You can find the option on your voice tracker's details page around the "Theme" field:
Implement Custom Design
﻿
You can put your styles in the field, but you should keep our CSS skeletons' structure. For example, take a look of styles for Standart Style - Right: https://cdn.voxpow.com/static/themes/basic-right.css﻿
You can copy the content, change what you decide, adapt to your needs, and put it in the CSS field.
Our widget's core building block is "skitt-ui", which comes from "Speech Kit User Interface".
CSS templateIf you want to copy an example CSS structure, perform your changes and upload it, maybe the most straightforward possibility is to copy and adapt the following template yo your needs.
CSS
|
#skitt-ui {
  display: block !important
}
#skitt-ui.skitt-ui--hidden {
  display: none !important
}
#skitt-ui {
  height: 50px;
  display: inline-block;
  background-color: #2980B2;
  z-index: 1000000000;
  border-radius: 25px;
  position: fixed;
  bottom: 30px;
  right: 20px;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
  cursor: default;
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 16px
}
#skitt-toggle-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  background: url("https://cdn.voxpow.com/static/images/icons/mic.png");
  background-size: 72% 72%;
  background-position: 7px 6px;
  background-repeat: no-repeat;
  -webkit-transition: background-color 400ms ease;
  float: right;
}

label#skitt-toggle-button__label {
  display: none
}

.skitt-ui--not-listening #skitt-toggle-button {
  background-color: #2980B2
}

.skitt-ui--listening #skitt-toggle-button {
  -webkit-animation: listen_pulse 2s ease-out infinite
}

@-webkit-keyframes listen_pulse {
  0% {
    background-color: #2980B2
  }
  50% {
    background-color: #3498DB
  }
  100% {
    background-color: #2980B2
  }
}

.skitt-ui--not-listening #skitt-toggle-button:hover {
  background-color: #3498DB
}

.skitt-ui--listening #skitt-toggle-button:hover {
  background-color: #3498DB
}

#skitt-listening-box {
  float: left;
  display: inline-block;
  line-height: 50px;
  color: #fff
}

#skitt-listening-text {
  display: inline-block;
  overflow: hidden
}

.skitt-ui--not-listening #skitt-listening-text {
  width: 0
}

.skitt-ui--listening #skitt-listening-text {
  width: 100%;
  -webkit-transition: width 1s ease-in-out;
  margin: 0 25px 0 15px
}

#skitt-listening-text__samples {
  font-weight: bold;
  margin-left: 10px
}

#skitt-listening-text__recognized-sentence {
  display: none
}
#skitt-ui {
  display: block !important
}
#skitt-ui.skitt-ui--hidden {
  display: none !important
}
#skitt-ui {
  height: 50px;
  display: inline-block;
  background-color: #2980B2;
  z-index: 1000000000;
  border-radius: 25px;
  position: fixed;
  bottom: 30px;
  right: 20px;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px;
  cursor: default;
  font-family: Lato, Helvetica, Arial, sans-serif;
  font-size: 16px
}
#skitt-toggle-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  background: url("https://cdn.voxpow.com/static/images/icons/mic.png");
  background-size: 72% 72%;
  background-position: 7px 6px;
  background-repeat: no-repeat;
  -webkit-transition: background-color 400ms ease;
  float: right;
}

label#skitt-toggle-button__label {
  display: none
}

.skitt-ui--not-listening #skitt-toggle-button {
  background-color: #2980B2
}

.skitt-ui--listening #skitt-toggle-button {
  -webkit-animation: listen_pulse 2s ease-out infinite
}

@-webkit-keyframes listen_pulse {
  0% {
    background-color: #2980B2
  }
  50% {
    background-color: #3498DB
  }
  100% {
    background-color: #2980B2
  }
}

.skitt-ui--not-listening #skitt-toggle-button:hover {
  background-color: #3498DB
}

.skitt-ui--listening #skitt-toggle-button:hover {
  background-color: #3498DB
}

#skitt-listening-box {
  float: left;
  display: inline-block;
  line-height: 50px;
  color: #fff
}

#skitt-listening-text {
  display: inline-block;
  overflow: hidden
}

.skitt-ui--not-listening #skitt-listening-text {
  width: 0
}

.skitt-ui--listening #skitt-listening-text {
  width: 100%;
  -webkit-transition: width 1s ease-in-out;
  margin: 0 25px 0 15px
}

#skitt-listening-text__samples {
  font-weight: bold;
  margin-left: 10px
}

#skitt-listening-text__recognized-sentence {
  display: none
}
﻿
﻿
Updated 03 Mar 2023
Did this page help you?
Yes
What happens when trial expires?
How reliable Voxpow is?
Docs powered by archbee
TABLE OF CONTENTS
CSS template