Continuer la compilation avec le traitement côté client ou côté serveur

Maintenant que vous avez appris les bases, vous pouvez améliorer et personnaliser votre action à l'aide de méthodes propres à Canvas. Vous pouvez choisir de développer votre action avec le modèle de traitement client ou le modèle de traitement côté serveur lorsque vous créez votre projet Actions. Pour en savoir plus sur ces options, consultez la section Activer Interactive Canvas.

Si vous sélectionnez l'option du modèle de traitement client, vous pouvez utiliser les éléments suivants dans votre action:

Si vous sélectionnez l'option de modèle de traitement du serveur, vous pouvez utiliser les éléments suivants dans votre action:

Certaines API Interactive Canvas ne sont pas recommandées pour un modèle de traitement particulier. Le tableau suivant présente les API activées lorsque vous sélectionnez l'option de traitement client, et indique si elles sont recommandées ou déconseillées pour chaque modèle:

Nom de l'API Compatible avec le modèle de traitement du serveur ? Compatible avec le modèle de traitement client ?
sendTextQuery() Oui Compatible, mais non recommandé (consultez sendtextQuery() pour en savoir plus)
outputTts() Oui Oui
triggerScene() Non Oui
createIntentHandler(), expect(), clearExpectations(), prompt() Non Oui
createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot() Non Oui
setHomeParam(), getHomeParam(), setUserParam(), getUserParam() Non Oui

Les sections suivantes expliquent comment implémenter des API pour les modèles de traitement côté client et côté serveur dans votre action Interactive Canvas.

Compiler avec un traitement côté client

Vous pouvez implémenter les API Interactive Canvas suivantes dans la logique de votre application Web:

outputTts()

Cette API vous permet de générer une synthèse vocale depuis un appareil sans envoyer d'invite statique à partir d'Actions Builder ni appeler de webhook. Si aucune logique côté serveur associée à la synthèse vocale n'est requise, vous pouvez utiliser outputTts() côté client pour ignorer un trajet vers votre serveur et fournir une réponse plus rapide à vos utilisateurs.

outputTts() côté client peut interrompre ou annuler la synthèse vocale côté serveur. Pour éviter d'interrompre la synthèse vocale côté serveur, prenez les précautions suivantes:

  • Évitez d'appeler outputTts() au début de la session. Utilisez plutôt la synthèse vocale côté serveur lors du premier tour de conversation de votre action.
  • Évitez d'appeler outputTts() de manière consécutive sans action de l'utilisateur entre les deux.

L'extrait de code suivant montre comment utiliser outputTts() pour générer une synthèse vocale côté client:

interactiveCanvas.outputTts(
      '<speak>This is an example response.</speak>', true);

Vous pouvez également utiliser outputTts() avec onTtsMark() pour placer des repères SSML dans la séquence de texte. L'utilisation de onTtsMark() synchronise l'animation de votre application Web ou l'état de votre jeu à des points spécifiques d'une chaîne de synthèse vocale SSML, comme indiqué dans l'extrait de code suivant:

interactiveCanvas.outputTts(
      '<speak>Speak as <mark name="number" /> number <break time="700ms"/>' +
      '<say-as interpret-as="cardinal">12345</say-as> <break time="300ms"/> ' +
      'Speak as <mark name="digits" /> digits <break time="700ms"/>' +
      '<say-as interpret-as="characters">12345</say-as></speak>', true);

Dans l'exemple précédent, les deux marques qui personnalisent votre réponse sont envoyées à l'application Web avec la synthèse vocale.

Gérer le traitement des intents sur le client

Dans le modèle de traitement de serveur pour Interactive Canvas, tous les intents doivent être gérés par un webhook, ce qui augmente la latence dans votre action. Au lieu d'appeler un webhook, vous pouvez gérer le traitement des intents dans votre application Web.

Pour gérer les intents côté client, vous pouvez utiliser les API suivantes:

  • createIntentHandler(): méthode qui vous permet de définir des gestionnaires d'intent dans le code de votre application Web pour les intents personnalisés définis dans Actions Builder.
  • expect(): méthode qui active/enregistre le gestionnaire d'intents afin qu'un utilisateur puisse mettre en correspondance l'intent.
  • clearExpectations(): méthode qui efface les attentes de tous les intents actuellement activés afin qu'ils ne puissent pas être mis en correspondance, même si un utilisateur prononce un énoncé qui correspond à l'intent.
  • deleteHandler(): méthode qui désactive les gestionnaires d'intents individuels afin que ces intents ne puissent pas être mis en correspondance.

Avec ces API, vous pouvez activer ou désactiver de manière sélective des intents pour différents états de votre action Interactive Canvas. Vous devez utiliser expect() sur les gestionnaires d'intents pour activer ces intents.

Activer les gestionnaires d'intents

L'activation d'un gestionnaire d'intents est un processus en deux étapes. Tout d'abord, vous devez définir l'intent dans Actions Builder. Ensuite, pour que l'intent puisse être mis en correspondance, vous devez appeler expect() sur le gestionnaire d'intents.

Pour configurer et activer un gestionnaire d'intent côté client, procédez comme suit:

  1. Ouvrez votre projet dans la console Actions et ajoutez un intent personnalisé.
  2. Sélectionnez Oui pour S'agit-il d'un intent global ?.

  3. Configurez votre intent, puis cliquez sur Save (Enregistrer).

  4. Définissez le gestionnaire de l'intent dans la logique de votre application Web, comme indiqué dans l'extrait de code suivant:

    /**
    * Define handler for intent.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    
    /**
    * Define handler for intent with an argument.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        const numberOfPeople = matchedIntent.getIntentArg('numberOfPeople');
        console.log(`Intent match handler to reserve a table for ${number of people} was triggered!`);
      });
    
  5. Appelez la méthode expect() pour enregistrer le gestionnaire d'intent, comme indiqué dans l'extrait de code suivant:

    /**
    * Define handler for intent and expect() it.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    var handler = interactiveCanvas.expect(bookTableIntent);
    

Désactiver les gestionnaires d'intents

Après avoir défini un gestionnaire d'intents, vous pouvez l'activer ou le désactiver selon les besoins de votre action. Lorsque vous appelez expect() pour activer un intent, il renvoie un objet avec une méthode deleteHandler() que vous pouvez utiliser pour désactiver le gestionnaire nouvellement créé. La définition du gestionnaire d'intents persiste même si l'intent n'est pas actif. Vous pouvez donc le réactiver si nécessaire.

Pour désactiver un gestionnaire d'intents, appelez deleteHandler() sur le gestionnaire d'intents, comme indiqué dans l'extrait de code suivant:

    /**
    * Define handler for intent and expect() it.
    */
    const bookTableIntent = interactiveCanvas.createIntentHandler('reserveTable',
      matchedIntent => {
        console.log("Intent match handler to reserve a table was triggered!");
      });
    var handler = interactiveCanvas.expect(bookTableIntent);
    
    // Delete the handler for `bookTableIntent`.
    handler.deleteHandler();
    

Vous pouvez appeler expect() pour ajouter à nouveau un gestionnaire d'intent désactivé, comme indiqué dans l'extrait suivant:

    // Re-add the `bookTableIntent` handler.
    handler = interactiveCanvas.expect(bookTableIntent);

Pour désactiver des intents de manière groupée, vous pouvez utiliser la méthode clearExpectations(), qui désactive tous les intents actuellement activés. L'extrait de code suivant montre comment effacer les attentes de tous les gestionnaires d'intents:

interactiveCanvas.clearExpectations();

Gérer le remplissage des emplacements sur le client

Au lieu d'ajouter le remplissage d'emplacements à une scène dans Actions Builder, vous pouvez gérer le remplissage d'emplacements directement dans votre application Web.

Pour gérer le remplissage d'emplacements côté client, vous devez d'abord créer un emplacement à l'aide de l'une des API suivantes:

  • createNumberSlot(callback, hints): méthode qui vous permet de définir un emplacement numérique dans le code de votre application Web. Utilisé pour inviter l'utilisateur à fournir un numéro.
  • createTextSlot(callback, hints): méthode qui vous permet de définir un emplacement de texte dans le code de votre application Web. Utilisé pour inviter l'utilisateur à saisir un mot.
  • createConfirmationSlot(callback, hints): méthode qui vous permet de définir un emplacement de confirmation dans le code de votre application Web. Utilisé pour inviter l'utilisateur à confirmer (oui/non).
  • createOptionsSlot(options, callback, hints): méthode qui vous permet de définir un emplacement d'options dans le code de votre application Web. Permet d'inviter l'utilisateur à faire son choix dans une liste d'options prédéfinies.

Lorsque vous créez un emplacement, vous pouvez éventuellement définir des triggerHints, qui sont des mots clés qui améliorent le système de compréhension du langage naturel (NLU) pour votre action. Ces mots clés doivent être des termes courts que l'utilisateur est susceptible de prononcer lorsqu'il remplit un emplacement. Par exemple, le mot clé triggerHints d'un emplacement numérique peut être years. Lorsqu'un utilisateur répond à une question sur son âge dans la conversation avec la réponse "J'ai trente ans", votre action est plus susceptible de reconnaître que l'utilisateur remplit l'espace de manière appropriée.

Après avoir créé un emplacement, vous pouvez demander un emplacement à l'utilisateur à l'aide de l'API prompt:

  • prompt(tts, slot): méthode qui envoie une synthèse vocale à l'utilisateur, lui indiquant qu'un créneau doit être rempli.

L'appel de prompt() renvoie une promesse avec l'état et la valeur de l'emplacement rempli.

Créer un emplacement numérique

Un emplacement numérique vous permet de demander à un utilisateur un numéro pendant la conversation. Pour en savoir plus sur le remplissage d'emplacements, consultez la section Remplissage d'emplacements de la documentation d'Actions Builder.

Pour inviter l'utilisateur à remplir un emplacement numérique côté client, procédez comme suit:

  1. Appelez la méthode createNumberSlot() pour créer un emplacement numérique dans la logique de votre application Web:

    /**
     * Create number slot.
     */
    const triggerHints = { associatedWords: ['guess number', 'number'] };
    const slot = interactiveCanvas.createNumberSlot(
      number => {
        console.log(`Number guessed: ${number}.`);
      }, triggerHints);
    
    
  2. Appelez la méthode prompt() pour inviter l'utilisateur à accéder à l'emplacement et gérer la valeur de l'emplacement de la promesse renvoyée, comme indiqué dans l'extrait de code suivant:

    const promptPromise = interactiveCanvas.prompt(
      { text: 'What number am I thinking of between 1 and 10?' }, slot);
    
    promptPromise.then(
      answer => {
        if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
          // answer === {value: 5, status: ANSWERED}
          // Do something with answer.value
        } else {
          console.error('Promise returned unsuccessful status ' + answer.status);
        }
      });
    

Créer un emplacement de texte

Un emplacement de texte vous permet de demander à un utilisateur un mot pendant la conversation. Pour en savoir plus sur le remplissage d'emplacements, consultez la section Remplissage d'emplacements de la documentation d'Actions Builder.

Pour inviter l'utilisateur à remplir un espace de texte côté client, procédez comme suit:

  1. Appelez la méthode createTextSlot() pour créer un emplacement de texte dans la logique de votre application Web:

    /**
     * Create text slot.
     */
    const triggerHints = { associatedWords: ['favorite color', 'color'] };
    const slot = interactiveCanvas.createTextSlot(
      text => {
        console.log(`Favorite color: ${text}.`);
      }, triggerHints);
    
    
  2. Appelez la méthode prompt() pour inviter l'utilisateur à accéder à l'emplacement et gérer la valeur de l'emplacement de la promesse renvoyée, comme indiqué dans l'extrait de code suivant:

    const promptPromise = interactiveCanvas.prompt(
      { text: 'What is your favorite color?' }, slot);
    
    promptPromise.then(
      answer => {
        if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
          // answer === {value: "red", status: ANSWERED}
          // Do something with answer.value
        } else {
          console.error('Promise returned unsuccessful status ' + answer.status);
        }
      });
    

Créer un créneau de confirmation

Un emplacement de confirmation vous permet de demander une confirmation à un utilisateur (l'utilisateur peut répondre "Oui" ou "Non" pour remplir l'emplacement). Pour en savoir plus sur le remplissage d'emplacements, consultez la section Remplissage d'emplacements de la documentation d'Actions Builder.

Pour inviter l'utilisateur à remplir un emplacement de confirmation côté client, procédez comme suit:

  1. Appelez la méthode createConfirmationSlot() pour créer un emplacement de confirmation dans la logique de votre application Web:

    /**
     * Create confirmation slot (boolean).
     */
    const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
    const slot = interactiveCanvas.createConfirmationSlot(
      yesOrNo => {
        console.log(`Confirmation: ${yesOrNo}`);
      }, triggerHints);
    
    
  2. Appelez la méthode prompt() pour inviter l'utilisateur à accéder à l'emplacement et gérer la valeur de l'emplacement de la promesse renvoyée, comme indiqué dans l'extrait de code suivant:

    const promptPromise = interactiveCanvas.prompt(
      { text: 'Do you agree to the Terms of Service?' }, slot);
    
    promptPromise.then(
      answer => {
        if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
          // answer === {value: true, status: ANSWERED}
          // Do something with answer.value
        } else {
          console.error('Promise returned unsuccessful status ' + answer.status);
        }
      });
    

Créer un emplacement d'options

Un emplacement d'options vous permet d'inviter l'utilisateur à faire son choix dans une liste d'options prédéfinies. Pour en savoir plus sur le remplissage d'emplacements, consultez la section Remplissage d'emplacements de la documentation d'Actions Builder.

Pour inviter l'utilisateur à remplir un emplacement d'options côté client, procédez comme suit:

  1. Appelez la méthode createOptionsSlot() pour créer un emplacement d'options dans la logique de votre application Web:

    /**
     * Create options slot (list selection).
     */
    const triggerHints = { associatedWords: ['select fruit', 'choose fruit'] };
    // Define selectable options
    const options = [{
      key: 'apple',
      synonyms: ['apple', 'large apple', 'gala apple'],
    }, {
      key: 'banana',
      synonyms: ['banana', 'green banana', 'plantain'],
    }];
    const slot = interactiveCanvas.createOptionsSlot(
      options,
      selectedOption => {
        console.log(`You have selected ${selectedOption} as your fruit.`);
      }, triggerHints);
    
    
  2. Appelez la méthode prompt() pour inviter l'utilisateur à accéder à l'emplacement et gérer la valeur de l'emplacement de la promesse renvoyée, comme indiqué dans l'extrait de code suivant:

    const promptPromise = interactiveCanvas.prompt(
      { text: 'Would you like a banana or an apple?' }, slot);
    
    promptPromise.then(
      answer => {
        if (answer.status == interactiveCanvas.AnswerStatus.ANSWERED) {
          // answer === {value: 'apple', status: ANSWERED}
          // Do something with answer.value
        } else {
          console.error('Promise returned unsuccessful status ' + answer.status);
        }
      });
    

triggerScene()

L'API triggerScene() vous permet de passer à une autre scène de votre action interactive Canvas à partir de votre traitement côté client. triggerScene() vous permet également de passer du traitement côté client au traitement côté serveur lorsque l'utilisateur doit accéder à une scène système dans Actions Builder nécessitant un webhook. Par exemple, vous pouvez appeler triggerScene() lorsqu'un utilisateur doit associer son compte ou recevoir des notifications. Vous pouvez ensuite revenir de cette scène au traitement côté client avec une invite Canvas.

L'extrait de code suivant montre comment implémenter triggerScene() dans votre action:

interactiveCanvas.triggerScene('SceneName').then((status) => {
  console.log("sent the request to trigger scene.");
}).catch(e => {
  console.log("Failed to trigger a scene.");
})

Espace de stockage personnel et utilisateur sur le client

Au lieu d'utiliser un webhook pour obtenir et définir les valeurs de stockage personnel et utilisateur, vous pouvez appeler des API côté client pour gérer le stockage personnel et utilisateur dans votre application Web. Votre application Web peut ensuite utiliser ces valeurs stockées sur plusieurs sessions (par exemple, dans des invites et des conditions), et accéder aux valeurs d'un foyer ou d'un utilisateur spécifique si nécessaire. L'utilisation de ces API peut réduire la latence de votre action Interactive Canvas, car vous n'avez plus besoin d'appeler un webhook pour obtenir et définir les valeurs de stockage.

Le stockage personnel et utilisateur dans l'application Web suit les mêmes principes généraux que le stockage dans le webhook. Pour en savoir plus sur le stockage personnel et utilisateur, consultez la documentation sur l'espace de stockage personnel et l'espace de stockage utilisateur.

Espace de stockage personnel côté client

Le stockage de la maison vous permet de stocker des valeurs pour les utilisateurs du foyer en fonction du graphique de la maison. Il est partagé entre toutes les sessions du foyer. Par exemple, si un utilisateur joue à un jeu Interactive Canvas dans un foyer, le score du jeu peut être stocké dans un espace de stockage à la maison, et les autres membres du foyer peuvent continuer à jouer avec le score stocké.

Pour autoriser votre action à stocker des données personnelles, procédez comme suit:

  1. Dans la console Actions, accédez à Déployer > Informations sur l'annuaire > Informations supplémentaires.
  2. Cochez la case Oui pour Vos actions utilisent-elles de l'espace de stockage chez vous ?.

Pour écrire une valeur dans l'espace de stockage de la maison dans votre application Web, appelez la méthode setHomeParam(), comme indiqué dans l'extrait suivant:

interactiveCanvas.setHomeParam('familySize',  10).then(
      result => {
        console.log('Set home param success');
      },
      fail => {
        console.error(err);
      });

Pour lire une valeur de l'espace de stockage personnel dans votre application Web, appelez la méthode getHomeParam(), comme indiqué dans l'extrait suivant:

interactiveCanvas.getHomeParam('familySize').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

Pour effacer tout l'espace de stockage existant de la maison, appelez la méthode resetHomeParam(), comme indiqué dans l'extrait suivant:

interactiveCanvas.resetHomeParam();

Stockage utilisateur côté client

Le stockage utilisateur vous permet de stocker les valeurs des paramètres d'un utilisateur validé spécifique sur plusieurs sessions. Par exemple, si un utilisateur joue à un jeu, son score peut être stocké. Dans une session de jeu ultérieure, l'utilisateur peut continuer à jouer avec le même score.

Pour écrire une valeur dans l'espace de stockage utilisateur de votre application Web, appelez la méthode setUserParam(), comme indiqué dans l'extrait de code suivant:

interactiveCanvas.setUserParam('color',  'blue').then(
      result => {
        console.log('Set user param success');
      },
      err => {
        console.error(err);
      });

Pour lire une valeur de l'espace de stockage utilisateur dans votre application Web, appelez la méthode getUserParam(), comme indiqué dans l'extrait de code suivant:

interactiveCanvas.getUserParam('color').then(
      value => {
        console.log(JSON.stringify(result));
      },
      err => {
        console.error(err);
      }
  );

Pour effacer tout l'espace de stockage utilisateur existant, appelez la méthode resetUserParam(), comme indiqué dans l'extrait de code suivant:

interactiveCanvas.resetUserParam();

setCanvasState()

La méthode setCanvasState() vous permet d'envoyer des données d'état de votre application Web Interactive Canvas à votre traitement et informe l'Assistant que l'application Web a mis à jour son état. L'application Web envoie son état mis à jour en tant qu'objet JSON.

Appeler setCanvasState() n'appelle pas d'intent. Après avoir appelé setCanvasState(), si sendTextQuery() est appelé ou si la requête utilisateur correspond à un intent dans la conversation, les données définies avec setCanvasState() lors du tour de conversation précédent sont disponibles lors des cycles de conversation suivants.

Dans l'extrait de code suivant, l'application Web utilise setCanvasState() pour définir les données d'état de Canvas:

JavaScript

this.action.canvas.setCanvasState({ score: 150 })
    

Référencer l'état du canevas à partir d'un webhook

Vous pouvez référencer des valeurs d'état Canvas stockées dans votre code de traitement. Pour référencer la valeur, utilisez la syntaxe conv.context.canvas.state.KEY, où KEY est la clé fournie lorsque la valeur d'état du canevas a été définie.

Par exemple, si vous avez déjà stocké une valeur de score élevé pour un jeu dans l'état de Canvas en tant que paramètre score, référencez cette valeur à l'aide de conv.context.canvas.state.score pour accéder à cette valeur dans le traitement:

Node.js

app.handle('webhook-name', conv => {
    console.log(conv.context.canvas.state.score);
})
    

Référencer l'état de Canvas dans les requêtes

Vous pouvez référencer des valeurs d'état Canvas stockées dans une requête. Pour référencer la valeur, utilisez la syntaxe $canvas.state.KEY, où KEY est la clé fournie lorsque la valeur d'état du canevas a été définie.

Par exemple, si vous avez déjà stocké une valeur de score élevé pour un jeu dans l'état de Canvas en tant que paramètre score, référencez cette valeur à l'aide de $canvas.state.score pour accéder à cette valeur dans une invite:

JSON

{
  "candidates": [{
    "first_simple": {
      "variants": [{
        "speech": "Your high score is $canvas.state.score."
      }]
    }
  }]
}
    

Référencer l'état du canevas dans les conditions

Vous pouvez également référencer des valeurs d'état Canvas stockées dans des conditions. Pour référencer cette valeur, utilisez la syntaxe canvas.state.KEY, où KEY est la clé fournie lorsque la valeur d'état de Canvas a été définie.

Par exemple, si vous avez précédemment stocké une valeur de score élevé pour un jeu dans l'état de Canvas en tant que paramètre score et que vous souhaitez la comparer à la valeur 999 dans une condition, vous pouvez référencer la valeur stockée dans votre condition à l'aide de canvas.state.score. Votre expression de condition se présente comme suit:

Syntaxe de la condition

canvas.state.score >= 999
    

sendTextQuery()

La méthode sendTextQuery() envoie des requêtes textuelles à l'action conversationnelle pour mettre en correspondance un intent de manière programmatique. Cet exemple utilise sendTextQuery() pour redémarrer le jeu de rotation lorsque l'utilisateur clique sur un bouton. Lorsque l'utilisateur clique sur le bouton "Redémarrer le jeu", sendTextQuery() envoie une requête textuelle qui correspond à l'intent Restart game et renvoie une promesse. Cette promesse génère SUCCESS si l'intent est déclenché et BLOCKED dans le cas contraire. L'extrait de code suivant correspond à l'intent et gère les cas de réussite et d'échec de la promesse:

JavaScript

…
/**
* Handle game restarts
*/
async handleRestartGame() {
    console.log(`Request in flight`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
    const res = await this.action.canvas.sendTextQuery('Restart game');
    if (res.toUpperCase() !== 'SUCCESS') {
        console.log(`Request in flight: ${res}`);
        return;
    }
    console.log(`Request in flight: ${res}`);
    this.button.texture = this.button.textureButtonDisabled;
    this.sprite.spin = false;
}
…
    

Si la promesse aboutit à SUCCESS, le gestionnaire de webhook Restart game envoie une réponse Canvas à votre application Web:

JavaScript

…
app.handle('restart', conv => {
  conv.add(new Canvas({
    data: {
      command: 'RESTART_GAME'
    }
  }));
});
…
    

Cette réponse Canvas déclenche le rappel onUpdate(), qui exécute le code dans l'extrait de code RESTART_GAME ci-dessous:

JavaScript

…
RESTART_GAME: (data) => {
    this.scene.button.texture = this.scene.button.textureButton;
    this.scene.sprite.spin = true;
    this.scene.sprite.tint = 0x00FF00; // green
    this.scene.sprite.rotation = 0;
},
…
    

Compiler avec un traitement côté serveur

Vous pouvez implémenter les API Interactive Canvas suivantes dans votre webhook:

Activer le mode plein écran

Par défaut, les applications Web d'Interactive Canvas incluent un en-tête en haut de l'écran avec le nom de votre action. Vous pouvez utiliser enableFullScreen pour supprimer l'en-tête et le remplacer par un toast temporaire qui apparaît dans l'écran de chargement, ce qui permet à l'utilisateur d'interagir avec votre action en plein écran. Le toast affiche le nom à afficher de l'action, le nom du développeur et les instructions pour quitter l'action. La couleur du toast change en fonction de ce que l'utilisateur sélectionne comme thème sur son appareil.

Figure 1 : Toast s'affiche sur l'écran de chargement pour une action.

Si un utilisateur interagit fréquemment avec votre action, le toast cesse temporairement d'apparaître sur l'écran de chargement. Si l'utilisateur n'interagit pas avec votre action pendant un certain temps, le toast réapparaît lorsqu'il lance l'action.

Vous pouvez activer le mode plein écran dans votre webhook ou dans une invite statique dans Actions Builder.

Pour activer le mode plein écran dans votre webhook, procédez comme suit:

  1. Définissez le champ enableFullScreen sur true dans la première réponse canvas renvoyée par le webhook d'une session. L'extrait de code suivant est un exemple de mise en œuvre utilisant la bibliothèque cliente Node.js:

     const { conversation, Canvas } = require('@assistant/conversation');
     const functions = require('firebase-functions');
    
     const app = conversation();
    
     app.handle('invocation_fullscreen', conv => {
       conv.add(new Canvas(
         {
           url: 'https://example-url.com',
           enableFullScreen: true
         }));
     });
    
     exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);
    

Pour activer le mode plein écran dans une invite statique dans Actions Builder, procédez comme suit:

  1. Ouvrez votre projet dans la console Actions.
  2. Cliquez sur Develop (Développer) dans la barre de navigation, puis ouvrez l'invite qui inclut la première réponse canvas.
  3. Définissez enable_full_screen sur true, comme indiqué dans l'extrait de code suivant:

     {
      "candidates": [
        {
          "canvas": {
            "url": "https://example-url.com",
            "enable_full_screen": true
          }
        }
      ]
    }
    

continueTtsDuringTouch

Par défaut, lorsqu'un utilisateur appuie sur l'écran lors d'une action Interactive Canvas, la synthèse vocale arrête la lecture. Vous pouvez activer la synthèse vocale pour continuer à jouer lorsque les utilisateurs appuient sur l'écran avec continueTtsDuringTouch. Ce comportement ne peut pas être activé et désactivé au cours de la même session.

Vous pouvez implémenter ce comportement dans votre webhook ou dans une invite statique dans Actions Builder.

Pour que la synthèse vocale continue une fois que l'utilisateur a appuyé sur l'écran dans votre webhook, procédez comme suit:

  • Définissez le champ continueTtsDuringTouch sur true dans la première réponse canvas renvoyée par le webhook d'une session. L'extrait de code suivant est un exemple de mise en œuvre utilisant la bibliothèque cliente Node.js:

    const { conversation, Canvas } = require('@assisant/conversation');
    const functions = require('firebase-functions');
    
    const app = conversation();
    
    app.handle('intent-name', conv => {
      conv.add(new Canvas(
        {
          url: 'https://example-url.com',
          continueTtsDuringTouch: true
        }));
    });
    
    exports.ActionsOnGoogleFulfillment = functions.https.onRequest(app);
    

Pour que la synthèse vocale continue après que l'utilisateur appuie sur l'écran dans une invite statique dans Actions Builder, procédez comme suit:

  1. Ouvrez votre projet dans la console Actions.
  2. Cliquez sur Develop (Développer) dans la barre de navigation et ouvrez l'invite, qui inclut la première réponse canvas.
  3. Définissez continue_tts_during_touch sur true, comme indiqué dans l'extrait de code suivant:

      {
       "candidates": [
         {
           "canvas": {
             "url": "https://example-url.com",
             "continue_tts_during_touch": true
           }
         }
       ]
     }