Przeglądaj w Dialogflow
Kliknij Dalej, aby zaimportować przykładowe odpowiedzi w Dialogflow. Następnie wykonaj poniższe czynności, aby wdrożyć i przetestować przykład:
- Wpisz nazwę agenta i utwórz nowego agenta Dialogflow na potrzeby przykładu.
- Po zakończeniu importowania agenta kliknij Otwórz agenta.
- W głównym menu nawigacyjnym kliknij Fulfillment (Realizacja).
- Włącz Edytor wbudowany, a potem kliknij Wdróż. Edytor zawiera przykładowy kod.
- W głównym menu nawigacyjnym kliknij Integracje, a następnie Asystent Google.
- W wyświetlonym oknie modalnym włącz Automatyczny podgląd zmian i kliknij Przetestuj, aby otworzyć symulator Actions.
- W symulatorze wpisz
Talk to my test app
, aby przetestować próbkę.
Jeśli chcesz wyświetlać elementy wizualne, aby zwiększyć interakcje użytkowników z akcją, używaj odpowiedzi rozszerzonych. Takie elementy wizualne mogą pomóc w kontynuowaniu rozmowy.
Odpowiedzi rozszerzone mogą się pojawiać tylko na ekranie lub podczas korzystania z funkcji dźwięku i ekranu. Mogą one zawierać te komponenty:
- 1 lub 2 proste odpowiedzi (dymki czatu).
- Opcjonalną kartę podstawową.
- Opcjonalne elementy sugestii.
- Opcjonalny element prowadzący do strony z linkiem.
Możesz też zapoznać się z naszymi wskazówkami dotyczącymi projektowania rozmów, aby dowiedzieć się, jak uwzględnić te elementy wizualne w akcji.
Właściwości
Odpowiedzi rozszerzone mają te wymagania i opcjonalne właściwości, które możesz skonfigurować:
- Funkcja jest obsługiwana na platformach z obsługą
actions.capability.SCREEN_OUTPUT
. - Pierwszy element w odpowiedzi z elementami rozszerzonymi musi być prostą odpowiedzią.
- Maksymalnie 2 proste odpowiedzi.
- Maksymalnie 1 karta podstawowa lub
StructuredResponse
. - Maksymalnie 8 elementów sugestii.
- W obiekcie
FinalResponse
elementy sugestii są niedozwolone - Łączenie z internetem za pomocą inteligentnych ekranów nie jest obecnie obsługiwane.
W sekcjach poniżej znajdziesz informacje o tworzeniu różnych typów odpowiedzi z elementami rozszerzonymi.
Karta podstawowa
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/basic-card.png?authuser=7&hl=pl)
Podstawowa karta zawiera takie informacje, jak:
- Obraz
- tytuł,
- Podtytuł
- Treść
- Przycisk Połącz
- Borders
Używaj podstawowych kart głównie do wyświetlania. Ich zadaniem jest zwięzłość, prezentowanie kluczowych (lub podsumowania) informacji i umożliwianie im uzyskania dodatkowych informacji (przy użyciu linku internetowego).
Aby kontynuować lub zmienić przebieg rozmowy, w większości przypadków należy dodać elementy sugestii pod kartami.
Za wszelką cenę nie powtarzaj informacji widocznych na karcie w dymku czatu.
Właściwości
Podstawowy typ odpowiedzi karty ma takie wymagania i opcjonalne właściwości, które możesz skonfigurować:
- Funkcja jest obsługiwana na platformach z obsługą
actions.capability.SCREEN_OUTPUT
. - Sformatowany tekst (wymagany, jeśli nie ma obrazu)
- Domyślnie zwykły tekst.
- Nie może zawierać linku.
- 10 wierszy z obrazem, 15 wierszy bez obrazu. To około 500 znaków (z obrazem) lub 750 znaków (bez obrazu). Na telefonach z mniejszymi ekranami tekst jest wcześniej obcinany niż na większych ekranach. Jeśli tekst zawiera zbyt wiele wierszy, jest przycinany do ostatniego podziału za pomocą wielokropka.
- Obsługiwany jest ograniczony podzbiór Markdown:
- Nowy wiersz ze podwójnym spacją i znakiem \n
**bold**
*italics*
- Obraz (wymagany, jeśli nie ma sformatowanego tekstu)
- Wysokość wszystkich obrazów musi wynosić 192 dp.
- Jeśli format obrazu jest inny niż obraz, zostanie on wyśrodkowany z szarą pasami na krawędziach pionowych lub poziomych.
- Źródło obrazu to adres URL.
- Dozwolone są GIF-y ruchome.
Opcjonalnie
- Tytuł
- Zwykły tekst.
- Stała czcionka i rozmiar.
- Maksymalnie 1 wiersz; dodatkowe znaki są obcinane.
- Jeśli nie podasz tytułu, wysokość karty zwija się.
- Napisy
- Zwykły tekst.
- Stały rozmiar czcionki.
- Maksymalnie 1 wiersz; dodatkowe znaki są obcinane.
- Jeśli nie określono podtytułu, wysokość karty zwija się.
- 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 to sprawdzane w procesie zatwierdzania.
- Karta podstawowa nie umożliwia interakcji bez linku. Kliknięcie linku powoduje otwarcie linku, ale główna część karty pozostaje nieaktywna.
- Obramowanie
- Obramowanie między kartą a kontenerem obrazu można dostosować, aby dostosować sposób wyświetlania karty podstawowej.
- Aby je skonfigurować, ustaw właściwość ciągu JSON
imageDisplayOptions
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/basic-card.png?authuser=7&hl=pl)
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
Pamiętaj, że poniższy 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
Pamiętaj, że poniższy 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?" } } ] } } } ] }
Karuzela przeglądania
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/browse-carousel.png?authuser=7&hl=pl)
Karuzela przeglądania to odpowiedź rozszerzona, która umożliwia użytkownikom przewijanie w pionie i wybór kafelka w kolekcji. Karuzele przeglądania zostały zaprojektowane specjalnie pod kątem treści internetowych – po otwarciu wybranego kafelka w przeglądarce (lub w przeglądarce AMP, jeśli wszystkie kafelki obsługują AMP). Karuzela przeglądania wyświetla się też w Asystencie użytkownika, aby można było później do niego wrócić.
Właściwości
Typ odpowiedzi karuzeli przeglądania ma następujące wymagania i opcjonalne właściwości, które możesz skonfigurować:
- Obsługiwany na platformach, które mają zarówno funkcje
actions.capability.SCREEN_OUTPUT
, jak iactions.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 kafelki w karuzeli muszą prowadzić do treści internetowych (zalecane są treści AMP).
- Aby użytkownik mógł przejść do przeglądarki AMP, kafelek treści AMP w polu
urlHintType
musi być ustawiony na „AMP_CONTENT”.
- Aby użytkownik mógł przejść do przeglądarki AMP, kafelek treści AMP w polu
- przeglądanie kafelków karuzeli;
- Spójność kafelków (wymagana):
- Wszystkie kafelki w karuzeli przeglądania muszą zawierać te same komponenty. Jeśli na przykład jeden kafelek ma pole obrazu, pozostałe kafelki w karuzeli muszą też zawierać pola obrazów.
- Jeśli wszystkie kafelki w karuzeli przeglądania zawierają linki do treści obsługujących AMP, użytkownik zostanie przekierowany do przeglądarki AMP z dodatkowymi funkcjami. Jeśli którykolwiek kafelek zawiera linki do treści innych niż AMP, wszystkie kafelki kierują użytkowników do przeglądarki.
- Obraz (opcjonalnie)
- Obraz musi mieć wysokość 128 dp i szerokość 232 dp.
- Jeśli współczynnik proporcji obrazu nie jest zgodny z ramką ograniczającą obraz, zostanie on wyśrodkowany z paskami po obu stronach. Na smartfonach obraz jest wyśrodkowany w kwadratowym z zaokrąglonymi narożnikami.
- Jeśli link do zdjęcia nie działa, zamiast niego jest używany obraz zastępczy.
- Do obrazu wymagany jest tekst alternatywny.
- Tytuł (wymagany)
- Opcje formatowania takie same jak w przypadku podstawowej karty tekstowej.
- Tytuły muszą być niepowtarzalne (aby można było wybrać głos).
- Maksymalnie 2 wiersze tekstu.
- Rozmiar czcionki: 16 sp.
- Opis (opcjonalnie)
- Opcje formatowania takie same jak w przypadku podstawowej karty tekstowej.
- Maksymalnie 4 wiersze tekstu.
- Ucięte wielokropkiem (...)
- Rozmiar czcionki 14 sp, kolor szary.
- Stopka (opcjonalnie)
- Stały rozmiar czcionki.
- Maksymalnie 1 wiersz tekstu.
- Ucięte wielokropkiem (...)
- Zakotwiczone u dołu, więc kafelki z mniejszą liczbą wierszy tekstu głównego mogą mieć wolną przestrzeń nad tekstem.
- Rozmiar czcionki 14 sp, kolor szary.
- Spójność kafelków (wymagana):
- Interakcja
- Użytkownik może przewijać elementy w pionie,
- Karta kliknięcia: po kliknięciu elementu użytkownik wyświetla się w przeglądarce i wyświetla powiązaną stronę.
- Rozpoznawanie mowy
- Działanie mikrofonu
- Mikrofon nie włączy się ponownie po wysłaniu użytkownikowi karuzeli przeglądania.
- Użytkownik nadal może kliknąć mikrofon lub wywołać Asystenta („OK Google”), aby ponownie go włączyć.
- Działanie mikrofonu
Wskazówki
Po wysłaniu karuzeli przeglądania mikrofon pozostaje domyślnie zamknięty. Jeśli chcesz kontynuować rozmowę po jej zakończeniu, zdecydowanie zalecamy dodanie elementów sugestii pod karuzelą.
Nigdy nie powtarzaj opcji z listy jako elementów sugestii. Elementy w tym kontekście służą do przestawiania wątku, a nie do wyboru opcji.
Podobnie jak w przypadku list, dymek czatu wraz z kartą karuzeli to podzbiór dźwięku (TTS/SSML). Dźwięk (TTS/SSML) w tym miejscu integruje pierwszy kafelek w karuzeli. Zdecydowanie odradzamy też odczytywanie wszystkich elementów z karuzeli. Najlepiej wymienić pierwszy element i powód jego wyświetlenia (np. najpopularniejsze, ostatnio kupione lub najczęściej komentowane).
Przykładowy kod
Node.js
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', }), ], })); });
Java
@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(); }
Node.js
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', }), ], }));
Java
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();
JSON
Pamiętaj, że poniższy 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" } } ] } } ] } } } }
JSON
Pamiętaj, że poniższy 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ć żadnych działań dodatkowych, ponieważ karuzela obsługuje przekazanie elementów z przeglądarki. Pamiętaj, że gdy użytkownik wejdzie w interakcję z elementem karuzeli podczas przeglądania, mikrofon nie zostanie ponownie włączony, więc zakończ rozmowę lub dodaj elementy sugestii w odpowiedzi zgodnie z podanymi wyżej wskazówkami.
Elementy sugestii
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/suggestions.png?authuser=7&hl=pl)
Używaj elementów z sugestiami, aby wskazywać odpowiedzi i kontynuować rozmowę. Jeśli w trakcie rozmowy pojawia się główne wezwanie do działania, możesz je umieścić jako pierwszy element sugestii.
Gdy tylko jest to możliwe, warto uwzględnić jedną kluczową sugestię w dymku na czacie. Zrób to tylko wtedy, gdy odpowiedź lub rozmowa na czacie będą wydawać się naturalne.
Właściwości
Elementy sugestii mają te wymagania i opcjonalne właściwości, które możesz konfigurować:
- Funkcja jest obsługiwana na platformach z obsługą
actions.capability.SCREEN_OUTPUT
. - Aby można było połączyć elementy sugestii z internetem, platformy muszą też obsługiwać funkcję
actions.capability.WEB_BROWSER
. Ta funkcja jest obecnie niedostępna na inteligentnych ekranach. - Maksymalnie 8 elementów.
- Maksymalna długość tekstu to 25 znaków.
Obsługuje tylko zwykły tekst.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/chips.png?authuser=7&hl=pl)
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
Pamiętaj, że poniższy 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
Pamiętaj, że poniższy 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/" } } } } ] }
Odpowiedzi multimedialne
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/media.png?authuser=7&hl=pl)
Odpowiedzi multimedialne umożliwiają akcjom odtwarzanie treści audio o czasie trwania dłuższym niż 240 sekund określony w SSML. Podstawowym elementem odpowiedzi dotyczącej mediów jest karta z jednym utworem. Karta ta umożliwia użytkownikowi wykonywanie tych operacji:
- Powtórz ostatnie 10 sekund.
- Przewiń do przodu o 30 sekund.
- Wyświetl całkowitą długość treści multimedialnych.
- Wyświetl wskaźnik postępu odtwarzania dźwięku.
- sprawdzać czas odtwarzania,
Odpowiedzi multimedialne obsługują te elementy sterujące dźwiękiem:
- „OK Google, odtwarzaj”
- „OK Google, wstrzymaj”
- „OK Google, zatrzymaj”
- „OK Google, zacznijmy od początku”.
Użytkownicy mogą też regulować głośność za pomocą poleceń takich jak „OK Google, zwiększ głośność” lub „OK Google, ustaw głośność na 50 procent”. Intencje w Akcji mają pierwszeństwo, jeśli obsługują podobne wyrażenia na potrzeby trenowania. Pozwól Asystentowi na obsługę tych próśb, chyba że akcja ma konkretny powód.
Właściwości
Odpowiedzi dotyczące multimediów mają te wymagania i opcjonalne właściwości, które możesz skonfigurować:
- Obsługiwany na platformach z obsługą funkcji
actions.capability.MEDIA_RESPONSE_AUDIO
. - Dźwięk do odtwarzania musi być w prawidłowo sformatowanym pliku
.mp3
. Transmitowanie na żywo nie jest obsługiwane. - Plik multimedialny do odtwarzania musi być określony jako adres URL HTTPS.
- Obraz (opcjonalnie)
- Możesz też dodać ikonę lub obraz.
- Ikona
- Ikona ma postać miniatury bez obramowania po prawej stronie karty odtwarzacza.
- Rozmiar powinien wynosić 36 x 36 dp. Większe obrazy są dopasowywane do rozmiaru obrazu.
- Obraz
- Kontener obrazu będzie miał wysokość 192 dp.
- Obraz wyświetla się u góry karty odtwarzacza i rozciąga się na całą szerokość karty. U góry lub po bokach większości zdjęć będą wyświetlane pasy.
- Dozwolone są GIF-y ruchome.
- Źródło obrazu musisz określić jako adres URL.
- Tekst alternatywny jest wymagany do wszystkich obrazów.
Działanie na platformach
Odpowiedzi multimedialne są obsługiwane na telefonach z Androidem i na urządzeniu Google Home. Zachowanie odpowiedzi multimedialnych zależy od powierzchni, na której użytkownicy wchodzą w interakcję z działaniami.
Na telefonach z Androidem użytkownicy mogą zobaczyć odpowiedzi dotyczące multimediów, gdy spełniony jest któryś z tych warunków:
- Asystent Google działa na pierwszym planie, a ekran telefonu jest włączony.
- Użytkownik opuszcza Asystenta Google podczas odtwarzania dźwięku i wraca do Asystenta Google w ciągu 10 minut od zakończenia odtwarzania. Po powrocie do Asystenta Google użytkownik widzi kartę multimediów i elementy sugestii.
- Asystent pozwala użytkownikom sterować głośnością urządzenia w ramach akcji związanej z rozmowami, mówiąc np. „Zwiększ głośność” lub „Ustaw głośność na 50 procent”. Jeśli masz intencje, które obsługują podobne wyrażenia do trenowania, intencje mają pierwszeństwo. Zalecamy, aby Asystent odpowiadał na te prośby, chyba że akcja ma konkretny powód.
Gdy telefon jest zablokowany, opcje sterowania multimediami są dostępne. Na Androidzie opcje te znajdują się też w obszarze powiadomień.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/media.png?authuser=7&hl=pl)
Przykładowy kod
Z przykładowego kodu poniżej dowiesz się, jak zaktualizować odpowiedzi z elementami rozszerzonymi, aby uwzględniać 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
Pamiętaj, że poniższy 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
Pamiętaj, że poniższy 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ć obiekt mediaResponse
z elementem mediaType
o wartości AUDIO
oraz parametr mediaObject
w tablicy elementu odpowiedzi z elementami rozszerzonymi. Odpowiedzi dotyczące multimediów obsługują 1 obiekt multimediów. Obiekt multimedialny musi zawierać adres URL treści pliku audio. Obiekt multimedialny może opcjonalnie zawierać nazwę, tekst dodatkowy (opis) oraz adres URL ikony lub obrazu.
Na telefonie i na urządzeniu Google Home, gdy akcja zakończy odtwarzanie dźwięku, Asystent Google sprawdza, czy odpowiedź multimedialna to FinalResponse
.
Jeśli nie, przesyła wywołanie zwrotne do realizacji, które umożliwia udzielenie odpowiedzi użytkownikowi.
Akcja musi zawierać elementy sugestii, jeśli odpowiedź jest inna niż FinalResponse
.
Obsługa wywołania zwrotnego po zakończeniu odtwarzania
Akcja powinna obsługiwać intencję actions.intent.MEDIA_STATUS
, aby prosić użytkownika o wykonanie dalszych czynności (np. o odtworzenie innego utworu). Akcja otrzymuje to wywołanie zwrotne po zakończeniu odtwarzania multimediów. W wywołaniu zwrotnym argument MEDIA_STATUS
zawiera informacje o stanie bieżących multimediów. Wartość stanu będzie wynosić FINISHED
lub STATUS_UNSPECIFIED
.
Korzystanie z Dialogflow
Jeśli w Dialogflow chcesz przeprowadzić rozgałęzienie konwersacyjne, musisz skonfigurować kontekst wejściowy actions_capability_media_response_audio
w intencji, aby był on aktywowany tylko na platformach obsługujących odpowiedzi multimedialne.
Realizacja zamówień
Fragment kodu poniżej pokazuje, jak możesz napisać kod realizacji dla akcji. Jeśli korzystasz z Dialogflow, zastąp actions.intent.MEDIA_STATUS
nazwą działania określoną w intencji, która odbiera zdarzenie actions_intent_MEDIA_STATUS
(na przykład „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
Pamiętaj, że poniższy kod JSON 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
Pamiętaj, że poniższy kod JSON 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 stołowe
Karty tabel umożliwiają wyświetlanie w odpowiedzi danych tabelarycznych (np. rankingów sportowych, wyników wyborów czy lotów). 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, ponieważ wyświetlają dane statyczne i nie są z nimi interaktywne jak w przypadku elementów list.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/table.png?authuser=7&hl=pl)
Właściwości
Karty tabel mają te wymagania i opcjonalne właściwości, które możesz skonfigurować:
- Funkcja jest obsługiwana na platformach z obsługą
actions.capability.SCREEN_OUTPUT
.
Z tej sekcji dowiesz się, jak dostosować elementy karty tabeli.
Nazwa | Jest opcjonalny | Możliwość dostosowania | Uwagi na temat dostosowywania |
---|---|---|---|
title |
Tak | Tak | Ogólny tytuł tabeli. Musi być ustawiony, jeśli podtytuł jest ustawiony. Możesz dostosować rodzinę czcionek i kolor. |
subtitle |
Tak | Nie | Podtytuł tabeli. |
image |
Tak | Tak | Obraz powiązany z tabelą. |
Row |
Nie | Tak |
Dane w wierszach tabeli. Składa się z tablicy obiektów Pierwsze 3 wiersze są wyświetlane na pewno, ale inne mogą nie być widoczne na niektórych platformach. Przeprowadź test za pomocą symulatora, aby sprawdzić, które wiersze są wyświetlane w przypadku danej platformy. Na platformach obsługujących funkcję |
ColumnProperties |
Tak | Tak | Nagłówek i wyrównanie kolumny. Składa się z właściwości header (reprezentującej tekst nagłówka kolumny) i właściwości horizontal_alignment (typu HorizontalAlignment ). |
Cell |
Nie | Tak | Opisuje komórkę w wierszu. Każda komórka zawiera ciąg znaków reprezentujący wartość tekstową. Możesz dostosować tekst w komórce. |
Button |
Tak | Tak | Obiekt przycisku, który zwykle wyświetla się u dołu karty. Karta tabeli może mieć tylko 1 przycisk. Możesz dostosować kolor przycisku. |
HorizontalAlignment |
Tak | Tak | Wyrównanie treści w komórce w poziomie. Wartościami mogą być LEADING , CENTER lub TRAILING . Jeśli
nie określono, treść zostanie wyrównana do przedniej krawędzi komórki. |
Przykładowy kod
Poniższe fragmenty kodu pokazują, jak wdrożyć prostą kartę z tabelą:
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
Pamiętaj, że poniższy 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
Pamiętaj, że poniższy 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" } ] } ] }
Poniższe fragmenty kodu pokazują, jak wdrożyć kartę złożoną z tabelą:
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
Pamiętaj, że poniższy 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
Pamiętaj, że poniższy 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 odpowiedzi z elementami rozszerzonymi możesz zmienić, tworząc niestandardowy motyw. Jeśli zdefiniujesz motyw swojego projektu w Actions, style odpowiedzi w Actions w Twoim projekcie będą zgodne z Twoim motywem. Takie niestandardowe elementy marki mogą pomóc w określeniu niepowtarzalnego charakteru rozmowy, gdy użytkownicy wywołują działania w miejscu z ekranem.
Aby ustawić niestandardowy motyw odpowiedzi, wykonaj te czynności:
- W Konsoli Actions kliknij Programowanie > Dostosowywanie motywu.
- Skonfiguruj dowolne lub wszystkie z tych ustawień:
- Kolor tła, który będzie używany jako tło kart. Tło powinno być zazwyczaj jasne, aby treść karty była czytelna.
- Kolor podstawowy to główny kolor tekstów nagłówków kart i elementów interfejsu. Aby kontrastować z tłem, należy użyć ciemniejszego koloru podstawowego.
- Rodzina czcionek określa typ czcionki użytej w tytułach i innych widocznych elementach tekstu.
- Styl narożnika obrazu może zmieniać wygląd rogów kart.
- Obraz tła używa niestandardowego obrazu zamiast koloru tła. Musisz przesłać 2 różne obrazy, gdy urządzenie wyświetla się w orientacji poziomej lub pionowej. Pamiętaj, że jeśli używasz obrazu tła, kolorem podstawowym jest biały.
- Kliknij Zapisz.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/theme-customization.png?authuser=7&hl=pl)