How to style voice search

Once voice search is implemented on a website, it is possible to use the following CSS selectors and cludoSettings to style how elements should appear on the website.

Disable voice search animation

disableVoiceSearchActiveAnimation: true

Voice icon button

.cludo-voice-icon {
  /* Insert styling */
}

Voice icon

.cludo-voice-icon svg {
  /* Insert styling */
}

Voice icon SVG path

.cludo-voice-icon path{
  /* Insert styling */
}

Active voice search icon

.cludo-voice-active:after{
  /* Insert styling */
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  box-shadow: 0 0 8px rgb(0 0 0 / 30%);
  animation: pulse-dot 1.25s cubic-bezier(.455,.03,.515,.955) -.4s infinite;
}