Conversational Actions will be deprecated on June 13, 2023. For more information, see Conversational Actions sunset.

Odpowiedzi rozszerzone (Dialogflow)

Stay organized with collections Save and categorize content based on your preferences.

Przeglądaj w Dialogflow

Kliknij Dalej, aby zaimportować przykładową odpowiedź w Dialogflow. Następnie wykonaj poniższe czynności, aby wdrożyć i przetestować przykład:

  1. Wpisz nazwę agenta i utwórz nowego agenta Dialogflow dla przykładu.
  2. Po zakończeniu importowania agenta kliknij Otwórz agenta.
  3. W głównym menu nawigacyjnym kliknij Fulfillment (Realizacja).
  4. Włącz Edytor wbudowany i kliknij Wdróż. Edytor zawiera przykładowy kod.
  5. W głównym menu nawigacyjnym wybierz Integrations (Integracje), a następnie kliknij Google Assistant (Asystent Google).
  6. W wyświetlonym oknie modalnym włącz Automatyczny podgląd zmian i kliknij Testuj, aby otworzyć Symulator działań.
  7. W symulatorze wpisz Talk to my test app, aby przetestować przykładowy kod.
Dalej

Jeśli chcesz wyświetlać elementy wizualne, aby zachęcać użytkowników do interakcji z akcją, użyj rozbudowanej odpowiedzi. Te elementy wizualne mogą być wskazówką, jak kontynuować rozmowę.

Reakcje rozszerzone mogą pojawiać się tylko na ekranie lub w dźwięku i na ekranie. Mogą zawierać te komponenty:

Możesz też przeczytać nasze wskazówki dotyczące projektowania rozmów, aby dowiedzieć się, jak włączyć te elementy wizualne do swojej akcji.

Usługi

Odpowiedzi z elementami rozszerzonymi mają następujące wymagania i opcjonalne właściwości, które możesz skonfigurować:

  • Obsługiwane na platformach z możliwością actions.capability.SCREEN_OUTPUT.
  • Pierwszy element odpowiedzi rozszerzonej musi być prostą odpowiedzią.
  • Maksymalnie dwie proste odpowiedzi.
  • Maksymalnie jedna karta podstawowa lub StructuredResponse.
  • Maksymalnie 8 elementów sugestii.
  • Elementy sugestii są niedozwolone w FinalResponse
  • Dodawanie linków do internetu z inteligentnych ekranów nie jest obecnie możliwe.

W poniższych sekcjach zobaczysz, jak tworzyć różne typy odpowiedzi z elementami rozszerzonymi.

Karta podstawowa

Ilustracja 1. Przykładowa karta karty (smartfon)

Podstawowa karta zawiera informacje, takie jak:

  • Obraz
  • tytuł,
  • Podtytuł
  • Treść tekstu
  • Przycisk Połącz
  • Obramowanie

Karty podstawowe mają być używane głównie do wyświetlania. Są one zwięzłe, zawierają najważniejsze informacje (lub podsumowania) i umożliwiają użytkownikom zapoznanie się z dodatkowymi informacjami (za pomocą linku internetowego).

W większości przypadków należy dodać elementy sugestii pod kartami, aby kontynuować lub zmienić przebieg rozmowy.

Nie powtarzaj informacji podanych na karcie w dymku czatu.

Usługi

Podstawowy typ odpowiedzi na karcie ma następujące wymagania i opcjonalne właściwości, które możesz skonfigurować:

  • Obsługiwane na platformach z możliwością actions.capability.SCREEN_OUTPUT.
  • Sformatowany tekst (wymagany, jeśli nie ma obrazu)
    • Domyślnie jest to zwykły tekst.
    • Nie może zawierać linku.
    • Limit 10 wierszy z obrazem i 15 wierszy bez obrazu. To około 500 (z obrazem) lub 750 znaków (bez obrazu). Mniejsze telefony też zawierają dłuższe teksty. Jeśli tekst zawiera zbyt wiele linii, jest on obcinany w ostatnim podziale słów za pomocą wielokropka.
    • Obsługiwany jest ograniczony podzbiór Markdown:
      • Nowy wiersz z podwójną spacją, po której następuje \n
      • **bold**
      • *italics*
  • Obraz (wymagany, jeśli nie ma tekstu sformatowanego)
    • Wszystkie obrazy wymuszane na wysokości 192 dp.
    • Jeśli współczynnik proporcji obrazu jest inny niż ekran, obraz zostanie wyśrodkowany z szarymi pasami w pionie lub poziomie.
    • Źródło obrazu to adres URL.
    • Dozwolone są GIF-y ruchome.

Opcjonalna

  • Tytuł
    • Zwykły tekst.
    • Poprawiono czcionkę i rozmiar.
    • Maksymalnie 1 wiersz; dodatkowe znaki są obcinane.
    • Wysokość karty zwija się, jeśli nie określisz tytułu.
  • Podtytuł
    • Zwykły tekst.
    • Poprawiliśmy rozmiar i czcionkę.
    • Maksymalnie 1 wiersz; dodatkowe znaki są obcinane.
    • Wysokość karty zwija się, jeśli nie określisz podtytułu.
  • Przycisk linku
    • Tytuł linku jest wymagany
    • Maksymalnie 1 link
    • Linki do witryn spoza domeny dewelopera są dozwolone.
    • Tekst linku nie może wprowadzać w błąd. Jest ona sprawdzana podczas procesu zatwierdzania.
    • Podstawowa karta nie ma funkcji interakcji bez linku. Po kliknięciu linku użytkownik zostanie przeniesiony do linku, a główna część karty pozostanie nieaktywna.
  • Obramowanie
    • Obramowanie karty i kontenera obrazów można dostosować, aby dostosować sposób wyświetlania podstawowej karty.
    • W tym celu należy ustawić właściwość ciągu znaków JSON imageDisplayOptions.
Ilustracja 2. Przykład karty podstawowej (inteligentny ekran)

Przykładowy kod

Node.js

app.intent('Basic Card', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask(`Here's an example of a basic card.`);
  conv.ask(new BasicCard({
    text: `This is a basic card.  Text in a basic card can include "quotes" and
    most other unicode characters including emojis.  Basic cards also support
    some markdown formatting like *emphasis* or _italics_, **strong** or
    __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
    things like line  \nbreaks`, // Note the two spaces before '\n' required for
                                 // a line break to be rendered in the card.
    subtitle: 'This is a subtitle',
    title: 'Title: this is a title',
    buttons: new Button({
      title: 'This is a button',
      url: 'https://assistant.google.com/',
    }),
    image: new Image({
      url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
      alt: 'Image alternate text',
    }),
    display: 'CROPPED',
  }));
  conv.ask('Which response would you like to see next?');
});

Java

@ForIntent("Basic Card")
public ActionResponse basicCard(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  // Prepare formatted text for card
  String text =
      "This is a basic card.  Text in a basic card can include \"quotes\" and\n"
          + "  most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
          + "  some markdown formatting like *emphasis* or _italics_, **strong** or\n"
          + "  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
          + "  things like line  \\nbreaks"; // Note the two spaces before '\n' required for
  // a line break to be rendered in the card.
  responseBuilder
      .add("Here's an example of a basic card.")
      .add(
          new BasicCard()
              .setTitle("Title: this is a title")
              .setSubtitle("This is a subtitle")
              .setFormattedText(text)
              .setImage(
                  new Image()
                      .setUrl(
                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                      .setAccessibilityText("Image alternate text"))
              .setImageDisplayOptions("CROPPED")
              .setButtons(
                  new ArrayList<Button>(
                      Arrays.asList(
                          new Button()
                              .setTitle("This is a Button")
                              .setOpenUrlAction(
                                  new OpenUrlAction().setUrl("https://assistant.google.com"))))))
      .add("Which response would you like to see next?");

  return responseBuilder.build();
}

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask(`Here's an example of a basic card.`);
conv.ask(new BasicCard({
  text: `This is a basic card.  Text in a basic card can include "quotes" and
  most other unicode characters including emojis.  Basic cards also support
  some markdown formatting like *emphasis* or _italics_, **strong** or
  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other
  things like line  \nbreaks`, // Note the two spaces before '\n' required for
                               // a line break to be rendered in the card.
  subtitle: 'This is a subtitle',
  title: 'Title: this is a title',
  buttons: new Button({
    title: 'This is a button',
    url: 'https://assistant.google.com/',
  }),
  image: new Image({
    url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
    alt: 'Image alternate text',
  }),
  display: 'CROPPED',
}));
conv.ask('Which response would you like to see next?');

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

// Prepare formatted text for card
String text =
    "This is a basic card.  Text in a basic card can include \"quotes\" and\n"
        + "  most other unicode characters including emoji \uD83D\uDCF1. Basic cards also support\n"
        + "  some markdown formatting like *emphasis* or _italics_, **strong** or\n"
        + "  __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n"
        + "  things like line  \\nbreaks"; // Note the two spaces before '\n' required for
// a line break to be rendered in the card.
responseBuilder
    .add("Here's an example of a basic card.")
    .add(
        new BasicCard()
            .setTitle("Title: this is a title")
            .setSubtitle("This is a subtitle")
            .setFormattedText(text)
            .setImage(
                new Image()
                    .setUrl(
                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                    .setAccessibilityText("Image alternate text"))
            .setImageDisplayOptions("CROPPED")
            .setButtons(
                new ArrayList<Button>(
                    Arrays.asList(
                        new Button()
                            .setTitle("This is a Button")
                            .setOpenUrlAction(
                                new OpenUrlAction().setUrl("https://assistant.google.com"))))))
    .add("Which response would you like to see next?");

return responseBuilder.build();

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "Here's an example of a basic card."
            }
          },
          {
            "basicCard": {
              "title": "Title: this is a title",
              "subtitle": "This is a subtitle",
              "formattedText": "This is a basic card.  Text in a basic card can include \"quotes\" and\n    most other unicode characters including emojis.  Basic cards also support\n    some markdown formatting like *emphasis* or _italics_, **strong** or\n    __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n    things like line  \nbreaks",
              "image": {
                "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                "accessibilityText": "Image alternate text"
              },
              "buttons": [
                {
                  "title": "This is a button",
                  "openUrlAction": {
                    "url": "https://assistant.google.com/"
                  }
                }
              ],
              "imageDisplayOptions": "CROPPED"
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which response would you like to see next?"
            }
          }
        ]
      }
    }
  }
}

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "Here's an example of a basic card."
              }
            },
            {
              "basicCard": {
                "title": "Title: this is a title",
                "subtitle": "This is a subtitle",
                "formattedText": "This is a basic card.  Text in a basic card can include \"quotes\" and\n    most other unicode characters including emojis.  Basic cards also support\n    some markdown formatting like *emphasis* or _italics_, **strong** or\n    __bold__, and ***bold itallic*** or ___strong emphasis___ as well as other\n    things like line  \nbreaks",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Image alternate text"
                },
                "buttons": [
                  {
                    "title": "This is a button",
                    "openUrlAction": {
                      "url": "https://assistant.google.com/"
                    }
                  }
                ],
                "imageDisplayOptions": "CROPPED"
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which response would you like to see next?"
              }
            }
          ]
        }
      }
    }
  ]
}
Ilustracja 3. Przykład karuzeli z przeglądaniem (smartfon)

Karuzela przeglądania to rozbudowana odpowiedź, która umożliwia użytkownikom przewijanie w pionie i wybieranie kafelka z kolekcji. Karuzele przeglądania są przeznaczone specjalnie do wyświetlania treści internetowych po otwarciu wybranego kafelka w przeglądarce (lub w przeglądarce AMP, jeśli wszystkie karty są włączone). Karuzela przeglądania jest też widoczna na asystencie użytkownika.

Usługi

Typ odpowiedzi w karuzeli przeglądania ma te wymagania i opcjonalne właściwości, które możesz skonfigurować:

  • Obsługiwane na platformach, które mają funkcje actions.capability.SCREEN_OUTPUT i actions.capability.WEB_BROWSER. Ten typ odpowiedzi jest obecnie niedostępny na inteligentnych ekranach.
  • Karuzela przeglądania
    • Maksymalnie 10 kafelków.
    • Co najmniej dwa kafelki.
    • Wszystkie elementy w karuzeli muszą zawierać linki do treści internetowych (zalecane treści AMP).
      • Aby użytkownik mógł trafić na przeglądarkę AMP, w kafelkach urlHintType treści na stronach AMP należy ustawić wartość „AMP_CONTENT”.
  • przeglądanie kafelków przeglądania.
    • Spójność fragmentów (wymagane):
      • Wszystkie kafelki w karuzeli przeglądania muszą mieć te same komponenty. Jeśli na przykład jeden kafelek ma pole obrazu, pozostałe kafelki muszą też zawierać pola obrazu.
      • Jeśli wszystkie kafelki karuzeli karuzeli prowadzą do treści zgodnych z AMP, użytkownik otwiera przeglądarkę AMP z dodatkowymi funkcjami. Jeśli któryś z kafelków zawiera link do treści innej niż AMP, wszystkie kafelki kierują użytkowników do przeglądarki.
    • Obraz (opcjonalnie)
      • Wymagana jest szerokość obrazu 128 dp x 232 dp.
      • Jeśli współczynnik proporcji obrazu nie pasuje do ramki ograniczającej, obraz jest wyśrodkowany z paskami po obu stronach. Na smartfonach obraz jest wyśrodkowany na kwadracie z zaokrąglonymi narożnikami.
      • Jeśli link do zdjęcia jest uszkodzony, używany jest obraz zastępczy.
      • Do obrazu jest wymagany tekst alternatywny.
    • Tytuł (wymagany)
      • Takie same opcje formatowania jak w przypadku podstawowej karty tekstowej.
      • Tytuły muszą być unikalne (aby można było korzystać z wyboru głosowego).
      • Maksymalnie 2 wiersze tekstu.
      • Rozmiar czcionki: 16 sp
    • Opis (opcjonalnie)
      • Takie same opcje formatowania jak w przypadku podstawowej karty tekstowej.
      • Maksymalnie 4 wiersze tekstu.
      • Obcięta wielokropkiem (...)
      • Rozmiar czcionki 14 sp, szary.
    • Stopka (opcjonalnie)
      • Poprawiliśmy rozmiar i czcionkę.
      • Maksymalnie 1 wiersz tekstu.
      • Obcięta wielokropkiem (...)
      • Są zakotwiczone na dole, więc kafelki z mniejszą liczbą wierszy z tekstem mogą być puste nad tekstem.
      • Rozmiar czcionki 14 sp, szary.
  • Interakcja
    • Użytkownik może przewijać elementy w pionie, aby wyświetlać elementy.
    • Kliknij kartę: kliknięcie elementu przenosi użytkownika do przeglądarki z wyświetloną stroną.
  • Głosowe wprowadzanie tekstu
    • Działanie mikrofonu
      • Mikrofon nie uruchomi się ponownie po przesłaniu użytkownikowi karty karuzeli.
      • Użytkownik może kliknąć mikrofon lub wywołać Asystenta („OK Google”), aby ponownie go uruchomić.

Wskazówki

Domyślnie mikrofon pozostaje zamknięty po wysłaniu karuzeli karuzeli. Jeśli chcesz kontynuować rozmowę, zalecamy dodanie kart sugestii pod karuzelą.

Nigdy nie powtarzaj opcji wyświetlanych na liście jako elementów sugestii. Elementy w tym kontekście służą do zmiany zakresu rozmowy (nie do wyboru).

Podobnie jak w przypadku list, dymek obok karty karuzeli to podzbiór dźwięku (TTS/SSML). Dźwięk (TTS/SSML) tutaj łączy pierwszy kafelek w karuzeli, a także zdecydowanie odradzamy odczytywanie wszystkich elementów z karuzeli. Najlepiej wspomnieć o pierwszym elemencie i przyczynie, dla którego się on pojawił (np. o najpopularniejszym, najczęściej kupowanym lub najczęściej omawianym produkcie).

Przykładowy kod

app.intent('Browsing Carousel', (conv) => {
  if (!conv.screen
    || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
    conv.ask('Sorry, try this on a phone or select the ' +
      'phone surface in the simulator.');
      conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask(`Here's an example of a browsing carousel.`);
  conv.ask(new BrowseCarousel({
    items: [
      new BrowseCarouselItem({
        title: 'Title of item 1',
        url: 'https://example.com',
        description: 'Description of item 1',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Image alternate text',
        }),
        footer: 'Item 1 footer',
      }),
      new BrowseCarouselItem({
        title: 'Title of item 2',
        url: 'https://example.com',
        description: 'Description of item 2',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Image alternate text',
        }),
        footer: 'Item 2 footer',
      }),
    ],
  }));
});
@ForIntent("Browsing Carousel")
public ActionResponse browseCarousel(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
      || !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
    return responseBuilder
        .add("Sorry, try this on a phone or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("Here's an example of a browsing carousel.")
      .add(
          new CarouselBrowse()
              .setItems(
                  new ArrayList<CarouselBrowseItem>(
                      Arrays.asList(
                          new CarouselBrowseItem()
                              .setTitle("Title of item 1")
                              .setDescription("Description of item 1")
                              .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                              .setImage(
                                  new Image()
                                      .setUrl(
                                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                      .setAccessibilityText("Image alternate text"))
                              .setFooter("Item 1 footer"),
                          new CarouselBrowseItem()
                              .setTitle("Title of item 2")
                              .setDescription("Description of item 2")
                              .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                              .setImage(
                                  new Image()
                                      .setUrl(
                                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                      .setAccessibilityText("Image alternate text"))
                              .setFooter("Item 2 footer")))));

  return responseBuilder.build();
}
if (!conv.screen
  || !conv.surface.capabilities.has('actions.capability.WEB_BROWSER')) {
  conv.ask('Sorry, try this on a phone or select the ' +
    'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
  return;
}

conv.ask(`Here's an example of a browsing carousel.`);
conv.ask(new BrowseCarousel({
  items: [
    new BrowseCarouselItem({
      title: 'Title of item 1',
      url: 'https://example.com',
      description: 'Description of item 1',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Image alternate text',
      }),
      footer: 'Item 1 footer',
    }),
    new BrowseCarouselItem({
      title: 'Title of item 2',
      url: 'https://example.com',
      description: 'Description of item 2',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Image alternate text',
      }),
      footer: 'Item 2 footer',
    }),
  ],
}));
ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())
    || !request.hasCapability(Capability.WEB_BROWSER.getValue())) {
  return responseBuilder
      .add("Sorry, try this on a phone or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("Here's an example of a browsing carousel.")
    .add(
        new CarouselBrowse()
            .setItems(
                new ArrayList<CarouselBrowseItem>(
                    Arrays.asList(
                        new CarouselBrowseItem()
                            .setTitle("Title of item 1")
                            .setDescription("Description of item 1")
                            .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Image alternate text"))
                            .setFooter("Item 1 footer"),
                        new CarouselBrowseItem()
                            .setTitle("Title of item 2")
                            .setDescription("Description of item 2")
                            .setOpenUrlAction(new OpenUrlAction().setUrl("https://example.com"))
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Image alternate text"))
                            .setFooter("Item 2 footer")))));

return responseBuilder.build();

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "Here's an example of a browsing carousel."
            }
          },
          {
            "carouselBrowse": {
              "items": [
                {
                  "title": "Title of item 1",
                  "openUrlAction": {
                    "url": "https://example.com"
                  },
                  "description": "Description of item 1",
                  "footer": "Item 1 footer",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Image alternate text"
                  }
                },
                {
                  "title": "Title of item 2",
                  "openUrlAction": {
                    "url": "https://example.com"
                  },
                  "description": "Description of item 2",
                  "footer": "Item 2 footer",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Image alternate text"
                  }
                }
              ]
            }
          }
        ]
      }
    }
  }
}

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "Here's an example of a browsing carousel."
              }
            },
            {
              "carouselBrowse": {
                "items": [
                  {
                    "description": "Description of item 1",
                    "footer": "Item 1 footer",
                    "image": {
                      "accessibilityText": "Image alternate text",
                      "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
                    },
                    "openUrlAction": {
                      "url": "https://example.com"
                    },
                    "title": "Title of item 1"
                  },
                  {
                    "description": "Description of item 2",
                    "footer": "Item 2 footer",
                    "image": {
                      "accessibilityText": "Image alternate text",
                      "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png"
                    },
                    "openUrlAction": {
                      "url": "https://example.com"
                    },
                    "title": "Title of item 2"
                  }
                ]
              }
            }
          ]
        }
      },
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ]
    }
  ]
}

Obsługa wybranego elementu

W przypadku interakcji użytkowników z elementami karuzeli przeglądania nie trzeba wykonywać dalszych czynności, ponieważ karuzela obsługuje obsługę przeglądarki. Pamiętaj, że mikrofon nie otworzy się ponownie po interakcji użytkownika z elementem karuzeli przeglądania, więc musisz zakończyć rozmowę lub uwzględnić w odpowiedzi elementy sugestii zgodnie z powyższymi wskazówkami.

Elementy sugestii

Ilustracja 4. Przykład elementów z sugestią (smartfon)

Za pomocą elementów sugestii sugeruj odpowiedzi na pytanie lub kontynuuj rozmowę. Jeśli w trakcie rozmowy pojawia się główne wezwanie do działania, możesz je umieścić jako pierwszy element z sugestią.

Gdy tylko jest to możliwe, uwzględniaj jedną kluczową sugestię w dymku czatu, ale tylko wtedy, gdy odpowiedź lub rozmowa na czacie są naturalne.

Usługi

Elementy propozycji mają następujące wymagania i opcjonalne właściwości, które możesz skonfigurować:

  • Obsługiwane na platformach z możliwością actions.capability.SCREEN_OUTPUT.
  • Aby połączyć elementy z sugestiami w internecie, platformy muszą też mieć uprawnienia actions.capability.WEB_BROWSER. Ta funkcja nie jest obecnie dostępna na inteligentnych ekranach.
  • Maksymalnie 8 elementów.
  • Maksymalna długość tekstu to 25 znaków.
  • Obsługuje tylko zwykły tekst.

Ilustracja 5. Przykład elementów z sugestią (inteligentny ekran)

Przykładowy kod

Node.js

app.intent('Suggestion Chips', (conv) => {
  if (!conv.screen) {
    conv.ask('Chips can be demonstrated on screen devices.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask('These are suggestion chips.');
  conv.ask(new Suggestions('Suggestion 1'));
  conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
  conv.ask(new LinkOutSuggestion({
    name: 'Suggestion Link',
    url: 'https://assistant.google.com/',
  }));
  conv.ask('Which type of response would you like to see next?'); ;
});

Java

@ForIntent("Suggestion Chips")
public ActionResponse suggestionChips(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("These are suggestion chips.")
      .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
      .add(
          new LinkOutSuggestion()
              .setDestinationName("Suggestion Link")
              .setUrl("https://assistant.google.com/"))
      .add("Which type of response would you like to see next?");
  return responseBuilder.build();
}

Node.js

if (!conv.screen) {
  conv.ask('Chips can be demonstrated on screen devices.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask('These are suggestion chips.');
conv.ask(new Suggestions('Suggestion 1'));
conv.ask(new Suggestions(['Suggestion 2', 'Suggestion 3']));
conv.ask(new LinkOutSuggestion({
  name: 'Suggestion Link',
  url: 'https://assistant.google.com/',
}));
conv.ask('Which type of response would you like to see next?');

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("These are suggestion chips.")
    .addSuggestions(new String[] {"Suggestion 1", "Suggestion 2", "Suggestion 3"})
    .add(
        new LinkOutSuggestion()
            .setDestinationName("Suggestion Link")
            .setUrl("https://assistant.google.com/"))
    .add("Which type of response would you like to see next?");
return responseBuilder.build();

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "These are suggestion chips."
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which type of response would you like to see next?"
            }
          }
        ],
        "suggestions": [
          {
            "title": "Suggestion 1"
          },
          {
            "title": "Suggestion 2"
          },
          {
            "title": "Suggestion 3"
          }
        ],
        "linkOutSuggestion": {
          "destinationName": "Suggestion Link",
          "url": "https://assistant.google.com/"
        }
      }
    }
  }
}

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "These are suggestion chips."
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which type of response would you like to see next?"
              }
            }
          ],
          "suggestions": [
            {
              "title": "Suggestion 1"
            },
            {
              "title": "Suggestion 2"
            },
            {
              "title": "Suggestion 3"
            }
          ],
          "linkOutSuggestion": {
            "destinationName": "Suggestion Link",
            "url": "https://assistant.google.com/"
          }
        }
      }
    }
  ]
}

Reakcje na multimedia

Ilustracja 6. Przykład odpowiedzi multimedialnej (smartfon)

Odpowiedzi medialne pozwalają Akcjom odtwarzać treści audio o czasie odtwarzania dłuższym niż limit 240 sekund dotyczący SSML. Podstawowym komponentem odpowiedzi multimedialnej jest karta z jednym utworem. Na karcie można wykonywać takie operacje:

  • Odtwórz ostatnie 10 sekund.
  • Przewiń do przodu o 30 sekund.
  • Wyświetlaj łączną długość treści multimedialnych.
  • Wyświetl wskaźnik postępu odtwarzania dźwięku.
  • Wyświetl czas, który upłynął.

Odpowiedzi multimedialne obsługują następujące opcje sterowania dźwiękiem:

  • „OK Google, graj”.
  • „OK Google, wstrzymaj”.
  • „OK Google, zatrzymaj”
  • „OK Google, zacznij od początku”.

Użytkownicy mogą też sterować głośnością, mówiąc na przykład „OK Google, zwiększ głośność” lub „OK Google, ustaw głośność na 50 procent”. Intencje zawarte w działaniu mają pierwszeństwo, jeśli obsługują podobne wyrażenia do trenowania. Pozwól Asystentowi obsługiwać te prośby użytkowników, chyba że akcja ma określony powód.

Usługi

Odpowiedzi na żądania multimediów mają te wymagania i opcjonalne właściwości, które możesz skonfigurować:

  • Obsługiwane na platformach z możliwością actions.capability.MEDIA_RESPONSE_AUDIO.
  • Dźwięk do odtworzenia musi mieć poprawnie sformatowany plik .mp3. Transmisje na żywo nie są obsługiwane.
  • Plik multimedialny do odtworzenia musi być określony jako adres URL HTTPS.
  • Obraz (opcjonalnie)
    • Opcjonalnie możesz dodać ikonę lub obraz.
    • Ikona
      • Twoja ikona jest wyświetlana jako nieobramowana miniatura po prawej stronie karty odtwarzacza multimediów.
      • Rozmiar powinien wynosić 36 x 36 dp. Większe obrazy są dopasowywane do rozmiaru.
    • Obraz
      • Kontener obrazu będzie miał wysokość 192 dp.
      • Obraz wyświetla się na górze karty odtwarzacza i rozciąga się na całą szerokość karty. Większość obrazów będzie pojawiać się z paskami u góry lub po bokach.
      • Dozwolone są GIF-y ruchome.
    • Źródło obrazu należy podać jako adres URL.
    • Tekst alternatywny jest wymagany na wszystkich obrazach.

Zachowanie na powierzchni

Odpowiedzi multimedialne są obsługiwane na telefonach z Androidem i w Google Home. Działanie odpowiedzi w mediach zależy od tego, na jakiej platformie użytkownicy wchodzą w interakcję.

Na telefonach z Androidem użytkownicy mogą wyświetlać odpowiedzi multimedialne w przypadku spełnienia jednego z tych warunków:

  • Asystent Google jest na pierwszym planie, a telefon jest włączony.
  • W trakcie odtwarzania dźwięku użytkownik opuszcza Asystenta Google, a następnie wraca do niego w ciągu 10 minut od zakończenia odtwarzania. Po powrocie do Asystenta Google użytkownik widzi kartę multimediów i elementy z podpowiedziami.
  • Asystent pozwala użytkownikom sterować głośnością urządzenia w ramach akcji rozmowy, mówiąc na przykład „Zwiększ głośność” lub „Ustaw głośność na 50 procent”. Jeśli masz intencje obsługujące podobne wyrażenia treningowe, mają one pierwszeństwo. Zalecamy, aby Asystent obsługiwał te żądania użytkowników, chyba że akcja ma konkretny powód.

Opcje sterowania multimediami są dostępne, gdy telefon jest zablokowany. W Androidzie elementy sterujące pojawiają się również w obszarze powiadomień.

Ilustracja 7. Przykład reakcji multimedialnej (inteligentny ekran)

Przykładowy kod

Ten przykładowy kod pokazuje, jak zaktualizować odpowiedzi rozszerzone, by zawierały multimedia.

Node.js

app.intent('Media Response', (conv) => {
  if (!conv.surface.capabilities
    .has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
      conv.ask('Sorry, this device does not support audio playback.');
      conv.ask('Which response would you like to see next?');
      return;
  }

  conv.ask('This is a media response example.');
  conv.ask(new MediaObject({
    name: 'Jazz in Paris',
    url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
    description: 'A funky Jazz tune',
    icon: new Image({
      url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
      alt: 'Album cover of an ocean view',
    }),
  }));
  conv.ask(new Suggestions(['Basic Card', 'List',
    'Carousel', 'Browsing Carousel']));
});

Java

@ForIntent("Media Response")
public ActionResponse mediaResponse(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
    return responseBuilder
        .add("Sorry, this device does not support audio playback.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("This is a media response example.")
      .add(
          new MediaResponse()
              .setMediaObjects(
                  new ArrayList<MediaObject>(
                      Arrays.asList(
                          new MediaObject()
                              .setName("Jazz in Paris")
                              .setDescription("A funky Jazz tune")
                              .setContentUrl(
                                  "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
                              .setIcon(
                                  new Image()
                                      .setUrl(
                                          "https://storage.googleapis.com/automotive-media/album_art.jpg")
                                      .setAccessibilityText("Album cover of an ocean view")))))
              .setMediaType("AUDIO"))
      .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
  return responseBuilder.build();
}

Node.js

if (!conv.surface.capabilities
  .has('actions.capability.MEDIA_RESPONSE_AUDIO')) {
    conv.ask('Sorry, this device does not support audio playback.');
    conv.ask('Which response would you like to see next?');
    return;
}

conv.ask('This is a media response example.');
conv.ask(new MediaObject({
  name: 'Jazz in Paris',
  url: 'https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3',
  description: 'A funky Jazz tune',
  icon: new Image({
    url: 'https://storage.googleapis.com/automotive-media/album_art.jpg',
    alt: 'Album cover of an ocean view',
  }),
}));
conv.ask(new Suggestions(['Basic Card', 'List',
  'Carousel', 'Browsing Carousel']));

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.MEDIA_RESPONSE_AUDIO.getValue())) {
  return responseBuilder
      .add("Sorry, this device does not support audio playback.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("This is a media response example.")
    .add(
        new MediaResponse()
            .setMediaObjects(
                new ArrayList<MediaObject>(
                    Arrays.asList(
                        new MediaObject()
                            .setName("Jazz in Paris")
                            .setDescription("A funky Jazz tune")
                            .setContentUrl(
                                "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3")
                            .setIcon(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/automotive-media/album_art.jpg")
                                    .setAccessibilityText("Album cover of an ocean view")))))
            .setMediaType("AUDIO"))
    .addSuggestions(new String[] {"Basic Card", "List", "Carousel", "Browsing Carousel"});
return responseBuilder.build();

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a media response example."
            }
          },
          {
            "mediaResponse": {
              "mediaType": "AUDIO",
              "mediaObjects": [
                {
                  "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
                  "description": "A funky Jazz tune",
                  "icon": {
                    "url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
                    "accessibilityText": "Album cover of an ocean view"
                  },
                  "name": "Jazz in Paris"
                }
              ]
            }
          }
        ],
        "suggestions": [
          {
            "title": "Basic Card"
          },
          {
            "title": "List"
          },
          {
            "title": "Carousel"
          },
          {
            "title": "Browsing Carousel"
          }
        ]
      }
    }
  }
}

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a media response example."
              }
            },
            {
              "mediaResponse": {
                "mediaType": "AUDIO",
                "mediaObjects": [
                  {
                    "contentUrl": "https://storage.googleapis.com/automotive-media/Jazz_In_Paris.mp3",
                    "description": "A funky Jazz tune",
                    "icon": {
                      "url": "https://storage.googleapis.com/automotive-media/album_art.jpg",
                      "accessibilityText": "Album cover of an ocean view"
                    },
                    "name": "Jazz in Paris"
                  }
                ]
              }
            }
          ],
          "suggestions": [
            {
              "title": "Basic Card"
            },
            {
              "title": "List"
            },
            {
              "title": "Carousel"
            },
            {
              "title": "Browsing Carousel"
            }
          ]
        }
      }
    }
  ]
}

Wskazówki

Odpowiedź musi zawierać element mediaResponse z elementem mediaType równym AUDIO i zawierający element mediaObject w tablicy elementów odpowiedzi rozszerzonej. Odpowiedź na multimedia obsługuje jeden obiekt multimedialny. Obiekt multimedialny musi zawierać adres URL zawartości pliku audio. Obiekt multimedialny może opcjonalnie zawierać nazwę, podtekst (opis) oraz ikonę lub URL obrazu.

Na telefonach i Google Home, gdy akcja zakończy odtwarzanie dźwięku, Asystent Google sprawdza, czy odpowiedź multimedialna to FinalResponse. Jeśli nie, wysyła wywołanie zwrotne do Twojej realizacji, dzięki czemu możesz odpowiedzieć użytkownikowi.

Jeśli odpowiedź to nie FinalResponse, akcja musi zawierać elementy sugestii.

Obsługa wywołania zwrotnego po zakończeniu odtwarzania

Akcja powinna obsługiwać intencję actions.intent.MEDIA_STATUS, która zachęca użytkownika do działania (np. do odtworzenia innego utworu). Akcja otrzymuje to wywołanie zwrotne po zakończeniu odtwarzania multimediów. Argument wywołania zwrotnego MEDIA_STATUS zawiera informacje o stanie bieżącego pliku multimedialnego. Wartość stanu to FINISHED lub STATUS_UNSPECIFIED.

Korzystanie z Dialogflow

Jeśli chcesz przeprowadzić gałęzi konwersacji w Dialogflow, musisz skonfigurować kontekst wejściowy actions_capability_media_response_audio w intencji, aby mieć pewność, że będzie on wyzwalany tylko na platformach obsługujących odpowiedź multimedialną.

Realizacja zamówień

Fragment kodu poniżej pokazuje, jak napisać kod realizacji działania. Jeśli używasz Dialogflow, zastąp actions.intent.MEDIA_STATUS nazwą działania podaną w intencji, która otrzymuje zdarzenie actions_intent_MEDIA_STATUS (np. „media.status.update”).

Node.js

app.intent('Media Status', (conv) => {
  const mediaStatus = conv.arguments.get('MEDIA_STATUS');
  let response = 'Unknown media status received.';
  if (mediaStatus && mediaStatus.status === 'FINISHED') {
    response = 'Hope you enjoyed the tune!';
  }
  conv.ask(response);
  conv.ask('Which response would you like to see next?');
});

Java

@ForIntent("Media Status")
public ActionResponse mediaStatus(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  String mediaStatus = request.getMediaStatus();
  String response = "Unknown media status received.";
  if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
    response = "Hope you enjoyed the tune!";
  }
  responseBuilder.add(response);
  responseBuilder.add("Which response would you like to see next?");
  return responseBuilder.build();
}

Node.js

app.intent('actions.intent.MEDIA_STATUS', (conv) => {
  const mediaStatus = conv.arguments.get('MEDIA_STATUS');
  let response = 'Unknown media status received.';
  if (mediaStatus && mediaStatus.status === 'FINISHED') {
    response = 'Hope you enjoyed the tune!';
  }
  conv.ask(response);
  conv.ask('Which response would you like to see next?');
});

Java

@ForIntent("actions.intent.MEDIA_STATUS")
public ActionResponse mediaStatus(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  String mediaStatus = request.getMediaStatus();
  String response = "Unknown media status received.";
  if (mediaStatus != null && mediaStatus.equals("FINISHED")) {
    response = "Hope you enjoyed the tune!";
  }
  responseBuilder.add(response);
  responseBuilder.add("Which response would you like to see next?");
  return responseBuilder.build();
}

JSON

JSON poniżej opisuje żądanie webhooka.

{
  "responseId": "151b68df-98de-41fb-94b5-caeace90a7e9-21947381",
  "queryResult": {
    "queryText": "actions_intent_MEDIA_STATUS",
    "parameters": {},
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Webhook failed for intent: Media Status",
    "fulfillmentMessages": [
      {
        "text": {
          "text": [
            "Webhook failed for intent: Media Status"
          ]
        }
      }
    ],
    "outputContexts": [
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_media_response_audio"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_account_linking"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_web_browser"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_screen_output"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_capability_audio_output"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/google_assistant_input_type_voice"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_media_status",
        "parameters": {
          "MEDIA_STATUS": {
            "@type": "type.googleapis.com/google.actions.v2.MediaStatus",
            "status": "FINISHED"
          }
        }
      }
    ],
    "intent": {
      "name": "projects/df-responses-kohler/agent/intents/068b27d3-c148-4044-bfab-dfa37eebd90d",
      "displayName": "Media Status"
    },
    "intentDetectionConfidence": 1,
    "languageCode": "en"
  },
  "originalDetectIntentRequest": {
    "source": "google",
    "version": "2",
    "payload": {
      "user": {
        "locale": "en-US",
        "lastSeen": "2019-08-04T23:57:15Z",
        "userVerificationStatus": "VERIFIED"
      },
      "conversation": {
        "conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA",
        "type": "ACTIVE",
        "conversationToken": "[]"
      },
      "inputs": [
        {
          "intent": "actions.intent.MEDIA_STATUS",
          "rawInputs": [
            {
              "inputType": "VOICE"
            }
          ],
          "arguments": [
            {
              "name": "MEDIA_STATUS",
              "extension": {
                "@type": "type.googleapis.com/google.actions.v2.MediaStatus",
                "status": "FINISHED"
              }
            }
          ]
        }
      ],
      "surface": {
        "capabilities": [
          {
            "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
          },
          {
            "name": "actions.capability.ACCOUNT_LINKING"
          },
          {
            "name": "actions.capability.WEB_BROWSER"
          },
          {
            "name": "actions.capability.SCREEN_OUTPUT"
          },
          {
            "name": "actions.capability.AUDIO_OUTPUT"
          }
        ]
      },
      "isInSandbox": true,
      "availableSurfaces": [
        {
          "capabilities": [
            {
              "name": "actions.capability.WEB_BROWSER"
            },
            {
              "name": "actions.capability.AUDIO_OUTPUT"
            },
            {
              "name": "actions.capability.SCREEN_OUTPUT"
            }
          ]
        }
      ],
      "requestType": "SIMULATOR"
    }
  },
  "session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA"
}

JSON

JSON poniżej opisuje żądanie webhooka.

{
  "user": {
    "locale": "en-US",
    "lastSeen": "2019-08-06T07:38:40Z",
    "userVerificationStatus": "VERIFIED"
  },
  "conversation": {
    "conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w",
    "type": "NEW"
  },
  "inputs": [
    {
      "intent": "actions.intent.MEDIA_STATUS",
      "rawInputs": [
        {
          "inputType": "VOICE"
        }
      ],
      "arguments": [
        {
          "name": "MEDIA_STATUS",
          "extension": {
            "@type": "type.googleapis.com/google.actions.v2.MediaStatus",
            "status": "FINISHED"
          }
        }
      ]
    }
  ],
  "surface": {
    "capabilities": [
      {
        "name": "actions.capability.SCREEN_OUTPUT"
      },
      {
        "name": "actions.capability.WEB_BROWSER"
      },
      {
        "name": "actions.capability.AUDIO_OUTPUT"
      },
      {
        "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
      },
      {
        "name": "actions.capability.ACCOUNT_LINKING"
      }
    ]
  },
  "isInSandbox": true,
  "availableSurfaces": [
    {
      "capabilities": [
        {
          "name": "actions.capability.WEB_BROWSER"
        },
        {
          "name": "actions.capability.AUDIO_OUTPUT"
        },
        {
          "name": "actions.capability.SCREEN_OUTPUT"
        }
      ]
    }
  ],
  "requestType": "SIMULATOR"
}

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 i wiersze (maksymalnie 3), które Asystent musi wyświetlać na karcie tabeli. Możesz też zdefiniować dodatkowe kolumny i wiersze oraz określić ich priorytety.

Tabele różnią się od list pionowych, bo wyświetlają dane statyczne i nie można ich używać (np. elementów list).

Ilustracja 8. Przykład karty tabeli (inteligentny ekran)

Usługi

Karty tabel mają te wymagania i opcjonalne właściwości, które możesz skonfigurować:

  • Obsługiwane na platformach z możliwością actions.capability.SCREEN_OUTPUT.

W tej sekcji podsumowujemy, jak dostosować elementy na karcie tabeli.

Nazwa Jest opcjonalne Można dostosować Uwagi na temat dostosowywania
title Tak Tak Ogólny tytuł tabeli. Jeśli podtytuł jest ustawiony, musi zostać ustawiony. Możesz dostosować rodzinę i kolor czcionki.
subtitle Tak Nie Podtytuł tabeli.
image Tak Tak Obraz powiązany z tabelą.
Row Nie Tak

Dane wierszy tabeli. Składa się z tablicy obiektów Cell i właściwości divider_after, która wskazuje, czy po wierszu powinien znajdować się separator.

Pierwsze 3 wiersze są widoczne, ale niektóre mogą się nie pojawić na niektórych platformach.

Przeprowadź test za pomocą symulatora, aby sprawdzić, które wiersze są wyświetlane w przypadku danej powierzchni. Na platformach obsługujących funkcję WEB_BROWSER możesz wskazać użytkownikowi stronę internetową zawierającą więcej danych. Obecnie nie można połączyć się z internetem na inteligentnych ekranach.

ColumnProperties Tak Tak Nagłówek i wyrównanie w kolumnie. Składa się z właściwości header (reprezentujących tekst nagłówka kolumny) i właściwości horizontal_alignment (typu HorizontalAlignment).
Cell Nie Tak Opisuje komórkę z rzędu. Każda komórka zawiera ciąg reprezentujący wartość tekstową. Możesz dostosować tekst w komórce.
Button Tak Tak Obiekt przycisku, który zwykle pojawia się na dole karty. Karta tabeli może mieć tylko 1 przycisk. Możesz zmienić kolor przycisku.
HorizontalAlignment Tak Tak Wyrównanie treści w poziomie w komórce. Wartościami mogą być LEADING, CENTER lub TRAILING. Jeśli nie określisz stanu, treść zostanie wyrównana do górnej krawędzi komórki.

Przykładowy kod

Te fragmenty kodu pokazują, jak wdrożyć prostą kartę tabeli:

Node.js

app.intent('Simple Table Card', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask('This is a simple table example.');
  conv.ask(new Table({
    dividers: true,
    columns: ['header 1', 'header 2', 'header 3'],
    rows: [
      ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
      ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
    ],
  }));
  conv.ask('Which response would you like to see next?');
});

Java

@ForIntent("Simple Table Card")
public ActionResponse simpleTable(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("This is a simple table example.")
      .add(
          new TableCard()
              .setColumnProperties(
                  Arrays.asList(
                      new TableCardColumnProperties().setHeader("header 1"),
                      new TableCardColumnProperties().setHeader("header 2"),
                      new TableCardColumnProperties().setHeader("header 3")))
              .setRows(
                  Arrays.asList(
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 1 item 1"),
                                  new TableCardCell().setText("row 1 item 2"),
                                  new TableCardCell().setText("row 1 item 3"))),
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 2 item 1"),
                                  new TableCardCell().setText("row 2 item 2"),
                                  new TableCardCell().setText("row 2 item 3"))))));
  return responseBuilder.build();
}

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask('This is a simple table example.');
conv.ask(new Table({
  dividers: true,
  columns: ['header 1', 'header 2', 'header 3'],
  rows: [
    ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
    ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
  ],
}));
conv.ask('Which response would you like to see next?');

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("This is a simple table example.")
    .add(
        new TableCard()
            .setColumnProperties(
                Arrays.asList(
                    new TableCardColumnProperties().setHeader("header 1"),
                    new TableCardColumnProperties().setHeader("header 2"),
                    new TableCardColumnProperties().setHeader("header 3")))
            .setRows(
                Arrays.asList(
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 1 item 1"),
                                new TableCardCell().setText("row 1 item 2"),
                                new TableCardCell().setText("row 1 item 3"))),
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 2 item 1"),
                                new TableCardCell().setText("row 2 item 2"),
                                new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a simple table example."
            }
          },
          {
            "tableCard": {
              "rows": [
                {
                  "cells": [
                    {
                      "text": "row 1 item 1"
                    },
                    {
                      "text": "row 1 item 2"
                    },
                    {
                      "text": "row 1 item 3"
                    }
                  ],
                  "dividerAfter": true
                },
                {
                  "cells": [
                    {
                      "text": "row 2 item 1"
                    },
                    {
                      "text": "row 2 item 2"
                    },
                    {
                      "text": "row 2 item 3"
                    }
                  ],
                  "dividerAfter": true
                }
              ],
              "columnProperties": [
                {
                  "header": "header 1"
                },
                {
                  "header": "header 2"
                },
                {
                  "header": "header 3"
                }
              ]
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which response would you like to see next?"
            }
          }
        ]
      }
    }
  }
}

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a simple table example."
              }
            },
            {
              "tableCard": {
                "columnProperties": [
                  {
                    "header": "header 1"
                  },
                  {
                    "header": "header 2"
                  },
                  {
                    "header": "header 3"
                  }
                ],
                "rows": [
                  {
                    "cells": [
                      {
                        "text": "row 1 item 1"
                      },
                      {
                        "text": "row 1 item 2"
                      },
                      {
                        "text": "row 1 item 3"
                      }
                    ],
                    "dividerAfter": true
                  },
                  {
                    "cells": [
                      {
                        "text": "row 2 item 1"
                      },
                      {
                        "text": "row 2 item 2"
                      },
                      {
                        "text": "row 2 item 3"
                      }
                    ],
                    "dividerAfter": true
                  }
                ]
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which response would you like to see next?"
              }
            }
          ]
        }
      },
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ]
    }
  ]
}

Te fragmenty kodu pokazują, jak wdrożyć złożoną kartę tabeli:

Node.js

app.intent('Advanced Table Card', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    conv.ask('Which response would you like to see next?');
    return;
  }

  conv.ask('This is a table with all the possible fields.');
  conv.ask(new Table({
    title: 'Table Title',
    subtitle: 'Table Subtitle',
    image: new Image({
      url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
      alt: 'Alt Text',
    }),
    columns: [
      {
        header: 'header 1',
        align: 'CENTER',
      },
      {
        header: 'header 2',
        align: 'LEADING',
      },
      {
        header: 'header 3',
        align: 'TRAILING',
      },
    ],
    rows: [
      {
        cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
        dividerAfter: false,
      },
      {
        cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
        dividerAfter: true,
      },
      {
        cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
      },
    ],
    buttons: new Button({
      title: 'Button Text',
      url: 'https://assistant.google.com',
    }),
  }));
  conv.ask('Which response would you like to see next?');
});

Java

@ForIntent("Advanced Table Card")
public ActionResponse advancedTable(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
    return responseBuilder
        .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
        .add("Which response would you like to see next?")
        .build();
  }

  responseBuilder
      .add("This is a table with all the possible fields.")
      .add(
          new TableCard()
              .setTitle("Table Title")
              .setSubtitle("Table Subtitle")
              .setImage(
                  new Image()
                      .setUrl(
                          "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                      .setAccessibilityText("Alt text"))
              .setButtons(
                  Arrays.asList(
                      new Button()
                          .setTitle("Button Text")
                          .setOpenUrlAction(
                              new OpenUrlAction().setUrl("https://assistant.google.com"))))
              .setColumnProperties(
                  Arrays.asList(
                      new TableCardColumnProperties()
                          .setHeader("header 1")
                          .setHorizontalAlignment("CENTER"),
                      new TableCardColumnProperties()
                          .setHeader("header 2")
                          .setHorizontalAlignment("LEADING"),
                      new TableCardColumnProperties()
                          .setHeader("header 3")
                          .setHorizontalAlignment("TRAILING")))
              .setRows(
                  Arrays.asList(
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 1 item 1"),
                                  new TableCardCell().setText("row 1 item 2"),
                                  new TableCardCell().setText("row 1 item 3")))
                          .setDividerAfter(false),
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 2 item 1"),
                                  new TableCardCell().setText("row 2 item 2"),
                                  new TableCardCell().setText("row 2 item 3")))
                          .setDividerAfter(true),
                      new TableCardRow()
                          .setCells(
                              Arrays.asList(
                                  new TableCardCell().setText("row 2 item 1"),
                                  new TableCardCell().setText("row 2 item 2"),
                                  new TableCardCell().setText("row 2 item 3"))))));
  return responseBuilder.build();
}

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  conv.ask('Which response would you like to see next?');
  return;
}

conv.ask('This is a table with all the possible fields.');
conv.ask(new Table({
  title: 'Table Title',
  subtitle: 'Table Subtitle',
  image: new Image({
    url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
    alt: 'Alt Text',
  }),
  columns: [
    {
      header: 'header 1',
      align: 'CENTER',
    },
    {
      header: 'header 2',
      align: 'LEADING',
    },
    {
      header: 'header 3',
      align: 'TRAILING',
    },
  ],
  rows: [
    {
      cells: ['row 1 item 1', 'row 1 item 2', 'row 1 item 3'],
      dividerAfter: false,
    },
    {
      cells: ['row 2 item 1', 'row 2 item 2', 'row 2 item 3'],
      dividerAfter: true,
    },
    {
      cells: ['row 3 item 1', 'row 3 item 2', 'row 3 item 3'],
    },
  ],
  buttons: new Button({
    title: 'Button Text',
    url: 'https://assistant.google.com',
  }),
}));
conv.ask('Which response would you like to see next?');

Java

ResponseBuilder responseBuilder = getResponseBuilder(request);
if (!request.hasCapability(Capability.SCREEN_OUTPUT.getValue())) {
  return responseBuilder
      .add("Sorry, try ths on a screen device or select the phone surface in the simulator.")
      .add("Which response would you like to see next?")
      .build();
}

responseBuilder
    .add("This is a table with all the possible fields.")
    .add(
        new TableCard()
            .setTitle("Table Title")
            .setSubtitle("Table Subtitle")
            .setImage(
                new Image()
                    .setUrl(
                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                    .setAccessibilityText("Alt text"))
            .setButtons(
                Arrays.asList(
                    new Button()
                        .setTitle("Button Text")
                        .setOpenUrlAction(
                            new OpenUrlAction().setUrl("https://assistant.google.com"))))
            .setColumnProperties(
                Arrays.asList(
                    new TableCardColumnProperties()
                        .setHeader("header 1")
                        .setHorizontalAlignment("CENTER"),
                    new TableCardColumnProperties()
                        .setHeader("header 2")
                        .setHorizontalAlignment("LEADING"),
                    new TableCardColumnProperties()
                        .setHeader("header 3")
                        .setHorizontalAlignment("TRAILING")))
            .setRows(
                Arrays.asList(
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 1 item 1"),
                                new TableCardCell().setText("row 1 item 2"),
                                new TableCardCell().setText("row 1 item 3")))
                        .setDividerAfter(false),
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 2 item 1"),
                                new TableCardCell().setText("row 2 item 2"),
                                new TableCardCell().setText("row 2 item 3")))
                        .setDividerAfter(true),
                    new TableCardRow()
                        .setCells(
                            Arrays.asList(
                                new TableCardCell().setText("row 2 item 1"),
                                new TableCardCell().setText("row 2 item 2"),
                                new TableCardCell().setText("row 2 item 3"))))));
return responseBuilder.build();

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a table with all the possible fields."
            }
          },
          {
            "tableCard": {
              "title": "Table Title",
              "subtitle": "Table Subtitle",
              "image": {
                "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                "accessibilityText": "Alt Text"
              },
              "rows": [
                {
                  "cells": [
                    {
                      "text": "row 1 item 1"
                    },
                    {
                      "text": "row 1 item 2"
                    },
                    {
                      "text": "row 1 item 3"
                    }
                  ],
                  "dividerAfter": false
                },
                {
                  "cells": [
                    {
                      "text": "row 2 item 1"
                    },
                    {
                      "text": "row 2 item 2"
                    },
                    {
                      "text": "row 2 item 3"
                    }
                  ],
                  "dividerAfter": true
                },
                {
                  "cells": [
                    {
                      "text": "row 3 item 1"
                    },
                    {
                      "text": "row 3 item 2"
                    },
                    {
                      "text": "row 3 item 3"
                    }
                  ]
                }
              ],
              "columnProperties": [
                {
                  "header": "header 1",
                  "horizontalAlignment": "CENTER"
                },
                {
                  "header": "header 2",
                  "horizontalAlignment": "LEADING"
                },
                {
                  "header": "header 3",
                  "horizontalAlignment": "TRAILING"
                }
              ],
              "buttons": [
                {
                  "title": "Button Text",
                  "openUrlAction": {
                    "url": "https://assistant.google.com"
                  }
                }
              ]
            }
          },
          {
            "simpleResponse": {
              "textToSpeech": "Which response would you like to see next?"
            }
          }
        ]
      }
    }
  }
}

JSON

Podany niżej kod JSON opisuje odpowiedź webhooka.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.TEXT"
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a table with all the possible fields."
              }
            },
            {
              "tableCard": {
                "title": "Table Title",
                "subtitle": "Table Subtitle",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Alt Text"
                },
                "rows": [
                  {
                    "cells": [
                      {
                        "text": "row 1 item 1"
                      },
                      {
                        "text": "row 1 item 2"
                      },
                      {
                        "text": "row 1 item 3"
                      }
                    ],
                    "dividerAfter": false
                  },
                  {
                    "cells": [
                      {
                        "text": "row 2 item 1"
                      },
                      {
                        "text": "row 2 item 2"
                      },
                      {
                        "text": "row 2 item 3"
                      }
                    ],
                    "dividerAfter": true
                  },
                  {
                    "cells": [
                      {
                        "text": "row 3 item 1"
                      },
                      {
                        "text": "row 3 item 2"
                      },
                      {
                        "text": "row 3 item 3"
                      }
                    ]
                  }
                ],
                "columnProperties": [
                  {
                    "header": "header 1",
                    "horizontalAlignment": "CENTER"
                  },
                  {
                    "header": "header 2",
                    "horizontalAlignment": "LEADING"
                  },
                  {
                    "header": "header 3",
                    "horizontalAlignment": "TRAILING"
                  }
                ],
                "buttons": [
                  {
                    "title": "Button Text",
                    "openUrlAction": {
                      "url": "https://assistant.google.com"
                    }
                  }
                ]
              }
            },
            {
              "simpleResponse": {
                "textToSpeech": "Which response would you like to see next?"
              }
            }
          ]
        }
      }
    }
  ]
}

Dostosowywanie odpowiedzi

Wygląd swoich odpowiedzi rozszerzonych możesz zmienić, tworząc motyw niestandardowy. Jeśli zdefiniujesz motyw dla swojego projektu w Actions, styl odpowiedzi w jego działaniach zostanie dostosowany do tego motywu. Może ona być przydatna, gdy chcesz nadać swojej rozmowie charakterystyczny wygląd i styl. Dzięki temu Twoje działania będą widoczne 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 treść karty była czytelna.
    • Kolor główny to główny kolor tekstu nagłówków i elementów interfejsu. Ogólnie ciemniejszy kolor podstawowy powinien być kontrastujący z tłem.
    • Rodzina czcionek to typ czcionki używanej w tytułach i innych dobrze widocznych elementach tekstowych.
    • Styl narożników obrazów może zmieniać ich narożniki.
    • Obraz tła korzysta z niestandardowego obrazu zamiast koloru tła. Musisz ustawić 2 różne obrazy, które będą wyświetlane odpowiednio w orientacji poziomej lub pionowej. Pamiętaj, że jeśli użyjesz obrazu tła, kolor podstawowy zostanie ustawiony na biały.
  3. Kliknij Zapisz.
Ilustracja 9. Dostosowywanie motywu w konsoli Actions