Dialogflow and Actions on Google for Web

Hi! Today we’re going to look at the Dialogflow for Web v2: a Web Integration for Dialogflow Gateway, that enables rich-chat UI for Dialogflow and even Actions on Google 🤘

The whole Dialogflow for Web Project, started as experiment to integrate a Voice-Driven UI into my personal website. The project, then was released on GitHub, October 2017 under the MIT-License. Thanks to the Dialogflow Community and Google, the project has got some initial traction and people and companies started using it as their main visualisation for their Dialogflow Agents. That felt rewarding!

Today, couple years later, the project is still maintained, matured a lot, is now built upon the latest and greatest Dialogflow V2 API and features stunning design, which follows official Google Assistant Specs. Yeah and it’s still available on GitHub!

Besides of that, it also still remains an experiment, that is built upon the most promising technologies available today, like: Progressive Web Apps, Web Speech API, Speech Recognition API, HTTP/2 transport layer and advanced accessibility features, to make sure, that everyone is on board!

Due to major changes in the V2 API, it now required more effort to get the Integration working and in the result of that, the Dialogflow Gateway platform was built, which solves all the hard parts, headaches and enables solid API for building third-party Integrations, like Dialogflow for Web.

By the way, check out the Demo or explore even more features on GitHub!

No more words, let’s get started!

Legacy Notes

Some of you may still be using Dialogflow V1 API, which isn’t a really good idea, because it will be deprecated very soon (October 2019).

If you still want to get the first version of Dialogflow for Web for your V1 Agent, check out a great video by Peter Fessel :D

SaaS Integration

When you connected your Agent to Dialogflow Gateway, the Dialogflow for Web v2 Integration with the same great features, dedicated subdomain and HTTPS was automatically provisioned, so you may not need to manually install.

Requirements

Before we continue, please make sure, that you have accomplished following things:

• You have a working Dialogflow V2 Agent
• Your agent is connected to the Dialogflow Gateway (see the docs)

To get the URL to your Web Integration, log into Dialogflow Gateway Console, select your Agent and press on the “Manage” button. A Popup will appear and you can then, copy and paste it into your browser:

You can also embed it into iframe, check out this codepen, to get an example:

Additionally, the SaaS Integration ships with great SEO (the titles, descriptions and images are the ones from your Dialogflow Agent):

Hosted Integration

Hosted means, you host it by yourself, on your own domain (machine) and at your own risk. The hosted Integrations, compared to the SaaS offering, do not have any warranty and do not ship with any support (but, bug reports are welcome).

The only advantage of a hosted integration, is that you can customise it, as you want, unless you don’t break the license conditions, of course.

You can always find the latest installation instructions in the repository

Requirements

Before we continue with this one, please make sure, that you have accomplished following things:

• You have a working Dialogflow V2 Agent
• Your agent is connected to the Dialogflow Gateway (see the docs)
• NodeJS is installed on your system (otherwise, get it here)
• You have a npm or Yarn package manager installed

Installation

1. Clone the repository
2. Unpack the repository (if you have downloaded the zip)
3. Open Terminal and cd into the repository
4. Install dependencies using npm install or yarn

Configuration

1. Open config.js and change the gateway variable to your Dialogflow Gateway URL.
2. Optionally, change static assets like favicon and title in the html, assets folder or manifest.json
3. Optionally, update your Agent on Dialogflow (add Logo, provide a better description)
4. Start the development server for instant preview: npm run dev or yarn dev
5. When you finished with editing, run npm run build or yarn build to bundle the app
6. Host your results somewhere

Bonus: Actions on Google for Web

Besides of Dialogflow, Dialogflow Gateway allows you to connect Google Assistant Actions as well (if the Action is built using Dialogflow). In theory, you are now able to connect your Actions to the World Wide Web.

That sounds cool, right? It does! But in practice, its currently pretty limited of what it can do (due to lack of capabilities like Google Account Linking and etc.). But, if you have a simple Action, you are fine and ready to get your next billion users with a Web Browser!

I have also a cool example, of Actions on Google support on the Dialogflow Gateway, check it out:

The Google Assistant Action: https://assistant.google.com/services/a/uid/0000003809bdb8fe?hl=en-US

The Web Integration: https://app-of-the-day-9a9f6.ui.dialogflow.cloud.ushakov.co

That works out pretty well! So, now the only remaining question you may have, is how do i enable this feature for my Action too?

1. Go to the Dialogflow Gateway Console
2. Press on “Manage” on your Action
3. Select the “Settings” tab
4. Unselect “Dialogflow” (if required) and enable “Google and Actions SDK” in the “Sources” section. Then, press on “Save” and check your Action.

That’s gonna do the job guys!

Thanks, stay tuned for even more cool articles like this ❤️