(Optional) Change The Colours

Quickly Customize Your Voice Web Client’s Colours (Optional) – If you don’t do this, your web client will have the default black colours (still nice)

1. Download the file below that includes the CSS to change the background of the button and the dialog box.

Here is the code if you don’t want to download:

.speably-dialog {
    background-color: #0d6df0;
}

.dock__button {
    background: #e1d432;
}

2. Change the colours to match your website

Find the Hex codes that you want to use and sub them into the CSS file above. Save the file as CSS.

3. Upload the CSS file somewhere on the Internet.

We recommend an Amazon S3 Bucket (free). Be sure to make the file public when you are uploading.

4. Add the file URL to the Speebly embed script

For your Speebly embed script, add/ change the dialogStyleOverride field and URL to have it point to your CSS file. Voila!

<script src="https://voice.speebly.co/live/speably-widget.js"></script>
<script>
  SpeablyWidget.mount({
  dialogFlowAccessToken: '6cb4d7442eb94f889ec4b068fce59494',
  buttonVisible: true,
  dialogStyleOverride: 'https://s3.amazonaws.com/css-examples/ButtonAndBackground.css',
  language: 'en-US',
  voiceId: 'Joanna',
  mode: 'voice',
  });
</script>

(Optional) Insert new background logo

CSS (change the background-image to one of your choosing) – Note: always better to link to image served over https for security reasons. 

.speably-dialog {
    background-image: url(https://speebly.wpengine.com/wp-content/uploads/2018/10/LogoBackground.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center center;
}

Result:

Image of Speebly voice web client open with Speebly logo as a background image.

(Optional) Change the color of the mic

.dock__button svg {
    fill: #ffa500;
}

Result (see orange microphone on bottom right):