Réponses de la sélection visuelle (Dialogflow)

Explorer dans Dialogflow

Cliquez sur Continuer pour importer notre exemple de réponses dans Dialogflow. Suivez ensuite les procédez comme suit pour déployer et tester l'exemple:

  1. Saisissez un nom d'agent et créez un agent Dialogflow pour l'exemple.
  2. Une fois l'importation de l'agent terminée, cliquez sur Accéder à l'agent.
  3. Dans le menu de navigation principal, accédez à Fulfillment.
  4. Activez l'éditeur intégré, puis cliquez sur Déployer. L'éditeur contient l'exemple du code source.
  5. Dans le menu de navigation principal, accédez à Integrations (Intégrations), puis cliquez sur Google l'Assistant Google.
  6. Dans la fenêtre modale qui s'affiche, activez Auto-preview changes (Prévisualisation automatique des modifications), puis cliquez sur Test (Tester). pour ouvrir le simulateur d'actions.
  7. Dans le simulateur, saisissez Talk to my test app pour tester l'échantillon.
<ph type="x-smartling-placeholder"></ph> Continuer

Utilisez une réponse de sélection visuelle si vous souhaitez que l'utilisateur puisse choisir entre plusieurs options pour poursuivre votre action.

Les réponses par sélection visuelle peuvent s'afficher sur des expériences uniquement à l'écran ou sur expériences qui intègrent à la fois des composants audio et d'écran.

Les réponses de sélection visuelle peuvent contenir les composants suivants:

Vous pouvez également consulter nos consignes de conception des conversations pour en savoir plus comment intégrer ces éléments visuels dans votre action.

Propriétés

Les réponses par sélection visuelle sont soumises aux exigences suivantes que vous pouvez configurer:

  • Compatible avec les surfaces disposant de la capacité actions.capability.SCREEN_OUTPUT.
  • Le premier élément d'une réponse de sélection visuelle doit être une réponse simple.
  • Une seule réponse simple au maximum.
  • Une seule fiche de base, l'interface de l'option (liste ou carrousel) ou StructuredResponse. (Vous ne pouvez pas avoir à la fois une carte de base et une option de commande en même temps).
  • Huit chips de suggestion au maximum.
  • Les chips de suggestion ne sont pas autorisés dans les FinalResponse.

Les sections suivantes expliquent comment créer différents types de sélection visuelle des réponses.

Liste

<ph type="x-smartling-placeholder">
</ph>
Figure 1. Exemple de liste (smartphone)

La liste à sélection unique présente à l'utilisateur une liste verticale de plusieurs éléments et permet à l'utilisateur d'en sélectionner un seul. Sélectionner un élément dans la liste génère une requête utilisateur (bulle de chat) contenant le titre de l'élément de liste.

Le type de réponse "list" est pris en charge sur les surfaces avec le paramètre Fonctionnalité actions.capability.SCREEN_OUTPUT.

Propriétés

Les listes doivent contenir entre 2 et 30 éléments. Les listes ont le les propriétés suivantes:

  • Titre de la liste (facultatif) <ph type="x-smartling-placeholder">
      </ph>
    • Police et taille de police fixes
    • Limité à une seule ligne. (Les caractères en trop sont tronqués.)
    • Le texte brut, Markdown n'est pas pris en charge.
    • Si aucun titre n'est spécifié, la hauteur de la fiche est réduite.
  • Élément de liste <ph type="x-smartling-placeholder">
      </ph>
    • Titre <ph type="x-smartling-placeholder">
        </ph>
      • Police et taille de police fixes
      • Longueur maximale: une ligne (tronquée par des points de suspension, etc.)
      • Doit être unique (pour permettre la sélection de la voix)
    • Description (facultatif) <ph type="x-smartling-placeholder">
        </ph>
      • Police et taille de police fixes
      • Longueur maximale: 2 lignes (tronquées par des points de suspension, etc.)
    • Image (facultatif) <ph type="x-smartling-placeholder">
        </ph>
      • Taille: 48 x 48 px
  • Interactions <ph type="x-smartling-placeholder">
      </ph>
    • Voix/SMS <ph type="x-smartling-placeholder">
        </ph>
      • L'utilisateur peut toujours énoncer ou saisir le titre d'un élément au lieu d'appuyer dessus.
      • Vous devez disposer d'un intent pour la saisie tactile qui gère les Événement actions_intent_OPTION.

Conseils

Les listes sont utiles lorsqu'il est important de faire la distinction entre les options ou lorsque l'utilisateur doit choisir entre les options à analyser en un coup d'œil. Par exemple, "Peter" Avez-vous besoin de parler à Peter Jons ou Peter Hans ?

Nous vous recommandons d'ajouter des chips de suggestion sous une liste pour activer l'utilisateur pour orienter ou développer la conversation. Ne répétez jamais les options présentées dans la liste en tant que chips de suggestion. Dans ce contexte, les chips permettent de faire pivoter (pas pour la sélection du choix).

Notez que dans l'exemple ci-joint, la bulle de chat qui accompagne La fiche de liste est un sous-ensemble de l'audio (TTS/SSML). La sortie audio n'inclut que le premier élément de la liste. Nous vous déconseillons de lire tous les éléments dans la liste.

Assurez-vous que votre action montre ce qui est le plus important pour vos utilisateurs sur en haut de la liste (par exemple, les articles les plus populaires, les articles récemment achetés ou dont on parle le plus). Au départ, la liste affiche jusqu'à 10 éléments, mais les utilisateurs pouvez développer la liste pour afficher plus d'éléments. Le nombre d'éléments que la liste avant expansion peuvent également changer en fonction de la surface et du temps.

Figure 2. Exemple de liste (écran connecté)

Exemple de code

Node.js

app.intent('List', (conv) => {
  if (!conv.screen) {
    conv.ask('Sorry, try this on a screen device or select the ' +
      'phone surface in the simulator.');
    return;
  }

  conv.ask('This is a list example.');
  // Create a list
  conv.ask(new List({
    title: 'List Title',
    items: {
      // Add the first item to the list
      'SELECTION_KEY_ONE': {
        synonyms: [
          'synonym 1',
          'synonym 2',
          'synonym 3',
        ],
        title: 'Title of First List Item',
        description: 'This is a description of a list item.',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Image alternate text',
        }),
      },
      // Add the second item to the list
      'SELECTION_KEY_GOOGLE_HOME': {
        synonyms: [
          'Google Home Assistant',
          'Assistant on the Google Home',
      ],
        title: 'Google Home',
        description: 'Google Home is a voice-activated speaker powered by ' +
          'the Google Assistant.',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Google Home',
        }),
      },
      // Add the third item to the list
      'SELECTION_KEY_GOOGLE_PIXEL': {
        synonyms: [
          'Google Pixel XL',
          'Pixel',
          'Pixel XL',
        ],
        title: 'Google Pixel',
        description: 'Pixel. Phone by Google.',
        image: new Image({
          url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
          alt: 'Google Pixel',
        }),
      },
    },
  }));
});
index.js

Java

@ForIntent("List")
public ActionResponse list(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 list example.")
      .add(
          new SelectionList()
              .setTitle("List Title")
              .setItems(
                  Arrays.asList(
                      new ListSelectListItem()
                          .setTitle("Title of First List Item")
                          .setDescription("This is a description of a list item.")
                          .setImage(
                              new Image()
                                  .setUrl(
                                      "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                  .setAccessibilityText("Image alternate text"))
                          .setOptionInfo(
                              new OptionInfo()
                                  .setSynonyms(
                                      Arrays.asList("synonym 1", "synonym 2", "synonym 3"))
                                  .setKey("SELECTION_KEY_ONE")),
                      new ListSelectListItem()
                          .setTitle("Google Home")
                          .setDescription(
                              "Google Home is a voice-activated speaker powered by the Google Assistant.")
                          .setImage(
                              new Image()
                                  .setUrl(
                                      "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                  .setAccessibilityText("Google Home"))
                          .setOptionInfo(
                              new OptionInfo()
                                  .setSynonyms(
                                      Arrays.asList(
                                          "Google Home Assistant",
                                          "Assistant on the Google Home"))
                                  .setKey("SELECTION_KEY_GOOGLE_HOME")),
                      new ListSelectListItem()
                          .setTitle("Google Pixel")
                          .setDescription("Pixel. Phone by Google.")
                          .setImage(
                              new Image()
                                  .setUrl(
                                      "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                  .setAccessibilityText("Google Pixel"))
                          .setOptionInfo(
                              new OptionInfo()
                                  .setSynonyms(
                                      Arrays.asList("Google Pixel XL", "Pixel", "Pixel XL"))
                                  .setKey("SELECTION_KEY_GOOGLE_PIXEL")))));
  return responseBuilder.build();
}
MyActionsApp.java

Node.js

if (!conv.screen) {
  conv.ask('Sorry, try this on a screen device or select the ' +
    'phone surface in the simulator.');
  return;
}

conv.ask('This is a list example.');
// Create a list
conv.ask(new List({
  title: 'List Title',
  items: {
    // Add the first item to the list
    'SELECTION_KEY_ONE': {
      synonyms: [
        'synonym 1',
        'synonym 2',
        'synonym 3',
      ],
      title: 'Title of First List Item',
      description: 'This is a description of a list item.',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Image alternate text',
      }),
    },
    // Add the second item to the list
    'SELECTION_KEY_GOOGLE_HOME': {
      synonyms: [
        'Google Home Assistant',
        'Assistant on the Google Home',
    ],
      title: 'Google Home',
      description: 'Google Home is a voice-activated speaker powered by ' +
        'the Google Assistant.',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Google Home',
      }),
    },
    // Add the third item to the list
    'SELECTION_KEY_GOOGLE_PIXEL': {
      synonyms: [
        'Google Pixel XL',
        'Pixel',
        'Pixel XL',
      ],
      title: 'Google Pixel',
      description: 'Pixel. Phone by Google.',
      image: new Image({
        url: 'https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png',
        alt: 'Google Pixel',
      }),
    },
  },
}));
index.js

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 list example.")
    .add(
        new SelectionList()
            .setTitle("List Title")
            .setItems(
                Arrays.asList(
                    new ListSelectListItem()
                        .setTitle("Title of First List Item")
                        .setDescription("This is a description of a list item.")
                        .setImage(
                            new Image()
                                .setUrl(
                                    "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                .setAccessibilityText("Image alternate text"))
                        .setOptionInfo(
                            new OptionInfo()
                                .setSynonyms(
                                    Arrays.asList("synonym 1", "synonym 2", "synonym 3"))
                                .setKey("SELECTION_KEY_ONE")),
                    new ListSelectListItem()
                        .setTitle("Google Home")
                        .setDescription(
                            "Google Home is a voice-activated speaker powered by the Google Assistant.")
                        .setImage(
                            new Image()
                                .setUrl(
                                    "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                .setAccessibilityText("Google Home"))
                        .setOptionInfo(
                            new OptionInfo()
                                .setSynonyms(
                                    Arrays.asList(
                                        "Google Home Assistant",
                                        "Assistant on the Google Home"))
                                .setKey("SELECTION_KEY_GOOGLE_HOME")),
                    new ListSelectListItem()
                        .setTitle("Google Pixel")
                        .setDescription("Pixel. Phone by Google.")
                        .setImage(
                            new Image()
                                .setUrl(
                                    "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                .setAccessibilityText("Google Pixel"))
                        .setOptionInfo(
                            new OptionInfo()
                                .setSynonyms(
                                    Arrays.asList("Google Pixel XL", "Pixel", "Pixel XL"))
                                .setKey("SELECTION_KEY_GOOGLE_PIXEL")))));
return responseBuilder.build();
MyActionsApp.java

JSON

Notez que le code JSON ci-dessous décrit une réponse webhook.

{
  "payload": {
    "google": {
      "expectUserResponse": true,
      "systemIntent": {
        "intent": "actions.intent.OPTION",
        "data": {
          "@type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
          "listSelect": {
            "title": "List Title",
            "items": [
              {
                "optionInfo": {
                  "key": "SELECTION_KEY_ONE",
                  "synonyms": [
                    "synonym 1",
                    "synonym 2",
                    "synonym 3"
                  ]
                },
                "description": "This is a description of a list item.",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Image alternate text"
                },
                "title": "Title of First List Item"
              },
              {
                "optionInfo": {
                  "key": "SELECTION_KEY_GOOGLE_HOME",
                  "synonyms": [
                    "Google Home Assistant",
                    "Assistant on the Google Home"
                  ]
                },
                "description": "Google Home is a voice-activated speaker powered by the Google Assistant.",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Google Home"
                },
                "title": "Google Home"
              },
              {
                "optionInfo": {
                  "key": "SELECTION_KEY_GOOGLE_PIXEL",
                  "synonyms": [
                    "Google Pixel XL",
                    "Pixel",
                    "Pixel XL"
                  ]
                },
                "description": "Pixel. Phone by Google.",
                "image": {
                  "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                  "accessibilityText": "Google Pixel"
                },
                "title": "Google Pixel"
              }
            ]
          }
        }
      },
      "richResponse": {
        "items": [
          {
            "simpleResponse": {
              "textToSpeech": "This is a list example."
            }
          }
        ]
      }
    }
  }
}

JSON

Notez que le code JSON ci-dessous décrit une réponse webhook.

{
  "expectUserResponse": true,
  "expectedInputs": [
    {
      "possibleIntents": [
        {
          "intent": "actions.intent.OPTION",
          "inputValueData": {
            "@type": "type.googleapis.com/google.actions.v2.OptionValueSpec",
            "listSelect": {
              "title": "List Title",
              "items": [
                {
                  "optionInfo": {
                    "key": "SELECTION_KEY_ONE",
                    "synonyms": [
                      "synonym 1",
                      "synonym 2",
                      "synonym 3"
                    ]
                  },
                  "description": "This is a description of a list item.",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Image alternate text"
                  },
                  "title": "Title of First List Item"
                },
                {
                  "optionInfo": {
                    "key": "SELECTION_KEY_GOOGLE_HOME",
                    "synonyms": [
                      "Google Home Assistant",
                      "Assistant on the Google Home"
                    ]
                  },
                  "description": "Google Home is a voice-activated speaker powered by the Google Assistant.",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Google Home"
                  },
                  "title": "Google Home"
                },
                {
                  "optionInfo": {
                    "key": "SELECTION_KEY_GOOGLE_PIXEL",
                    "synonyms": [
                      "Google Pixel XL",
                      "Pixel",
                      "Pixel XL"
                    ]
                  },
                  "description": "Pixel. Phone by Google.",
                  "image": {
                    "url": "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png",
                    "accessibilityText": "Google Pixel"
                  },
                  "title": "Google Pixel"
                }
              ]
            }
          }
        }
      ],
      "inputPrompt": {
        "richInitialPrompt": {
          "items": [
            {
              "simpleResponse": {
                "textToSpeech": "This is a list example."
              }
            }
          ]
        }
      }
    }
  ]
}

Traiter un élément sélectionné

Lorsque les utilisateurs sélectionnent un article, la valeur sélectionnée vous est transmise en tant que . Dans la valeur d'argument, vous obtiendrez l'identifiant key pour élément sélectionné:

Node.js

app.intent('List - OPTION', (conv, params, option) => {
  const SELECTED_ITEM_RESPONSES = {
    'SELECTION_KEY_ONE': 'You selected the first item',
    'SELECTION_KEY_GOOGLE_HOME': 'You selected the Google Home!',
    'SELECTION_KEY_GOOGLE_PIXEL': 'You selected the Google Pixel!',
  };
  conv.ask(SELECTED_ITEM_RESPONSES[option]);
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("List - OPTION")
public ActionResponse listSelected(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  String selectedItem = request.getSelectedOption();
  String response;

  if (selectedItem.equals("SELECTION_KEY_ONE")) {
    response = "You selected the first item";
  } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_HOME")) {
    response = "You selected the Google Home!";
  } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_PIXEL")) {
    response = "You selected the Google Pixel!";
  } else {
    response = "You did not select a valid item";
  }
  return responseBuilder.add(response).add("Which response would you like to see next?").build();
}
MyActionsApp.java

Node.js

app.intent('actions.intent.OPTION', (conv, params, option) => {
  const SELECTED_ITEM_RESPONSES = {
    'SELECTION_KEY_ONE': 'You selected the first item',
    'SELECTION_KEY_GOOGLE_HOME': 'You selected the Google Home!',
    'SELECTION_KEY_GOOGLE_PIXEL': 'You selected the Google Pixel!',
  };
  conv.ask(SELECTED_ITEM_RESPONSES[option]);
  conv.ask('Which response would you like to see next?');
});
index.js

Java

  @ForIntent("actions.intent.OPTION")
  public ActionResponse listSelected(ActionRequest request) {
    ResponseBuilder responseBuilder = getResponseBuilder(request);
    String selectedItem = request.getSelectedOption();
    String response;

    if (selectedItem.equals("SELECTION_KEY_ONE")) {
      response = "You selected the first item";
    } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_HOME")) {
      response = "You selected the Google Home!";
    } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_PIXEL")) {
      response = "You selected the Google Pixel!";
    } else {
      response = "You did not select a valid item";
    }
    return responseBuilder.add(response).add("Which response would you like to see next?").build();
  }

  public ActionResponse carousel(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 carousel example.")
        .add(
            new SelectionCarousel()
                .setItems(
                    Arrays.asList(
                        new CarouselSelectCarouselItem()
                            .setTitle("Title of First List Item")
                            .setDescription("This is a description of a list item.")
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Image alternate text"))
                            .setOptionInfo(
                                new OptionInfo()
                                    .setSynonyms(
                                        Arrays.asList("synonym 1", "synonym 2", "synonym 3"))
                                    .setKey("SELECTION_KEY_ONE")),
                        new CarouselSelectCarouselItem()
                            .setTitle("Google Home")
                            .setDescription(
                                "Google Home is a voice-activated speaker powered by the Google Assistant.")
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Google Home"))
                            .setOptionInfo(
                                new OptionInfo()
                                    .setSynonyms(
                                        Arrays.asList(
                                            "Google Home Assistant",
                                            "Assistant on the Google Home"))
                                    .setKey("SELECTION_KEY_GOOGLE_HOME")),
                        new CarouselSelectCarouselItem()
                            .setTitle("Google Pixel")
                            .setDescription("Pixel. Phone by Google.")
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Google Pixel"))
                            .setOptionInfo(
                                new OptionInfo()
                                    .setSynonyms(
                                        Arrays.asList("Google Pixel XL", "Pixel", "Pixel XL"))
                                    .setKey("SELECTION_KEY_GOOGLE_PIXEL")))));
    return responseBuilder.build();
  }
}

MyActionsApp.java

JSON

Notez que le code JSON ci-dessous décrit une requête webhook.

{
  "responseId": "5d7732d1-d22d-4a0e-ad34-8bc0a7fde20c-21947381",
  "queryResult": {
    "queryText": "actions_intent_OPTION",
    "action": "List.List-custom",
    "parameters": {},
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Webhook failed for intent: List - OPTION",
    "fulfillmentMessages": [
      {
        "text": {
          "text": [
            "Webhook failed for intent: List - OPTION"
          ]
        }
      }
    ],
    "outputContexts": [
      {
        "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_account_linking"
      },
      {
        "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_audio_output"
      },
      {
        "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/google_assistant_input_type_touch"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/list-followup",
        "lifespanCount": 1
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_option",
        "parameters": {
          "OPTION": "SELECTION_KEY_GOOGLE_PIXEL",
          "text": "Google Pixel"
        }
      }
    ],
    "intent": {
      "name": "projects/df-responses-kohler/agent/intents/88904350-193e-4472-a2de-977eb5d9e26e",
      "displayName": "List - OPTION"
    },
    "intentDetectionConfidence": 1,
    "languageCode": "en"
  },
  "originalDetectIntentRequest": {
    "source": "google",
    "version": "2",
    "payload": {
      "user": {
        "locale": "en-US",
        "lastSeen": "2019-08-04T23:56:32Z",
        "userVerificationStatus": "VERIFIED"
      },
      "conversation": {
        "conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA",
        "type": "ACTIVE",
        "conversationToken": "[\"list-followup\"]"
      },
      "inputs": [
        {
          "intent": "actions.intent.OPTION",
          "rawInputs": [
            {
              "inputType": "TOUCH",
              "query": "Google Pixel"
            }
          ],
          "arguments": [
            {
              "name": "OPTION",
              "textValue": "SELECTION_KEY_GOOGLE_PIXEL"
            },
            {
              "name": "text",
              "rawText": "Google Pixel",
              "textValue": "Google Pixel"
            }
          ]
        }
      ],
      "surface": {
        "capabilities": [
          {
            "name": "actions.capability.SCREEN_OUTPUT"
          },
          {
            "name": "actions.capability.ACCOUNT_LINKING"
          },
          {
            "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
          },
          {
            "name": "actions.capability.AUDIO_OUTPUT"
          },
          {
            "name": "actions.capability.WEB_BROWSER"
          }
        ]
      },
      "isInSandbox": true,
      "availableSurfaces": [
        {
          "capabilities": [
            {
              "name": "actions.capability.WEB_BROWSER"
            },
            {
              "name": "actions.capability.SCREEN_OUTPUT"
            },
            {
              "name": "actions.capability.AUDIO_OUTPUT"
            }
          ]
        }
      ],
      "requestType": "SIMULATOR"
    }
  },
  "session": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA"
}

JSON

Notez que le code JSON ci-dessous décrit une requête webhook.

{
  "user": {
    "locale": "en-US",
    "lastSeen": "2019-08-06T07:37:53Z",
    "userVerificationStatus": "VERIFIED"
  },
  "conversation": {
    "conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w",
    "type": "NEW"
  },
  "inputs": [
    {
      "intent": "actions.intent.OPTION",
      "rawInputs": [
        {
          "inputType": "TOUCH",
          "query": "Google Home"
        }
      ],
      "arguments": [
        {
          "name": "OPTION",
          "textValue": "SELECTION_KEY_GOOGLE_HOME"
        },
        {
          "name": "text",
          "rawText": "Google Home",
          "textValue": "Google Home"
        }
      ]
    }
  ],
  "surface": {
    "capabilities": [
      {
        "name": "actions.capability.AUDIO_OUTPUT"
      },
      {
        "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
      },
      {
        "name": "actions.capability.ACCOUNT_LINKING"
      },
      {
        "name": "actions.capability.SCREEN_OUTPUT"
      },
      {
        "name": "actions.capability.WEB_BROWSER"
      }
    ]
  },
  "isInSandbox": true,
  "availableSurfaces": [
    {
      "capabilities": [
        {
          "name": "actions.capability.WEB_BROWSER"
        },
        {
          "name": "actions.capability.AUDIO_OUTPUT"
        },
        {
          "name": "actions.capability.SCREEN_OUTPUT"
        }
      ]
    }
  ],
  "requestType": "SIMULATOR"
}
<ph type="x-smartling-placeholder">
</ph>
Figure 3. Exemple de carrousel (smartphone)

Le carrousel défile horizontalement et permet de sélectionner un élément. Comparé au sélecteur de liste, il comporte de grandes tuiles permettant d'enrichir le contenu. Cartes qui composent un carrousel sont semblables à la fiche de base avec image. La sélection d'un du carrousel génère une bulle de chat en tant que réponse, tout comme avec sélecteur de liste.

Propriétés

Le type de réponse "carrousel" est soumis aux exigences suivantes et est facultatif que vous pouvez configurer:

  • Compatible avec les surfaces disposant de la capacité actions.capability.SCREEN_OUTPUT.
  • Carrousel <ph type="x-smartling-placeholder">
      </ph>
    • 10 tuiles maximum.
    • Deux vignettes au minimum.
    • Le texte brut, Markdown n'est pas pris en charge.
  • Vignette de carrousel <ph type="x-smartling-placeholder">
      </ph>
    • Image (facultatif) <ph type="x-smartling-placeholder">
        </ph>
      • L'image doit mesurer 128 dp de hauteur x 232 dp de largeur.
      • Si le format de l'image ne correspond pas au cadre de délimitation de l'image, l'image est centrée avec des barres de chaque côté
      • Si un lien image ne fonctionne pas, une image d'espace réservé est utilisée à la place.
    • Titre (obligatoire) <ph type="x-smartling-placeholder">
        </ph>
      • Identique à la fiche de texte de base
      • Les titres doivent être uniques (pour permettre la sélection de la voix)
    • Description (facultatif) <ph type="x-smartling-placeholder">
        </ph>
      • Mêmes options de mise en forme que la fiche de texte standard
      • Quatre lignes au maximum
      • Le texte brut, Markdown n'est pas pris en charge.
  • Interactions <ph type="x-smartling-placeholder">
      </ph>
    • Balayez l'écran vers la gauche ou vers la droite: faites glisser le carrousel pour afficher les différentes fiches.
    • Appuyer sur la fiche: lorsque vous appuyez sur un élément, une bulle de chat avec le même comme titre de l'élément.
      • Vous devez disposer d'un intent pour la saisie tactile qui gère l'événement actions_intent_OPTION.
    • Voix/Clavier: répondre avec le titre de la fiche (si spécifié) comme sélectionner cet élément.

Conseils

Les carrousels sont bons lorsque diverses options sont présentées à l'utilisateur, mais une aucune comparaison n'est requise entre eux (par rapport aux listes). En général, préférez lists aux carrousels, car les listes sont plus faciles à parcourir visuellement interagissent par commande vocale.

Si vous souhaitez créer un carrousel avec des éléments qui renvoient vers des pages Web, vous vous pouvez créer un carrousel de navigation à la place.

Nous vous recommandons d'ajouter des chips de suggestion sous un carrousel si vous souhaitez continuer la conversation.

Ne répétez jamais les options présentées dans la liste sous forme de chips de suggestion. Chips dans ce contexte est utilisé pour faire pivoter la conversation (et non pour la sélection du choix).

Comme pour les listes, la bulle de chat qui accompagne la fiche de carrousel sous-ensemble de l'audio (TTS/SSML). L'audio (TTS/SSML) ici intègre la première du carrousel, et nous vous déconseillons fortement de lire tous les éléments dans le carrousel. Il est préférable de mentionner le premier élément et la raison pour laquelle il est par exemple (les plus populaires, les plus récemment achetés ou dont nous avons parlé).

<ph type="x-smartling-placeholder">

Exemple de code

Traitement de l'élément sélectionné...

Lorsque les utilisateurs sélectionnent un article, la valeur sélectionnée vous est transmise en tant que . Dans la valeur d'argument, vous obtiendrez l'identifiant key pour élément sélectionné:

Node.js

app.intent('Carousel - OPTION', (conv, params, option) => {
  const SELECTED_ITEM_RESPONSES = {
    'SELECTION_KEY_ONE': 'You selected the first item',
    'SELECTION_KEY_GOOGLE_HOME': 'You selected the Google Home!',
    'SELECTION_KEY_GOOGLE_PIXEL': 'You selected the Google Pixel!',
  };
  conv.ask(SELECTED_ITEM_RESPONSES[option]);
  conv.ask('Which response would you like to see next?');
});
index.js

Java

@ForIntent("Carousel - OPTION")
public ActionResponse carouselSelected(ActionRequest request) {
  ResponseBuilder responseBuilder = getResponseBuilder(request);
  String selectedItem = request.getSelectedOption();
  String response;

  if (selectedItem.equals("SELECTION_KEY_ONE")) {
    response = "You selected the first item";
  } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_HOME")) {
    response = "You selected the Google Home!";
  } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_PIXEL")) {
    response = "You selected the Google Pixel!";
  } else {
    response = "You did not select a valid item";
  }
  return responseBuilder.add(response).add("Which response would you like to see next?").build();
}
MyActionsApp.java

Node.js

app.intent('actions.intent.OPTION', (conv, params, option) => {
  const SELECTED_ITEM_RESPONSES = {
    'SELECTION_KEY_ONE': 'You selected the first item',
    'SELECTION_KEY_GOOGLE_HOME': 'You selected the Google Home!',
    'SELECTION_KEY_GOOGLE_PIXEL': 'You selected the Google Pixel!',
  };
  conv.ask(SELECTED_ITEM_RESPONSES[option]);
  conv.ask('Which response would you like to see next?');
});
index.js

Java

  @ForIntent("actions.intent.OPTION")
  public ActionResponse listSelected(ActionRequest request) {
    ResponseBuilder responseBuilder = getResponseBuilder(request);
    String selectedItem = request.getSelectedOption();
    String response;

    if (selectedItem.equals("SELECTION_KEY_ONE")) {
      response = "You selected the first item";
    } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_HOME")) {
      response = "You selected the Google Home!";
    } else if (selectedItem.equals("SELECTION_KEY_GOOGLE_PIXEL")) {
      response = "You selected the Google Pixel!";
    } else {
      response = "You did not select a valid item";
    }
    return responseBuilder.add(response).add("Which response would you like to see next?").build();
  }

  public ActionResponse carousel(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 carousel example.")
        .add(
            new SelectionCarousel()
                .setItems(
                    Arrays.asList(
                        new CarouselSelectCarouselItem()
                            .setTitle("Title of First List Item")
                            .setDescription("This is a description of a list item.")
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Image alternate text"))
                            .setOptionInfo(
                                new OptionInfo()
                                    .setSynonyms(
                                        Arrays.asList("synonym 1", "synonym 2", "synonym 3"))
                                    .setKey("SELECTION_KEY_ONE")),
                        new CarouselSelectCarouselItem()
                            .setTitle("Google Home")
                            .setDescription(
                                "Google Home is a voice-activated speaker powered by the Google Assistant.")
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Google Home"))
                            .setOptionInfo(
                                new OptionInfo()
                                    .setSynonyms(
                                        Arrays.asList(
                                            "Google Home Assistant",
                                            "Assistant on the Google Home"))
                                    .setKey("SELECTION_KEY_GOOGLE_HOME")),
                        new CarouselSelectCarouselItem()
                            .setTitle("Google Pixel")
                            .setDescription("Pixel. Phone by Google.")
                            .setImage(
                                new Image()
                                    .setUrl(
                                        "https://storage.googleapis.com/actionsresources/logo_assistant_2x_64dp.png")
                                    .setAccessibilityText("Google Pixel"))
                            .setOptionInfo(
                                new OptionInfo()
                                    .setSynonyms(
                                        Arrays.asList("Google Pixel XL", "Pixel", "Pixel XL"))
                                    .setKey("SELECTION_KEY_GOOGLE_PIXEL")))));
    return responseBuilder.build();
  }
}

MyActionsApp.java

JSON

Notez que le code JSON ci-dessous décrit une requête webhook.

{
  "responseId": "fd9c865a-e628-4e89-ae72-14a002361244-21947381",
  "queryResult": {
    "queryText": "actions_intent_OPTION",
    "action": "Carousel.Carousel-custom",
    "parameters": {},
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Webhook failed for intent: Carousel - OPTION",
    "fulfillmentMessages": [
      {
        "text": {
          "text": [
            "Webhook failed for intent: Carousel - OPTION"
          ]
        }
      }
    ],
    "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_touch"
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/carousel-followup",
        "lifespanCount": 1
      },
      {
        "name": "projects/df-responses-kohler/agent/sessions/ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA/contexts/actions_intent_option",
        "parameters": {
          "OPTION": "SELECTION_KEY_ONE",
          "text": "Title of First Carousel Item"
        }
      }
    ],
    "intent": {
      "name": "projects/df-responses-kohler/agent/intents/89289810-95e0-4dfd-a26a-b49a2ac51406",
      "displayName": "Carousel - OPTION"
    },
    "intentDetectionConfidence": 1,
    "languageCode": "en"
  },
  "originalDetectIntentRequest": {
    "source": "google",
    "version": "2",
    "payload": {
      "user": {
        "locale": "en-US",
        "lastSeen": "2019-08-04T23:59:37Z",
        "userVerificationStatus": "VERIFIED"
      },
      "conversation": {
        "conversationId": "ABwppHHsebncupHK11oKhsCTgyH96GRNYH-xpeeMTqb-cvOxbd67QenbRlZM4bGAIB8_KXdTfI7-7lYVKN1ovAhCaA",
        "type": "ACTIVE",
        "conversationToken": "[\"carousel-followup\"]"
      },
      "inputs": [
        {
          "intent": "actions.intent.OPTION",
          "rawInputs": [
            {
              "inputType": "TOUCH",
              "query": "Title of First Carousel Item"
            }
          ],
          "arguments": [
            {
              "name": "OPTION",
              "textValue": "SELECTION_KEY_ONE"
            },
            {
              "name": "text",
              "rawText": "Title of First Carousel Item",
              "textValue": "Title of First Carousel Item"
            }
          ]
        }
      ],
      "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

Notez que le code JSON ci-dessous décrit une requête webhook.

{
  "user": {
    "locale": "en-US",
    "lastSeen": "2019-08-06T07:37:15Z",
    "userVerificationStatus": "VERIFIED"
  },
  "conversation": {
    "conversationId": "ABwppHGcqunXh1M6IE0lu2sVqXdpJfdpC5FWMkMSXQskK1nzb4IkSUSRqQzoEr0Ly0z_G3mwyZlk5rFtd1w",
    "type": "NEW"
  },
  "inputs": [
    {
      "intent": "actions.intent.OPTION",
      "rawInputs": [
        {
          "inputType": "TOUCH",
          "query": "Google Home"
        }
      ],
      "arguments": [
        {
          "name": "OPTION",
          "textValue": "SELECTION_KEY_GOOGLE_HOME"
        },
        {
          "name": "text",
          "rawText": "Google Home",
          "textValue": "Google Home"
        }
      ]
    }
  ],
  "surface": {
    "capabilities": [
      {
        "name": "actions.capability.AUDIO_OUTPUT"
      },
      {
        "name": "actions.capability.MEDIA_RESPONSE_AUDIO"
      },
      {
        "name": "actions.capability.WEB_BROWSER"
      },
      {
        "name": "actions.capability.SCREEN_OUTPUT"
      },
      {
        "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"
}