Przeglądaj w Dialogflow
Kliknij Continue (Dalej), aby zaimportować przykładowe odpowiedzi w Dialogflow. Następnie postępuj zgodnie z poniższe czynności, aby wdrożyć i przetestować przykład:
- Wpisz nazwę agenta i utwórz nowego agenta Dialogflow dla przykładu.
- Gdy agent zakończy importowanie, kliknij Przejdź do agenta.
- W głównym menu nawigacyjnym kliknij Fulfillment (Realizacja).
- Włącz edytor wbudowany, a następnie kliknij Wdróż. Edytor zawiera próbkę w kodzie.
- W głównym menu nawigacyjnym kliknij Integrations (Integracje), a następnie kliknij Google (Google). .
- W wyświetlonym oknie modalnym włącz Automatyczny podgląd zmian i kliknij Przetestuj aby otworzyć Symulator działań.
- W symulatorze wpisz
Talk to my test app
, aby przetestować próbkę.
Używaj odpowiedzi rozszerzonych, jeśli chcesz wyświetlać elementy wizualne, aby wzbogacić użytkownika interakcji z akcją. Te elementy wizualne mogą dostarczyć wskazówek, aby kontynuować rozmowę.
Odpowiedzi rozszerzone mogą pojawiać się tylko na ekranie lub w trybie audio i na ekranie. Ta może zawierać następujące komponenty:
- 1–2 proste odpowiedzi (dymki czatu).
- Opcjonalna karta podstawowa.
- Opcjonalne elementy z sugestią.
- Opcjonalny element link-out.
Możesz też zapoznać się z naszymi wytycznymi dotyczącymi projektowania rozmowy, aby dowiedzieć się, jak wykorzystać te elementy wizualne w akcji.
Właściwości
Odpowiedzi z elementami rozszerzonymi mają następujące wymagania i są opcjonalne właściwości, które możesz skonfigurować:
- Obsługiwane na platformach z funkcją
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 z sugestią.
- Elementy z sugestią są niedozwolone w
FinalResponse
- Łączenie się z internetem za pomocą inteligentnych ekranów nie jest obecnie obsługiwane.
W sekcjach poniżej dowiesz się, jak tworzyć różne typy rozszerzonych odpowiedzi.
Karta podstawowa
.![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/basic-card.png?authuser=8&hl=pl)
Karta podstawowa zawiera te informacje:
- Obraz
- Tytuł
- Napisy
- Treść tekstu
- Przycisk Połącz
- Borders
Używaj kart podstawowych głównie do wyświetlania. powinny być zwięzłe, do prezentowania użytkownikom kluczowych (lub ich podsumowania) informacji i umożliwiania im więcej, jeśli chcesz (za pomocą linku internetowego).
W większości przypadków należy dodać elementy z sugestią poniżej. aby kontynuować rozmowę lub ją pokierować.
w ogóle nie powtarzaj informacji podanych na karcie w dymku czatu.
Właściwości
Podstawowy typ odpowiedzi karty ma następujące wymagania i jest opcjonalny właściwości, które możesz skonfigurować:
- Obsługiwane na platformach z funkcją
actions.capability.SCREEN_OUTPUT
. - Tekst sformatowany (wymagany, jeśli nie ma obrazu)
- Domyślnie zwykły tekst.
- Nie może zawierać linku.
- 10 wierszy w obrazie, 15 wierszy bez obrazu. Dotyczy 500 znaków (z obrazem) lub 750 znaków (bez obrazu). Telefony z mniejszym ekranem szybciej przycinają tekst niż w przypadku telefonów z większym ekranem. Jeśli tekst zawiera także wielu wierszy, zostaje obcięty na ostatnim słowie kluczowym za pomocą wielokropka.
- Obsługiwany jest ograniczony podzbiór formatu Markdown:
- Nowy wiersz z podwójną spacją, po której następuje znak \n
**bold**
*italics*
- Obraz (wymagany, jeśli nie ma sformatowanego tekstu)
- Wszystkie obrazy muszą mieć wysokość 192 dp.
- Jeśli format obrazu jest inny niż na ekranie, wyśrodkowany z szarymi paskami na pionowych lub poziomych krawędziach.
- Źródło obrazu to adres URL.
- GIF-y z animacją są dozwolone.
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 zostanie zwijana.
- Napisy
- Zwykły tekst.
- Stały rozmiar i rozmiar czcionki.
- Maksymalnie 1 wiersz; dodatkowe znaki są obcinane.
- Wysokość karty zwija się, jeśli nie określono 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. To pole jest sprawdzane w trakcie procesu zatwierdzania.
- Karta podstawowa nie ma możliwości interakcji bez linku. Dotykanie link odsyła użytkownika do linku, a główna treść karty pozostaje nieaktywny.
- Obramowanie
- Możesz dostosować obramowanie między kartą a kontenerem obrazu. dostosować sposób prezentacji podstawowej karty.
- Skonfigurowane przez ustawienie właściwości ciągu JSON
imageDisplayOptions
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/basic-card.png?authuser=8&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=8&hl=pl)
Karuzela przeglądania to odpowiedź rozszerzona, która umożliwia użytkownikom przewijanie treści w pionie i wybierz kafelek w kolekcji. Karuzele przeglądania zostały zaprojektowane na potrzeby treści internetowych, otwierając wybrany kafelek w przeglądarce (lub przeglądarce AMP) jeśli wszystkie kafelki są zgodne z AMP). Karuzela przeglądania będzie się wyświetlać również na w interfejsie Asystenta do późniejszego przeglądania.
Właściwości
Typ odpowiedzi karuzeli przeglądania ma te wymagania i jest opcjonalny właściwości, które możesz skonfigurować:
- Obsługiwane na platformach, które zawierają:
actions.capability.SCREEN_OUTPUT
i funkcjiactions.capability.WEB_BROWSER
. Ten typ odpowiedzi to obecnie niedostępne na inteligentnych ekranach. - Karuzela przeglądania
- Maksymalnie 10 kafelków.
- Co najmniej dwa kafelki.
- Wszystkie kafelki w karuzeli muszą prowadzić do treści internetowych (zawartości AMP)
).
- Aby użytkownik został przekierowany do przeglądarki AMP,
urlHintType
w kafelkach treści AMP musi mieć ustawienie „AMP_CONTENT”.
- Aby użytkownik został przekierowany do przeglądarki AMP,
- Przeglądanie kafelków karuzeli
- Spójność kafelków (wymagana):
- Wszystkie kafelki w karuzeli przeglądania muszą mieć te same komponenty. Jeśli na przykład jeden kafelek ma pole obrazu, pozostałe musi też zawierać pola obrazów.
- Jeśli wszystkie kafelki w karuzeli przeglądania prowadzą do treści zgodnych z AMP, użytkownik jest otwierany w przeglądarce AMP z dodatkowymi funkcjami. Jeśli dowolny kafelek zawiera link do treści innej niż AMP, wszystkie kafelki kierują użytkowników do przeglądarki.
- Obraz (opcjonalnie)
- Wymuszony jest rozmiar wysokości 128 dp i szerokości 232 dp.
- Jeśli współczynnik proporcji obrazu nie pasuje do ramki ograniczającej obrazu, obraz zostanie wyśrodkowany i będzie mieć słupki po obu stronach. Na smartfonach obraz jest wyśrodkowany w kwadracie z zaokrąglonymi rogami.
- Jeśli link do zdjęcia nie działa, zamiast niego używany jest obraz zastępczy.
- Do obrazu wymagany jest tekst alternatywny.
- Tytuł (wymagany)
- Takie same opcje formatowania jak na podstawowej karcie tekstowej.
- Tytuły muszą być unikalne (aby można było wybrać głos).
- Maksymalnie dwa wiersze tekstu.
- Rozmiar czcionki: 16 sp.
- Opis (opcjonalnie)
- Takie same opcje formatowania jak na podstawowej karcie tekstowej.
- Maksymalnie cztery wiersze tekstu.
- Skrócone wielokropkami (...)
- Rozmiar czcionki 14 sp, kolor szary.
- Stopka (opcjonalnie)
- Stały rozmiar i rozmiar czcionki.
- Maksymalnie 1 wiersz tekstu.
- Skrócone wielokropkami (...)
- Są zakotwiczone u dołu, dlatego kafelki z mniejszą liczbą wierszy tekstu głównego mogą nie znajdują się odstępy nad tekstem podrzędnym.
- Rozmiar czcionki 14 sp, kolor szary.
- Spójność kafelków (wymagana):
- Interakcja
- Użytkownik może przewijać widok w pionie, aby przeglądać elementy.
- Kliknij kartę: kliknięcie elementu powoduje otwarcie przeglądarki i wyświetlenie strona, do której prowadzi link.
- Rozpoznawanie mowy
- Działanie mikrofonu
- Mikrofon nie włącza się z powrotem po wysłaniu do użytkownika karuzeli przeglądania.
- Użytkownik nadal może kliknąć mikrofon lub wywołać Asystenta („OK Google”) aby ponownie włączyć mikrofon.
- Działanie mikrofonu
Wskazówki
Domyślnie mikrofon pozostaje zamknięty po wysłaniu karuzeli przeglądania. Jeśli chcesz aby kontynuować rozmowę po jej zakończeniu, zdecydowanie zalecamy dodanie elementów z sugestią pod karuzelą.
Nigdy nie powtarzaj opcji na liście jako elementów z sugestiami. Chipsy ten kontekst jest używany do zmiany wątku (a nie do wyboru odpowiedzi).
Tak jak w przypadku list, dymek czatu obok karty karuzeli podzbioru dźwięku (TTS/SSML). Ścieżka dźwiękowa (TTS/SSML) łączy pierwszy w karuzeli. Zdecydowanie odradzamy też odczytywanie wszystkich elementów, z karuzeli. Najlepiej podać pierwszą rzecz i powód, który jest tam dostępny (np. „Najpopularniejsza”, „Ostatnio kupiona, o których mowa).
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 produktu
W przypadku interakcji użytkownika z karuzelą przeglądania nie jest wymagana dalsza realizacja ponieważ karuzela obsługuje przesyłanie danych w przeglądarce. Pamiętaj, że mikrofon nie otworzy się ponownie po interakcji użytkownika z elementem karuzeli przeglądania, powinna zakończyć rozmowę lub zawierać elementów z sugestią w odpowiedzi, zgodnie z powyższymi wskazówkami.
Elementy z sugestią
.![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/suggestions.png?authuser=8&hl=pl)
Za pomocą elementów z sugestiami możesz sugerować odpowiedzi w odpowiedziach, aby kontynuować rozmowę lub ją zmienić. Jeśli w trakcie rozmowy pojawi się główne wezwanie do działania, pomyśl o jako pierwszy element z sugestią.
Jeśli to możliwe, zawrzyj jedną kluczową sugestię na czacie. dymek, ale tylko wtedy, gdy reakcja lub rozmowa na czacie wydaje się naturalna.
Właściwości
Elementy z sugestią mają poniższe wymagania i są opcjonalne właściwości, które możesz skonfigurować:
- Obsługiwane na platformach z funkcją
actions.capability.SCREEN_OUTPUT
. - Aby można było połączyć elementy z sugestią z internetem, platformy muszą też mieć
Możliwości:
actions.capability.WEB_BROWSER
. Ta funkcja nie jest obecnie dostępne 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=8&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 w mediach
.![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/media.png?authuser=8&hl=pl)
Odpowiedzi na multimedia umożliwiają Akcjom odtwarzanie treści audio z określonym czasem trwania odtwarzania przekracza limit 240 sekund dla SSML. Główny komponent mediów to karta z jedną ścieżką. Karta umożliwia użytkownikowi wykonywanie tych czynności operacje:
- Jeszcze raz odtwórz ostatnie 10 sekund.
- Przewiń do przodu o 30 sekund.
- Wyświetla całkowitą długość treści multimedialnych.
- Wyświetla wskaźnik postępu odtwarzania dźwięku.
- Pokazuje czas odtwarzania.
Odpowiedzi na multimedia obsługują interakcje głosowe z tymi elementami sterującymi dźwiękiem:
- „OK Google, włącz”
- „OK Google, wstrzymaj”.
- „OK Google, zatrzymaj”.
- „OK Google, zacznij od nowa”.
Użytkownicy mogą też sterować głośnością, mówiąc na przykład: „OK Google, wyłącz „Głośniej” lub „OK Google, ustaw głośność na 50 procent”. Intencje w Działanie ma pierwszeństwo, jeśli obsługuje podobne wyrażenia na potrzeby trenowania. Pozwól Asystentowi obsługuje te żądania użytkowników, chyba że akcja ma konkretny powód.
Właściwości
Odpowiedzi dotyczące mediów mają te wymagania i właściwości opcjonalne, może skonfigurować:
- Obsługiwane na platformach z atrybutem
actions.capability.MEDIA_RESPONSE_AUDIO
działania. - Dźwięk do odtwarzania musi być w prawidłowo sformatowanym pliku
.mp3
. Aktywny strumieniowanie nie jest obsługiwane. - Plik multimedialny do odtworzenia musi być podany jako adres URL HTTPS.
- Obraz (opcjonalnie)
- Możesz opcjonalnie dołączyć ikonę lub obraz.
- Ikona
- Ikona jest wyświetlana jako miniatura bez obramowania po prawej stronie multimediów kartę gracza.
- Rozmiar powinien wynosić 36 x 36 dp. Większe obrazy są dopasowywane do rozmiaru.
- Grafika
- Kontener obrazu będzie miał 192 dp.
- Obraz jest widoczny u góry karty odtwarzacza i obejmuje do całej szerokości karty. Większość obrazów będzie wyświetlana z paskami wzdłuż z góry lub po bokach.
- GIF-y z animacją są dozwolone.
- Źródło obrazu musisz podać jako adres URL.
- Tekst alternatywny jest wymagany dla wszystkich obrazów.
Działanie na platformach
Odpowiedzi na multimedia są obsługiwane na telefonach z Androidem i na urządzeniach Google Home. zachowanie reakcji w mediach zależy od platformy, na której użytkownicy wchodzą w interakcję za pomocą akcji.
Na telefonach z Androidem użytkownicy mogą zobaczyć odpowiedzi multimedialne, jeśli jeden z tych warunków są spełnione:
- Asystent Google jest na pierwszym planie, a ekran telefonu jest włączony.
- Podczas odtwarzania dźwięku użytkownik opuszcza Asystenta Google 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 z sugestiami.
- Asystent umożliwia użytkownikom sterowanie głośnością urządzenia w obrębie konwersacyjne, mówiąc na przykład „Zrób głośniej” lub „Ustaw głośność na 50 procent”. Jeśli masz intencje, które obsługują podobne wyrażenia na potrzeby trenowania, Twoje intencje mają pierwszeństwo. Zalecamy, aby Asystent wykonał te czynności chyba że akcja ma konkretny powód.
Opcje sterowania multimediami są dostępne, gdy telefon jest zablokowany. W Androidzie elementy sterujące pojawiają się też w obszarze powiadomień.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/media.png?authuser=8&hl=pl)
Przykładowy kod
Poniższy przykładowy kod pokazuje, jak można zaktualizować odpowiedzi z elementami rozszerzonymi zawierać 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 parametrem mediaType
o wartości AUDIO
i
zawierający mediaObject
w tablicy elementu odpowiedzi rozszerzonej. Plik multimedialny
obsługuje pojedynczy obiekt multimedialny. Obiekt multimedialny musi zawierać treść
Adres URL pliku audio. Obiekt multimedialny może opcjonalnie zawierać nazwę, tekst podrzędny
(opis) oraz adres URL ikony lub 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, umożliwiając udzielenie odpowiedzi na
użytkownika.
Akcja musi zawierać elementy z sugestią, jeśli w tagu
odpowiedź nie jest oznaczona jako FinalResponse
.
Obsługa wywołania zwrotnego po zakończeniu odtwarzania
Akcja powinna obsługiwać intencję actions.intent.MEDIA_STATUS
użytkownika w celu dalszego kontaktu (np. aby odtworzyć inny utwór). 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.
będzie mieć wartość FINISHED
lub STATUS_UNSPECIFIED
.
Korzystanie z Dialogflow
Jeśli chcesz wykonać rozgałęzienia konwersacyjne w Dialogflow, musisz wykonać
skonfiguruj kontekst wejściowy actions_capability_media_response_audio
w
.
Osiąganie realizacji zamówień
Fragment kodu poniżej pokazuje, jak napisać kod realizacji zamówienia
Akcja. Jeśli używasz Dialogflow, zastąp actions.intent.MEDIA_STATUS
z nazwą działania określoną w intencji, która otrzymuje
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
Zwróć uwagę, ż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
Zwróć uwagę, ż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 na stoły
Karty tabel umożliwiają wyświetlanie w odpowiedzi danych tabelarycznych (np. tabele sportowe, wyniki wyborów czy loty). Możesz definiować kolumny wiersze (maksymalnie po 3), które Asystent musi pokazać na karcie tabeli. Możesz też zdefiniować dodatkowe kolumny i wiersze wraz z ich priorytetami.
Tabele różnią się od list pionowych, bo zawierają dane statyczne i nie są interaktywne, np. są elementami listy.
.![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/table.png?authuser=8&hl=pl)
Właściwości
Karty tabel mają podane niżej wymagania i opcjonalne właściwości. skonfiguruj:
- Obsługiwane na platformach z funkcją
actions.capability.SCREEN_OUTPUT
.
W tej sekcji opisujemy, jak dostosować elementy w tabeli.
Nazwa | Opcjonalne | Jest konfigurowalne | Uwagi dotyczące dostosowywania |
---|---|---|---|
title |
Tak | Tak | Ogólny tytuł tabeli. Ta opcja jest wymagana, jeśli ustawiono podtytuł. Dostępne opcje dostosować rodzinę i kolor czcionek. |
subtitle |
Tak | Nie | Podtytuł tabeli. |
image |
Tak | Tak | Obraz powiązany z tabelą. |
Row |
Nie | Tak |
Dane wiersza tabeli. Składa się z tablicy Pierwsze 3 wiersze będą się wyświetlać, ale pozostałe mogą się nie wyświetlać wyświetlają się na określonych platformach. Przetestuj za pomocą symulatora, które wiersze są wyświetlane dla
danej powierzchni. Na platformach obsługujących |
ColumnProperties |
Tak | Tak | Nagłówek i wyrównanie kolumny. Składa się z: header
(reprezentującej tekst nagłówka kolumny) oraz
Usługa horizontal_alignment (typu)
HorizontalAlignment ). |
Cell |
Nie | Tak | Opisuje komórkę w wierszu. Każda komórka zawiera ciąg reprezentujący wartość tekstową. Tekst w komórce możesz dostosować. |
Button |
Tak | Tak | Obiekt przycisku wyświetlany zwykle u dołu karty. Tabela karta może mieć tylko 1 przycisk. Możesz dostosować kolor przycisku. |
HorizontalAlignment |
Tak | Tak | Wyrównanie poziome treści w komórce. Wartościami mogą być
LEADING , CENTER lub TRAILING . Jeśli
nieokreślona, treść jest wyrównana do początkowej krawędzi komórki. |
Przykładowy kod
Poniższe 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
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" } ] } ] }
Te fragmenty kodu pokazują, jak wdrożyć kartę złożonej 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
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 szczegółowych odpowiedzi możesz zmienić, tworząc motyw niestandardowy. Jeśli zdefiniujesz motyw projektu w Actions, rozszerzone odpowiedzi w całym Akcje projektu będą dostosowywane zgodnie z wybranym motywem. Własna marka może pomóc określić charakter rozmowy, gdy użytkownicy wywołaj akcje na powierzchni z ekranem.
Aby ustawić niestandardowy motyw odpowiedzi, wykonaj te czynności:
- W konsoli Actions wybierz Programowanie > Dostosowywanie motywu
- Ustaw wszystkie lub dowolne z tych ustawień:
- Kolor tła – używany jako tło kart. W użyj jasnego koloru tła, są łatwe do odczytania.
- Kolor podstawowy to główny kolor kart teksty nagłówków i interfejs . Ogólnie należy używać ciemniejszego koloru podstawowego, aby kontrastować z tłem.
- Rodzina czcionek określa typ czcionki używanej w tytułach i innych elementach. do najważniejszych elementów tekstowych.
- Styl narożników obrazu może zmieniać wygląd kart w rogach ekranu.
- Obraz tła – korzysta z niestandardowego obrazu zamiast tła. koloru. Musisz przesłać dwa różne obrazy, jeśli urządzenie jest ustawione odpowiednio w orientacji poziomej lub pionowej. Pamiętaj, że Jeśli używasz obrazu tła, kolor podstawowy jest ustawiony na biały.
- Kliknij Zapisz.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/theme-customization.png?authuser=8&hl=pl)