options.js

return {
  "name": "Text-to-speech",
  "deviceMap": [{ "deviceType": "speech" }]
}

style.less

background: white;
 
.speech-widget {
  padding: 30px 10px 10px;
  text-align: right;
  
  .icon {
    font-size: 160px;
    color: hsl(201,73%,54%);
    display: block;
    text-align: center;
    line-height: 0.5em;
    margin: 10px;
  }
  
  button {
    text-align: right;
    background: hsl(201,73%,54%);
    border: 1px solid hsl(201,73%,54%);
    color: white;
  }
 
  input {
    width: 92%;
    display: block;
    margin: 0 auto 10px;
  }
 
}

view.html

<div class="speech-widget">
  <span class="icon">&#128227;</span>
  <input class="input" type="text" name="message" placeholder="Message"/>
  <button class="button blue-gradient">Say</button>
</div>

widget.js

element.find('button').click(function() {
  scope.ActuateAll(element.find('[name=message]').val());
});