Hands-On Python Deep Learning for the Web

Step 5 – Adding a click handler for the button

Finally, we add a click handler to the Ask a question button so that it can trigger the speech recognition of the user input and the synthesis of output from the Dialogflow agent.

Within the document ready function defined in step 2, add the following click handler code:

$('#customerChatRoot').click(function(){    recognition.start();    $(this).text('Speak!');});

Now, when the microphone starts listening for the user input, the button text changes to Speak!, prompting the user to start speaking.

Try testing the website on your setup and see how accurately you can get it to work!