Odpowiedzi rozszerzone

Odpowiedzi rozszerzone dodają elementy wizualne, które zwiększają interakcję użytkowników z Twoją akcją. W prośbie możesz użyć tych typów odpowiedzi rozszerzonych:

  • Karta podstawowa
  • Karta graficzna
  • Karta z tabelą

Podczas definiowania odpowiedzi z elementami rozszerzonymi korzystaj z kandydatów z funkcją interfejsu RICH_RESPONSE, tak by Asystent Google zwracał tylko szczegółową odpowiedź na obsługiwanych urządzeniach. W potwierdzeniu możesz użyć tylko 1 odpowiedzi z elementami rozszerzonymi na każdy obiekt content.

Karta podstawowa

Karty podstawowe mają być zwięzłe i zawierać najważniejsze informacje (z podsumowaniem), a także pozwalają użytkownikom dowiedzieć się więcej (jeśli używają linku internetowego).

Korzystaj z kart podstawowych przede wszystkim do celów wyświetlania, ponieważ nie mają one przycisku interakcji. Aby można było połączyć przycisk z internetem, przestrzeń musi też mieć funkcję WEB_LINK.

Przykład karty podstawowej na inteligentnym ekranie

Właściwości

Podstawowy typ odpowiedzi karty ma te właściwości:

Właściwość Typ Wymaganie Opis
title tekst Opcjonalnie Tytuł zwykłego tekstu karty. Tytuły mają stałą czcionkę i rozmiar, a znaki po pierwszym wierszu są obcinane. Wysokość karty zwija się, jeśli nie określono tytułu.
subtitle tekst Opcjonalnie Podtytuł tekstowy karty. Tytuły mają stałą czcionkę i rozmiar, a znaki po pierwszym wierszu są obcinane. Wysokość karty zwija się, jeśli nie określono napisów.
text tekst Warunkowy

Zawartość zwykłego tekstu na karcie. Zbyt długi tekst zostanie skrócony na początku ostatniego fragmentu z wielokropkiem. Ta właściwość jest wymagana, chyba że podano image.

Ta usługa ma następujące ograniczenia:

  • Maksymalnie 15 wierszy bez obrazu lub 10 wierszy z image. Jest to około 750 znaków (bez obrazu) lub 500 (z obrazem). Pamiętaj, że urządzenia mobilne skrócą tekst wcześniej niż na większych ekranach.
  • Tekst nie może zawierać linku.

Ograniczony podzbiór Markdown jest obsługiwany:

  • Nowy wiersz z podwójnym spacją, po którym następuje \n
  • **bold**
  • *italics*
image Image Opcjonalnie Obraz wyświetlany na karcie. Obrazy mogą być w formacie JPG, PNG lub GIF (animowanym lub nieanimowanym).
image_fill ImageFill Opcjonalnie Obramowanie między kartą a kontenerem obrazu, które ma być stosowane, gdy współczynnik proporcji obrazu nie odpowiada współczynnikowi proporcji kontenera obrazu.
button Link Opcjonalnie Przycisk łączący użytkownika z adresem URL po kliknięciu. Przycisk musi mieć właściwość name, która zawiera tekst przycisku, oraz właściwość url, która zawiera adres URL linku. Tekst przycisku nie może wprowadzać w błąd i jest sprawdzany podczas procesu sprawdzania.

Przykładowy kod

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."
      }
    }
  }
}

Karty graficzne

Karty graficzne są zaprojektowane tak, by były prostszą alternatywą dla podstawowej karty z obrazem. Gdy chcesz prezentować obraz, nie potrzebujesz karty graficznej i nie potrzebujesz obsługi komponentów tekstowych ani interaktywnych.

Właściwości

Typ odpowiedzi karty graficznej ma te właściwości:

Właściwość Typ Wymaganie Opis
url tekst Wymagany Źródłowy adres URL obrazu. Obrazy mogą być w formacie JPG, PNG lub GIF (animowanym lub nieanimowanym).
alt tekst Wymagany Opis obrazu używany do ułatwień dostępu.
height int32, Opcjonalnie Wysokość obrazu w pikselach.
width int32, Opcjonalnie Szerokość obrazu w pikselach.

Przykładowy kod

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."
      }
    }
  }
}

Karty tabel

Karty tabel umożliwiają wyświetlanie danych tabelarycznych w odpowiedzi (na przykład wyników sportowych, wyników wyborów i lotów). Możesz określać kolumny i wiersze (maksymalnie 3) wyświetlane przez Asystenta na karcie tabeli. Możesz też zdefiniować dodatkowe kolumny i wiersze oraz określić ich priorytety.

Przykład karty tabel na inteligentnym ekranie

Tabele wyświetlają dane statyczne i nie można z nich korzystać. W przypadku interaktywnych odpowiedzi wyboru użyj wizualnej odpowiedzi do wyboru.

Właściwości

Typ odpowiedzi karty tabeli ma te właściwości:

Właściwość Typ Wymaganie Opis
title tekst Warunkowy Tytuł zwykłego tekstu tabeli. Ta właściwość jest wymagana, jeśli ustawiono subtitle.
subtitle tekst Opcjonalnie Podtytuł tekstowy tabeli. Dostosowywanie motywów nie ma wpływu na napisy na kartach tabel.
columns tablica TableColumn Wymagany Nagłówki i wyrównanie kolumn. Każdy obiekt TableColumn opisuje nagłówek i wyrównanie innej kolumny w tej samej tabeli.
rows tablica TableRow Wymagany

Dane wiersza z tabeli. Pierwsze 3 wiersze mogą być wyświetlane, ale w niektórych miejscach mogą się nie wyświetlać. Korzystając z symulatora, możesz sprawdzić, które wiersze są wyświetlane na danej powierzchni.

Każdy obiekt TableRow opisuje komórki innego wiersza w tej samej tabeli.

image Image Opcjonalnie Obraz powiązany z tabelą.
button Link Opcjonalnie Przycisk łączący użytkownika z adresem URL po kliknięciu. Przycisk musi mieć właściwość name, która zawiera tekst przycisku, oraz właściwość url, która zawiera adres URL linku. Tekst przycisku nie może wprowadzać w błąd i jest sprawdzany podczas sprawdzania.

Przykładowy kod

Z tych fragmentów kodu dowiesz się, jak wdrożyć kartę tabeli:

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."
      }
    }
  }
}

Dostosowywanie odpowiedzi

Wygląd odpowiedzi rozszerzonych możesz zmienić, tworząc motyw niestandardowy dla projektu Actions. To dostosowanie może być przydatne do zdefiniowania unikalnego stylu rozmowy, gdy użytkownicy wywołują ją na ekranie.

Aby ustawić niestandardowy motyw odpowiedzi, wykonaj te czynności:

  1. W konsoli Actions kliknij Develop > thethe adjustments (Dostosowywanie motywu).
  2. Ustaw dowolną z tych opcji:
    • Kolor tła: używany jako tło kart. Ogólnie używaj jasnego koloru tła, aby treść karty była bardziej czytelna.
    • Kolor podstawowy: główny kolor nagłówków i elementów interfejsu kart. Ogólnie w ciemniejszym kolorze lepiej jest kontrastować z tłem.
    • Rodzina czcionek: opisuje typ czcionki używany w tytułach i innych widocznych elementach tekstowych.
    • Styl narożnika obrazu: zmienia wygląd rogów kart.
    • Obraz tła: niestandardowy obraz, który zastępuje kolor tła. Prześlij 2 różne obrazy do wyświetlania w urządzeniach w orientacji poziomej lub pionowej. Jeśli używasz obrazu tła, kolor główny jest ustawiony na biały.
  3. Kliknij Zapisz.
Dostosowywanie motywu w konsoli Actions