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.

Właściwości

Podstawowy typ odpowiedzi karty ma te 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ą 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:

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

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:

Przykładowy kod

Z tych fragmentów kodu dowiesz się, 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 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.