Respostas avançadas

Respostas completas adicionam elementos visuais para aprimorar as interações do usuário com seus Ação. É possível usar os seguintes tipos de resposta avançada como parte de um comando:

  • Cartão básico
  • Card de imagem
  • Cartão de tabela

Ao definir uma resposta detalhada, use um candidato com o RICH_RESPONSE. para que o Google Assistente retorne apenas a resposta avançada compatíveis. Só é possível usar uma resposta avançada por objeto content em um prompt de comando.

Cartão básico

Cards básicos são projetados para serem concisos, para apresentar informações principais (ou resumo) aos usuários e para que eles saibam mais se você quiser (usando um link da Web).

Use cards básicos principalmente para fins de exibição, já que eles não têm interação recursos sem um botão. Para vincular um botão à Web, uma plataforma precisa também têm o capability WEB_LINK.

Exemplo de um cartão básico em smart display

Propriedades

O tipo de resposta básico do cartão tem as seguintes propriedades:

Propriedade Tipo Requisito Descrição
title string Opcional Título do card em texto simples. Os títulos têm fonte e tamanho fixos, e caracteres após a primeira linha ficam truncados. A altura do card diminui se não houver title é especificado.
subtitle string Opcional Subtítulo de texto simples do cartão. Os títulos têm fonte e tamanho fixos, e caracteres depois da primeira linha ficam truncados. A altura do card diminui se nenhum subtítulo foi especificado.
text string Condicional

Conteúdo de texto simples do card. Textos muito longos são truncados em a última palavra se divide com reticências. Essa propriedade é obrigatória, a menos que image está presente.

Essa propriedade tem as seguintes restrições:

  • Máximo de 15 linhas sem imagem ou 10 com uma image: Isso é aproximadamente 750 (sem imagem) ou 500 (com imagem). Os dispositivos móveis truncam o texto antes de superfícies com telas maiores.
  • O texto não deve conter um link.

Um subconjunto limitado de Markdown é aceito:

  • Nova linha com espaço duplo seguido por \n
  • **bold**
  • *italics*
image Image Opcional Imagem exibida no card. As imagens podem estar nos formatos JPG, PNG e GIF (animados e não animados).
image_fill ImageFill Opcional Borda entre o cartão e o contêiner de imagem a ser usada quando o proporção da imagem não corresponde ao aspecto do contêiner da imagem proporção.
button Link Opcional Botão que leva o usuário a um URL quando tocado. O botão deve ter uma propriedade name que contém o texto do botão e uma url que contém o URL do link. O texto do botão pode não sejam enganosos e sejam verificados durante o processo de revisão.

Código de amostra

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is a card.
          text: This is a card.
    content:
      card:
        title: Card Title
        subtitle: Card Subtitle
        text: Card Content
        image:
          url: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Google Assistant logo

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a card.",
            "text": "This is a card."
          }
        ]
      },
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "alt": "Google Assistant logo"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Card', conv => {
  conv.add('This is a card.');
  conv.add(new Card({
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    })
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          }
        }
      },
      "firstSimple": {
        "speech": "This is a card.",
        "text": "This is a card."
      }
    }
  }
}

Cards de imagem

Os cards de imagem são uma alternativa mais simples às informações básicas, que também contém uma imagem. Use um card de imagem quando quiser apresentar uma imagem e ter não é necessário oferecer suporte a textos ou componentes interativos.

Propriedades

O tipo de resposta do card de imagem tem as seguintes propriedades:

Propriedade Tipo Requisito Descrição
url string Obrigatório URL de origem da imagem. As imagens podem ser JPG, PNG ou GIF (animados e não animado).
alt string Obrigatório Descrição em texto da imagem a ser usada para acessibilidade.
height int32 Opcional Altura da imagem em pixels.
width int32 Opcional Largura da imagem, em pixels.

Código de amostra

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is an image prompt.
          text: This is an image prompt.
    content:
      image:
        alt: Google Assistant logo
        url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is an image prompt.",
            "text": "This is an image prompt."
          }
        ]
      },
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "url": "https://developers.google.com/assistant/assistant_96.png"
        }
      }
    }
  ]
}

Node.js

app.handle('Image', conv => {
  conv.add("This is an image prompt!");
  conv.add(new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "height": 0,
          "url": "https://developers.google.com/assistant/assistant_96.png",
          "width": 0
        }
      },
      "firstSimple": {
        "speech": "This is an image prompt.",
        "text": "This is an image prompt."
      }
    }
  }
}

Cards de tabela

Os cards de tabela permitem exibir dados tabulares na sua resposta (por exemplo, classificações esportivas, resultados eleitorais e voos). É possível definir colunas e linhas (até três cada) que o Google Assistente mostra no card da tabela. Também é possível definir colunas e linhas adicionais, junto com sua priorização.

Exemplo de um card de tabela no smart display

As tabelas exibem dados estáticos e não são interativos. Para seleção interativa de resposta, use uma resposta de seleção visual.

Propriedades

O tipo de resposta do card de tabela tem as seguintes propriedades:

Propriedade Tipo Requisito Descrição
title string Condicional Título da tabela em texto simples. Esta propriedade será obrigatória se subtitle está definido.
subtitle string Opcional Subtítulo de texto simples da tabela. Legendas nos cards de tabela não são afetadas pela personalização do tema.
columns matriz de TableColumn Obrigatório Cabeçalhos e alinhamento de colunas. Cada objeto TableColumn descreve o cabeçalho e o alinhamento de uma coluna diferente no mesmo tabela.
rows matriz de TableRow Obrigatório

Dados de linha da tabela. As primeiras 3 linhas são exibidas, mas outros podem não aparecer em determinadas plataformas. É possível testar com o simulador para saber quais linhas são exibidas em uma determinada superfície.

Cada objeto TableRow descreve as células de uma linha na mesma tabela.
image Image Opcional Imagem associada à tabela.
button Link Opcional Botão que leva o usuário a um URL quando tocado. O botão deve ter um name que contém o texto do botão e um url que contém o URL do link. O texto do botão não pode são enganosos e são verificados durante o processo de revisão.

Código de amostra

Os snippets a seguir mostram como implementar um card de tabela:

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is a table.
          text: This is a table.
    content:
      table:
        title: Table Title
        subtitle: Table Subtitle
        columns:
          - header: Column A
          - header: Column B
          - header: Column C
        rows:
          - cells:
              - text: A1
              - text: B1
              - text: C1
          - cells:
              - text: A2
              - text: B2
              - text: C2
          - cells:
              - text: A3
              - text: B3
              - text: C3
        image:
          alt: Google Assistant logo
          url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a table.",
            "text": "This is a table."
          }
        ]
      },
      "content": {
        "table": {
          "title": "Table Title",
          "subtitle": "Table Subtitle",
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "url": "https://developers.google.com/assistant/assistant_96.png"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Table', conv => {
  conv.add('This is a table.');
  conv.add(new Table({
    "title": "Table Title",
    "subtitle": "Table Subtitle",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    }),
    "columns": [{
      "header": "Column A"
    }, {
      "header": "Column B"
    }, {
      "header": "Column C"
    }],
    "rows": [{
      "cells": [{
        "text": "A1"
      }, {
        "text": "B1"
      }, {
        "text": "C1"
      }]
    }, {
      "cells": [{
        "text": "A2"
      }, {
        "text": "B2"
      }, {
        "text": "C2"
      }]
    }, {
      "cells": [{
        "text": "A3"
      }, {
        "text": "B3"
      }, {
        "text": "C3"
      }]
    }]
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "table": {
          "button": {},
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          },
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "subtitle": "Table Subtitle",
          "title": "Table Title"
        }
      },
      "firstSimple": {
        "speech": "This is a table.",
        "text": "This is a table."
      }
    }
  }
}

Como personalizar suas respostas

É possível mudar a aparência das suas respostas avançadas criando um tema personalizado para seu projeto do Actions. Essa personalização pode ser útil para definir a aparência da conversa quando os usuários invocam suas ações em uma plataforma com uma tela.

Para definir um tema de resposta personalizado, faça o seguinte:

  1. No Console do Actions, acesse Desenvolver > Personalização do tema.
  2. Defina um ou todos os itens a seguir:
    • Cor de fundo: usada como o plano de fundo dos seus cards. Em geral, use uma cor clara no plano de fundo para tornar o conteúdo do cartão mais fácil de ler.
    • Cor principal: a cor principal dos seus cards textos de cabeçalho e interface os elementos. Em geral, use uma cor primária mais escura para contrastar com a cor do plano de fundo.
    • Família de fontes: descreve o tipo de fonte usado para títulos e outros elementos de texto proeminentes.
    • Estilo do canto da imagem: altera a aparência dos cards. cantos
    • Imagem de plano de fundo: imagem personalizada para usar no lugar do plano de fundo cor Forneça duas imagens diferentes para quando o dispositivo da superfície estiver paisagem ou retrato. Se você usar uma imagem de plano de fundo, a principal está definido como branco.
  3. Clique em Salvar.
Personalizar o tema no Console do Actions