Unable to respond with basic_card on Actions on Google

Question

I'm building an app using Api.ai with where I need to respond to an Intent named Login by a basic card. I'm trying this without webhook fulfillment. By Api.ai try section my query returns this:

{
  "id": "bb09aa94-a2d0-48d5-8c7f-62fc688d17b1",
  "timestamp": "2017-07-06T13:19:30.776Z",
  "lang": "en",
  "result": {
"source": "agent",
"resolvedQuery": "login",
"action": "Login",
"actionIncomplete": false,
"parameters": {},
"contexts": [],
"metadata": {
  "intentId": "39842aa0-53c4-4d47-b3b7-61ba0fc6d80c",
  "webhookUsed": "false",
  "webhookForSlotFillingUsed": "false",
  "intentName": "account.login"
},
"fulfillment": {
  "speech": "You should visit http://www.curlpad.com for login.",
  "messages": [
    {
      "type": "basic_card",
      "platform": "google",
      "title": "Login to Curlpad",
      "subtitle": "",
      "formattedText": "Visit this link to login to your account",
      "image": {
        "url": "http://www.curlpad.com/favicons/apple-icon.png"
      },
      "buttons": [
        {
          "title": "Curlpad",
          "openUrlAction": {
            "url": "http://www.curlpad.com"
          }
        }
      ]
    },
    {
      "type": 1,
      "platform": "telegram",
      "title": "Curlpad | Login",
      "subtitle": "Click on login button to continue",
      "imageUrl": "http://www.curlpad.com/favicons/apple-icon.png",
      "buttons": [
        {
          "text": "Login",
          "postback": "http://www.curlpad.com/"
        }
      ]
    },
    {
      "type": 0,
      "speech": "Open this url http://www.curlpad.com"
    }
  ]
},
"score": 1
  },
  "status": {
"code": 200,
"errorType": "success"
  },
  "sessionId": "7ba9cd11-239c-4467-8c3f-2d79d867ba18"
}

The telegram card works fine on my telegram bot, but gives an error on Actions on Google. Here is the response on Actions Simulator:

Other query works fine on that simulator. Can anyone help to make this work? I've one more intent to search user which works using webhook fulfillment, there also I'm getting the same problem while returning basic_card.

Screenshots of intent response with the try on api.ai:

Answer 1

The problem was 'basic_card' is not supported without a 'basic response', so we need to set 'basic response' first or Use response from the DEFAULT tab as the first response.

Basic Response is Compulsory for basic_card

Answer 2

If you are not using a webhook, you need to do the following 3 steps as cycled in the screenshot below to enable the basic card response. If you don't see the ACTION ON GOOGLE tab, click on the + sign to add it.

If you are using webhook, below is the sample code that works for me. You can also follow the google documentation below. google basic card documentation

'use strict';

const express = require('express')();
const router = require('express').Router();
const bodyParser = require('body-parser');
const ApiAiApp = require('actions-on-google').ApiAiApp;

express.use(bodyParser.json({type: 'application/json'}));

router.post('/card', (req, res) => {
	const app = new ApiAiApp({request: req, response: res});
	const WELCOME_INTENT = 'input.welcome';

	const actionMap = new Map();
	actionMap.set(WELCOME_INTENT, welcomeIntent);
	app.handleRequest(actionMap);
	
});

function welcomeIntent(app){
	app.ask(app.buildRichResponse()
	// Create a basic card and add it to the rich response
	.addSimpleResponse('Math and prime numbers it is!')
		.addBasicCard(app.buildBasicCard(`42 is an even composite number. It
		 is composed of three distinct prime numbers multiplied together. It
		 has a total of eight divisors. 42 is an abundant number, because the
		 sum of its proper divisors 54 is greater than itself. To count from
		 1 to 42 would take you about twenty-one…`)
		 .setTitle('Math & prime numbers')
		 .addButton('Read more')
		 .setImage('https://example.google.com/42.png', 'Image alternate text')
		)
	);
}

express.use('/example', router);

express.listen('8081', function () {
  console.log('Example app is running')
})