Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Gugic/cfc008599fa9a82eeba4127648009132 to your computer and use it in GitHub Desktop.
Save Gugic/cfc008599fa9a82eeba4127648009132 to your computer and use it in GitHub Desktop.
<title>API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src=""></script>
<script type="text/javascript">
var accessToken = "<your agent's client access token>";
var baseUrl = "";
$(document).ready(function() {
$("#input").keypress(function(event) {
if (event.which == 13) {
$("#rec").click(function(event) {
var recognition;
function startRecognition() {
recognition = new webkitSpeechRecognition();
recognition.onstart = function(event) {
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[i][0].transcript;
recognition.onend = function() {
recognition.lang = "en-US";
function stopRecognition() {
if (recognition) {
recognition = null;
function switchRecognition() {
if (recognition) {
} else {
function setInput(text) {
function updateRec() {
$("#rec").text(recognition ? "Stop" : "Speak");
function send() {
var text = $("#input").val();
type: "POST",
url: baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + accessToken
data: JSON.stringify({ query: text, lang: "en", sessionId: "somerandomthing" }),
success: function(data) {
setResponse(JSON.stringify(data, undefined, 2));
error: function() {
setResponse("Internal Server Error");
function setResponse(val) {
<style type="text/css">
body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; }
div { position: absolute; }
input { width: 400px; }
button { width: 50px; }
textarea { width: 100%; }
<input id="input" type="text"> <button id="rec">Speak</button>
<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
Copy link

Dude I was trying to get this working for a hot minute. Thanks a lot!

Copy link

safee6816 commented Jun 1, 2018

Hey Guys,

Dose anyone have HTML + JS sdk for V2 version. ?


Copy link

@Samarth26 - Expanding on @TristianK3604 comment on Oct 23, 2017 I have used a div to display the user and bot output rather than a textarea. This way any html in the output (links,images,etc) will display. I have also added some additional styling allowing you to easily hide the user/bot name, highlight the current response, general prettyness and added a container to hide the response scroll bar if needed:

Copy link

@latestscoop Thanks alot i was looking for a code like this thanks again

Copy link

How do you add voice recognition to this example? I don't want to be typing to answer.

Copy link

jlcastr commented Jan 28, 2019

Someone knows how to differentiate a message with accents from one without accents?
The json does not recognize him

Copy link

I have also getting JSON Respond. How I can use only reply from that format
"id": "0ed65683-64b3-41eb-990b-4d1f2b6606e7",
"timestamp": "2017-03-11T20:24:21.693Z",
"result": {
"source": "domains",
"resolvedQuery": "Hi",
"action": "smalltalk.greetings",
"parameters": {
"simplified": "hello"
"metadata": {},
"fulfillment": {
"speech": "Howdy."
"score": 1
"status": {
"code": 200,
"errorType": "success"
"sessionId": "somerandomthing"

Store it to a variable like this
var resp = <the response data from the api>;
and to specifically use response in the app:
var speech = resp.speech;

This will return 'Howdy' as per your response...

Copy link

umnibot commented Mar 27, 2019

Does anyone have an example with API V2?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment