(Optional) Change The Look

1. Change the colours of the dialog box 

Use Chrome to inspect the CSS classes you want to change. Then create a CSS file with those changes and reference them in the Speebly embed scrip script (dialogStyleOverride). Voila!

<script src="https://voice.speebly.co/live/speably-widget.js"></script>
<script>
  SpeablyWidget.mount({
  dialogFlowAccessToken: '6cb4d7442eb94f889ec4b068fce59494',
  buttonVisible: true,
  dialogStyleOverride: 'Add your URL here',
  language: 'en',
  voiceId: 'Joanna',
  mode: 'voice',
  });
</script>

2. Change the mic that opens the dialog

Use the script below to embed the Speebly agent to your site and replace the SVG URL with your own. Add whatever styling you want to the SVG itself.

<script src="https://voice.speebly.co/live/speably-widget.js"></script> 
<script>
        SpeablyWidget.mount({
            debug: true,
            buttonVisible: false,
            dialogFlowAccessToken: '8d73e9b3b6a143b5b232ed6792712c32',
            language: 'en',
            voiceId: 'Joanna',
            mode: 'text',
        });
    
      function openWidget(){
          SpeablyWidget.open();
        }
    
    </script>
<img onclick="openWidget()" src="https://s3.amazonaws.com/css-examples/SpinnerDockedblack.svg" alt="" height="120px" width="120px" style="position:fixed;right:10px;bottom:80px"/>