Custom design

How you can implement own design for your voice trackers

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. There is a CSS editor when you open the button "Custom design"

custom-design-voice-trackers.png

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 visual editor.

CSS Editor for voice trackers

Our widget's core building block is "skitt-ui", which comes from "Speech Kit User Interface".

Another essential thing to keep in mind is that you need to put your tracker theme to "Custom Design" when you are ready with the CSS editor.

CSS template

If 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.

#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
}
Icon