Setup Fulfilment for Actions On Google on your own Server

This is interesting because I always used Firebase Cloud Functions to set up my webhook for all of the Actions On Google projects I have ever built, of course, including for GDG Kozhikode’s Action.

Cloud Functions makes it so easy to manage and deploy webhooks for Actions. You can even use the inline editor given in the Actions On Google Console, with one click, and “BOOM!” your webhook is up!

And now, what if we can host the webhook on our own server? Won’t that be super cool? So, let’s start this!

1. Create an Action

First things first, let’s start with creating an Action.

• Jump into Actions On Google Console
• Click new project, give your awesome Action’s name.
• Click on Create project.

Now you will be asked to select the type of Action you are about to build. AoG supports various categories like ones for Smart Home, Food Ordering, Games, and more. For now, let’s build from scratch; let’s go with Custom type.

And one last step to complete the initial setup is to ask if you want to start exploring with a sample project. Let’s go with the Blank project option. And click on the Start building button. Let’s start from zero!

Woohoo! We have initiated the project! Now you will be automatically get navigated to the Settings page of your Action. There are options to customize the display name of your Action, the Google Assistant’s voice.

2. How can a user invoke your Action?

That’s exactly what Main Invocations are meant for. The Main Invocation is the entry point of your Action. If your display name is “Tommy’s Pizza,” then your Main Invocation will be “Hey Google, talk to Tommy’s Pizza.” Now let’s set up what our action should do when the Action is invoked.

• Click on Main Invocation in the left side panel.

At this point, you’ll be here.

To change the welcome response, you can edit the speech property in the YAML file opened in the right-side editor. For example, let’s change it to “Welcome to the Wonderland! What can I do for you?”. To test if this works fine, you can jump into the Test tab and invoke the action by clicking the “Talk to <my test app>” chip.

3. Create a new Scene

Scenes are the building blocks for your Action that processes user input and typically generate the response to the user. You can match user intents in a Scene with Intent and respond, and you can also navigate to another scene. Let’s create a new scene.

• Click on the Scenes in the left panel.
• Click on the + button.
• Enter a Scene name and press enter.

The new scene is created. With this article, I’m focusing on just implementing the webhook on our custom server, so in this article, I’m not detailing the various ways a Scene can be used to build a high-quality action.

This will be how a scene looks, add conditions, and respond on entering, which is basically whenever the user is transitioned to this scene. You can also use user intent handling and slot filling.

Now the scene is created. Let’s enable webhook call and give some response with on enter event.

• Click on the + icon next to On enter in the scene.
• You will be prompted to select what to do when the user enters this scene.
• Check the call your webhook option.
• Provide an event handler name; I’ll be calling it test_handle.
• Click Save.

We also need to set up the transition to the created scene. For that:

• Go to the Main invocation page.
• Below the YAML editor, change the transition to drop down from End conversation to the created scene's name.

One more step is left to do in Actions Console; we have to provide the HTTPS endpoint in the webhooks section. We’ll do it once the webhook is up. Now let’s get our hands-on coding part!

4. Enough talking, show me the code!

Right there! We’ll be using express for handling HTTP requests to the fulfillment and @assistant/conversation for handling events on our conversational app.

Actions On Google Fulfilment On Custom Server

That’s it! The magic lies in the app.handle() method, which accepts the event handle name we have given in the Actions Console and a callback function with a conversation object which can be used to send a response or get information about the current context.

Almost there!

I’m not deploying this code into my server; instead, I’ll just run it on my localhost and start an HTTP tunnel with ngrok to set up a temporary endpoint.

So, listen on localhost:3000, and with ngrok, let’s start the tunnel with the command:

ngrok http 3000

5. Set the Fulfillment method in the Actions Console

• Click on Webhook in the left panel.
• You will be asked to select the fulfillment method.
• Select HTTPS endpoint > Click confirm.
• Enter the endpoint address.
• Click Save.

Now we are all set and ready for testing!

Now, let’s test this!

Jump over to the Test tab in the Console. And invoke your action!

There we go! We have successfully set up the fulfillment on our server and connected it with our Action.

I highly recommend you to check Actions On Google Docs, which will help you build high-quality Actions with the Actions Console's full potential. Also, taking Actions On Google codelabs will take you to the next level of yourself as an AoG Dev.

As always, feel free to join the conversation on Twitter with #AoGDevs! I hope you have enjoyed this story. Thank you for reading!