Odpowiedzi rozszerzone

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.

Usługi

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

Przykładowy kod

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

{
  "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"
          }
        }
      }
    }
  ]
}

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'
    })
  }));
});

{
  "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:

Przykładowy kod

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'

{
  "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"
        }
      }
    }
  ]
}

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'
  }));
});

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

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:

Przykładowy kod

Te sposoby pokazują, jak wdrożyć kartę tabeli:

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'

{
  "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"
          }
        }
      }
    }
  ]
}

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"
      }]
    }]
  }));
});

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