Set-Up 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 assistant will show up on your page.

IMPORTANT: If the client is not on an HTTPS page, voice 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: 'text',
  });
</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

(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>

Now go to Step 2: Upload and configure your free Dialog Flow assistant