Step 1: Paste Speebly Script Into Your Webpage

Paste the script

Cut and paste the below on an SSL enabled page or footer (HTTPS) and the Speebly voice assistant will show up on your page.

IMPORTANT: If the voice client is not on an HTTPS page, it will not work for your end users.

<script src="https://voice.speebly.co/live/speably-widget.js"></script>
<script>
  SpeablyWidget.mount({
  dialogFlowAccessToken: '8d73e9b3b6a143b5b232ed6792712c32',
  buttonVisible: true,
  language: 'en',
  voiceId: 'Joanna',
  mode: 'voice',
  });
</script>

Connect/ Configure Dialog Flow

Now that you have a default voice agent on your site, you will want to change what it says and does. For this, follow the instructions in Step 2

Sign-up for a free online training session to get up and running fast

We will send a meeting invite to confirm the webinar details.

(Advanced and optional) How to add the voice feature behind any button you choose

Use the sample below to create your own OnClick opening for the Speebly widget wherever you want on the page.

<script src="https://voice.speebly.co/live/speably-widget.js"></script> 
    <script>
        SpeablyWidget.mount({
            debug: true,
            buttonVisible: false,
            dialogFlowAccessToken: '09f18bd5b24c4fc995fde97f3e3c4bb1',
            dialogStyleOverride: 'https://s3.amazonaws.com/gcweb/gcweb/gctheme.css',
            language: 'en',
            voiceId: 'Joanna',
            mode: 'text',
        });
    
      function openWidget(){
          SpeablyWidget.open();
        }
    
    </script>
    
    <a onclick="openWidget()"><img src="https://s3.amazonaws.com/css-examples/NewBlackDockedSpinner.svg" alt="" style="width:95px;height:95px;position:absolute;right:30px;bottom:30px;"></a>
    
    </body>
</html>

Unsupported Browser Text

If you do embed the client in a button, some users on unsupported browsers may end up opening the web client. To have a customized message for those users create an intent in Dialogflow with an event called called ‘NotSupportBrowser’ which is what users will be shown.