How do I integrate Dialogflow V2 API with HTML and JavaScript?
One of the most common questions I receive at the moment is — how do I integrate the new Dialogflow V2 API with front-end HTML and JavaScript? V1 had a JavaScript API, which I’ve used for a range of examples online for Dialogflow apps… but V2 doesn’t have an API like that. So, what are our options?
Dialogflow V2 API and JavaScript?
Node.js is your friend
I got in touch with the Dialogflow team late last year, and they said that unfortunately, there is no JavaScript API for V2. Their current recommendation in their migration guide’s table is to use Node.js:
Their Node.js API is the migration path from JavaScript
BUT — it’s important to note, this isn’t a simple migration. While the capabilities of the SDK are equivalent between the Node.js API and the old front-end JavaScript based one, you cannot run the Node.js SDK within the browser.
So what do we do?
The Dialogflow Node.js Client Library is a client for the Dialogflow V2 API which you can install on a Node server — as of the time of writing this piece, that’s your option. You’d need to install that on a server and then create your own front-end commands to communicate with your own Node server — there is no Dialogflow service running like with Dialogflow V1’s SDK which you can just connect to.
The reason for this? It seems to be due to the new way they do authentication.
Protect that private key
In order to connect to Dialogflow’s new V2 API, you’ve got to authenticate with Google’s Cloud service and to do so, you’ll need a private JSON file with a private key that authenticates your app. You can’t have that on the front-end… if anyone could read that in their browser, they could do anything they wanted with your app. That would be bad.
I’m hoping to find a way of making this easier
I’ve got an online course/e-book I’m writing on Building cross-platform conversational apps with Dialogflow (early access to the course version that I’m turning into an e-book is at that link!). I’m hoping that as a part of updating that (its example for front-end JS uses the V1 API… which does still work), I’m going to find a cleaner way for people to hook up their front-end. It’ll likely mean making my own front-end JavaScript plugin that’ll connect to your Node server running Dialogflow. We’ll have to see how those efforts go! If you’re keen to build this yourself and give it a go, let me know how it turns out!
V1 still works… at the moment
For those who don’t want to put together a whole Node server, you can still use the V1 API at the moment. However, it does seem to go down occasionally.
Conclusion
There is still a way to get Dialogflow hooked up to a front-end, but you’ll need to do a bunch of the work on your own for this to be possible. I’m hoping to find a way to make things easier!
Would you like to republish this article in your own publication?
Contact Dev Diner to request official republication of this article.
Contact Dev Diner to request official republication of this article.
Want more?
A neat way to add I/O with the physical world — the Wio Terminal
The world of micro-controllers and maker creations is a vast and ever-growing one that can be super intimidating to newcomers. Should you start with an Arduino? A Raspberry Pi? What's an ESP something something? How do you add a screen? Sensors? The team at Seeed Studio are trying to make things easier and their Wio Terminal looks like a nice option for those who want to start with a screen and some sensors.
Building a 3D printed AR headset with The Triton Project
It's always exciting to stumble upon another AR headset being developed! Graham Atlee has been putting together The Triton Project, an exciting new headset similar to Project North Star that can be put together with off-the-shelf parts! Here's a Q&A with Graham on how it came about and how you might be able to get your hands on one!