Działania konwersacyjne zostaną wycofane 13 czerwca 2023 r. Więcej informacji znajdziesz w artykule o zachodzie słońca między rozmowami.

Odpowiedzi rozszerzone

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Szczegółowe odpowiedzi dodają elementy wizualne, które zwiększają interakcje użytkowników z działaniem. W ramach potwierdzenia możesz używać tych typów odpowiedzi rozszerzonych:

  • Karta podstawowa
  • Karta obrazu
  • Karta z tabelą

Podczas definiowania odpowiedzi z elementami rozszerzonymi korzystaj z kandydatów z możliwością interfejsu RICH_RESPONSE, tak by Asystent Google zwracał tę odpowiedź tylko na obsługiwanych urządzeniach. Możesz wykonać tylko jedną odpowiedź na temat na content obiekt.

Karta podstawowa

Karty podstawowe mają być zwięzłe, zawierają najważniejsze informacje (lub podsumowania) i pozwalają użytkownikom dowiedzieć się więcej (za pomocą linku internetowego).

Karty podstawowe mają służyć głównie do wyświetlania, ponieważ nie mają funkcji umożliwiających interakcję bez przycisku. Aby można było połączyć przycisk z internetem, platforma musi też mieć funkcję WEB_LINK.

Przykład podstawowej karty na inteligentnym ekranie

Usługi

Podstawowy typ odpowiedzi na karcie ma następujące właściwości:

Właściwość Typ Wymaganie Opis
title tekst Opcjonalna Tytuł karty w postaci zwykłego tekstu. 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 Opcjonalna 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 podtytułu.
text tekst Warunkowy

Zawartość zwykłego tekstu karty. Tekst, który jest za długi, jest obcinany przy ostatnim podziale słów za pomocą wielokropka. Ta właściwość jest wymagana, chyba że podano image.

Ta usługa podlega tym ograniczeniom:

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

Obsługiwany jest ograniczony podzbiór formatu Markdown:

  • Nowy wiersz z podwójnym odstępem, po którym następuje \n
  • **bold**
  • *italics*
image Image Opcjonalna Obraz wyświetlany na karcie. Obrazy mogą być w formacie JPG, PNG lub GIF (animowane i nieanimowane).
image_fill ImageFill Opcjonalna Obramowanie między kartą a kontenerem obrazu, które ma być używane, gdy współczynnik proporcji obrazu nie pasuje do współczynnika proporcji kontenera.
button Link Opcjonalna Przycisk kierujący użytkownika do adresu 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ą prostszym rozwiązaniem niż podstawowa karta z obrazem. Użyj karty graficznej, gdy chcesz prezentować obraz, a nie potrzebujesz tekstu ani komponentów interaktywnych.

Usługi

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 (animowane i nieanimowane).
alt tekst Wymagany Opis obrazu używany na potrzeby ułatwień dostępu.
height Int32 Opcjonalna Wysokość obrazu w pikselach.
width Int32 Opcjonalna 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 w tabeli danych tabelarycznych (takich jak klasyfikacja sportowa, wyniki wyborów czy loty). Możesz zdefiniować kolumny (wiersze) (maksymalnie 3) na karcie tabeli. Możesz też zdefiniować dodatkowe kolumny i wiersze oraz określić ich priorytety.

Przykład karty na inteligentnym ekranie

Tabele zawierają dane statyczne i nie można ich używać. W przypadku interaktywnych odpowiedzi wybierz wizualną odpowiedź dotyczącą wyboru.

Usługi

Typ odpowiedzi karty tabeli ma następujące 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 Opcjonalna Podtytuł tekstowy tabeli. Dostosowywanie motywów na kartach tabel nie ma na to wpływu.
columns tablica obiektu 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 obiektu TableRow Wymagany

Dane wierszy tabeli. Pierwsze 3 wiersze są widoczne, ale niektóre mogą się nie pojawić. Możesz przeprowadzić test za pomocą symulatora, aby sprawdzić, które wiersze są wyświetlane w przypadku danej platformy.

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

image Image Opcjonalna Obraz powiązany z tabelą.
button Link Opcjonalna Przycisk kierujący użytkownika do adresu 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

Te sposoby pokazują, 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 swoich odpowiedzi rozszerzonych możesz zmienić, tworząc własny motyw dla projektu Actions. To dostosowanie może być przydatne do zdefiniowania niepowtarzalnego stylu rozmowy, gdy użytkownicy wywołują ją na ekranie.

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

  1. W Konsoli Actions kliknij Programowanie > Dostosowywanie motywu.
  2. Ustaw dowolne lub wszystkie z tych ustawień:
    • Kolor tła: używany jako tło kart. Ogólnie użyj jasnego koloru tła, aby zwiększyć czytelność treści karty.
    • Kolor podstawowy: główny kolor nagłówków i elementów interfejsu kart. Ogólnie użyj ciemniejszego koloru podstawowego, aby lepiej kontrastować z kolorem tła.
    • Rodzina czcionek: typ czcionki używanej w tytułach i innych widocznych elementach tekstowych.
    • Styl narożników obrazu: zmienia wygląd narożników kart.
    • Obraz tła: niestandardowy obraz używany zamiast koloru tła. Prześlij 2 różne obrazy do wyświetlania w orientacji poziomej lub pionowej. Jeśli użyjesz obrazu tła, kolor podstawowy zostanie ustawiony na biały.
  3. Kliknij Zapisz.
Dostosowywanie motywu w konsoli Actions