Continúa creando con la entrega a través del cliente o del servidor

Ahora que aprendiste los conceptos básicos, puedes mejorar y personalizar tu acción con métodos específicos de Canvas. Puedes elegir desarrollar tu acción con el modelo de entrega del cliente o el modelo de entrega del servidor cuando creas el proyecto de Acciones. Para obtener más información sobre estas opciones, consulta Cómo habilitar Interactive Canvas.

Si seleccionas la opción de modelo de entrega del cliente, puedes usar lo siguiente en tu Acción:

Si seleccionas la opción del modelo de entrega del servidor, puedes usar lo siguiente en tu Acción:

No se recomienda usar algunas APIs de Interactive Canvas con un modelo de entrega en particular. En la siguiente tabla, se muestran las APIs habilitadas cuando seleccionas la opción de entrega del cliente y si estas APIs se recomiendan o no para cada modelo:

Nombre de la API ¿Se admite en el modelo de entrega de servidores? ¿Se admite en el modelo de entrega de clientes?
sendTextQuery() Compatible, pero no recomendado (consulta sendtextQuery() para obtener más información)
outputTts()
triggerScene() No
createIntentHandler(), expect(), clearExpectations(), prompt() No
createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot() No
setHomeParam(), getHomeParam(), setUserParam(), getUserParam() No

En las siguientes secciones, se explica cómo implementar APIs para los modelos de entrega del cliente y del servidor en tu acción de Interactive Canvas.

Cómo compilar con entrega del cliente

Puedes implementar las siguientes APIs de Interactive Canvas en la lógica de tu app web:

outputTts()

Esta API te permite generar texto a voz (TTS) desde un dispositivo sin enviar una instrucción estática desde Actions Builder ni invocar un webhook. Si no se requiere una lógica del servidor asociada con el TTS, puedes usar outputTts() del cliente para omitir un viaje a tu servidor y proporcionar una respuesta más rápida a tus usuarios.

La función outputTts() del cliente puede interrumpir o cancelar la función de TTS del servidor. Para evitar que se interrumpa el TTS del servidor, toma las siguientes precauciones:

  • Evita llamar a outputTts() al comienzo de la sesión. En su lugar, usa TTS del servidor en el primer turno de conversación de tu acción.
  • Evita llamar a outputTts() de forma consecutiva sin una acción del usuario intermedia.

En el siguiente fragmento, se muestra cómo usar outputTts() para generar TTS del lado del cliente:

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

También puedes usar outputTts() con onTtsMark() para colocar marcadores de SSML en la secuencia de texto. Si usas onTtsMark(), se sincroniza la animación de tu app web o el estado del juego en puntos específicos de una cadena de TTS de SSML, como se muestra en el siguiente fragmento:

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);

En el ejemplo anterior, las dos marcas que personalizan tu respuesta se envían a la app web con el TTS.

Cómo controlar la entrega de intents en el cliente

En el modelo de entrega del servidor de Interactive Canvas, todos los intents deben controlarse mediante un webhook, lo que aumenta la latencia en la acción. En lugar de llamar a un webhook, puedes controlar la entrega de intents dentro de tu app web.

Para controlar intents del lado del cliente, puedes usar las siguientes APIs:

  • createIntentHandler(): Es un método que te permite definir controladores de intents en el código de tu app web para intents personalizados definidos en Actions Builder.
  • expect(): Es un método que activa o registra el controlador del intent para que un usuario pueda establecer una coincidencia con él.
  • clearExpectations(): Es un método que borra las expectativas de todos los intents activados actualmente para que no se puedan encontrar coincidencias, incluso si un usuario dice una declaración que coincide con el intent.
  • deleteHandler(): Es un método que inhabilita los controladores de intents individuales para que no se puedan detectar coincidencias con esos intents.

Con estas APIs, puedes activar o inhabilitar de manera selectiva intents para diferentes estados de tu acción de Interactive Canvas. Debes usar expect() en los controladores de intents para activarlos.

Cómo activar los controladores de intents

La activación de un controlador de intents es un proceso que consta de dos pasos. Primero, debes definir el intent en Actions Builder. A continuación, para que el intent coincida, debes llamar a expect() en el controlador del intent.

Para configurar y activar un controlador de intents del cliente, sigue estos pasos:

  1. Abre tu proyecto en la Consola de Actions y agrega un intent personalizado.
  2. Selecciona Yes en Is this a global intent? (¿Es un intent global?)

  3. Configura tu intent y haz clic en Guardar.

  4. Define el controlador del intent en la lógica de tu app web, como se muestra en el siguiente fragmento:

    /**
    * 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. Llama al método expect() para registrar el controlador de intents, como se muestra en el siguiente fragmento:

    /**
    * 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);
    

Inhabilita los controladores de intents

Después de definir un controlador de intents, puedes activar o desactivar el intent según sea necesario para tu acción. Cuando llamas a expect() para activar un intent, muestra un objeto con un método deleteHandler(), que puedes usar para inhabilitar el controlador recién creado. La definición del controlador de intents persiste incluso si el intent no está activo, por lo que puedes volver a activarlo cuando sea necesario.

Para inhabilitar un controlador de intents, llama a deleteHandler() en él, como se muestra en el siguiente fragmento:

    /**
    * 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();
    

Puedes llamar a expect() para volver a agregar un controlador de intents inhabilitado, como se muestra en el siguiente fragmento:

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

Para inhabilitar intents de forma masiva, puedes usar el método clearExpectations(), que inhabilita todos los intents que estén activados actualmente. En el siguiente fragmento, se muestra cómo borrar las expectativas para todos los controladores de intents:

interactiveCanvas.clearExpectations();

Controla el relleno de ranuras en el cliente

En lugar de agregar el relleno de espacios a una escena dentro de Actions Builder, puedes controlar el relleno de espacios directamente en tu app web.

Para controlar el relleno de ranuras del lado del cliente, primero debes crear una ranura mediante una de las siguientes APIs:

  • createNumberSlot(callback, hints): Es un método que te permite definir un espacio numérico en el código de la app web. Se usa para solicitar un número al usuario.
  • createTextSlot(callback, hints): Es un método que te permite definir una ranura de texto en el código de tu app web. Se usa para pedirle una palabra al usuario.
  • createConfirmationSlot(callback, hints): Es un método que te permite definir un espacio de confirmación en el código de la app web. Se usa para solicitar la confirmación del usuario (sí/no).
  • createOptionsSlot(options, callback, hints): Es un método que te permite definir un espacio de opciones en el código de la app web. Se usa para solicitarle al usuario que seleccione una opción de una lista de opciones predefinidas.

Cuando creas un espacio, tienes la opción de definir triggerHints, que son palabras clave que mejoran el sistema de comprensión del lenguaje natural (CLN) para tu acción. Estas palabras clave deben ser palabras cortas que el usuario pueda decir al llenar un espacio. Por ejemplo, la palabra clave triggerHints para un espacio numérico podría ser years. Cuando un usuario responde a una pregunta sobre su edad en la conversación con la respuesta "Tengo treinta años", es más probable que tu acción reconozca que el usuario está ocupando el espacio adecuadamente.

Después de crear un espacio, puedes solicitarle al usuario que lo cree con la API de prompt:

  • prompt(tts, slot): Es un método que muestra la función de TTS al usuario y le solicita que se complete un espacio esperado.

Si llamas a prompt(), se muestra una promesa con el estado y el valor del espacio completado.

Crear espacio numérico

Una ranura numérica te permite solicitarle un número a un usuario durante la conversación. Para obtener más información sobre el relleno de ranuras, consulta la sección Relleno de ranuras de la documentación de Actions Builder.

Para pedirle al usuario que rellene un espacio numérico del cliente, sigue estos pasos:

  1. Llama al método createNumberSlot() para crear un espacio numérico en la lógica de tu app web:

    /**
     * Create number slot.
     */
    const triggerHints = { associatedWords: ['guess number', 'number'] };
    const slot = interactiveCanvas.createNumberSlot(
      number => {
        console.log(`Number guessed: ${number}.`);
      }, triggerHints);
    
    
  2. Llama al método prompt() para solicitar el espacio al usuario y controla el valor de esta de la promesa que se muestra, como se indica en el siguiente fragmento:

    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);
        }
      });
    

Crear espacio de texto

Un espacio de texto te permite pedirle una palabra a un usuario durante la conversación. Para obtener más información sobre el relleno de ranuras, consulta la sección Relleno de ranuras de la documentación de Actions Builder.

Para pedirle al usuario que rellene un espacio de texto del cliente, sigue estos pasos:

  1. Llama al método createTextSlot() para crear un espacio de texto en la lógica de tu app web:

    /**
     * Create text slot.
     */
    const triggerHints = { associatedWords: ['favorite color', 'color'] };
    const slot = interactiveCanvas.createTextSlot(
      text => {
        console.log(`Favorite color: ${text}.`);
      }, triggerHints);
    
    
  2. Llama al método prompt() para solicitar el espacio al usuario y controla el valor de esta de la promesa que se muestra, como se indica en el siguiente fragmento:

    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);
        }
      });
    

Crear horario disponible de confirmación

Un espacio de confirmación te permite solicitarle a un usuario que confirme (este usuario puede responder "Sí" o "No" para llenar el espacio). Para obtener más información sobre el relleno de ranuras, consulta la sección Relleno de ranuras de la documentación de Actions Builder.

Para pedirle al usuario que rellene un espacio de confirmación del cliente, sigue estos pasos:

  1. Llama al método createConfirmationSlot() para crear un espacio de confirmación en la lógica de la app web:

    /**
     * Create confirmation slot (boolean).
     */
    const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
    const slot = interactiveCanvas.createConfirmationSlot(
      yesOrNo => {
        console.log(`Confirmation: ${yesOrNo}`);
      }, triggerHints);
    
    
  2. Llama al método prompt() para solicitar el espacio al usuario y controla el valor de esta de la promesa que se muestra, como se indica en el siguiente fragmento:

    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);
        }
      });
    

Crear espacio de opciones

Un espacio de opciones te permite pedirle al usuario que seleccione de una lista de opciones predefinidas. Para obtener más información sobre el relleno de ranuras, consulta la sección Relleno de ranuras de la documentación de Actions Builder.

Para pedirle al usuario que rellene un espacio de opciones del cliente, sigue estos pasos:

  1. Llama al método createOptionsSlot() para crear un espacio de opciones en la lógica de tu app 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. Llama al método prompt() para solicitar el espacio al usuario y controla el valor de esta de la promesa que se muestra, como se indica en el siguiente fragmento:

    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()

La API de triggerScene() te permite hacer la transición a otra escena de tu acción interactiva de Canvas desde la entrega del cliente. Con triggerScene(), también puedes cambiar de la entrega del cliente a la del servidor cuando el usuario necesita acceder a una escena del sistema en Actions Builder que requiera un webhook. Por ejemplo, puedes llamar a triggerScene() cuando un usuario necesite vincular su cuenta o recibir notificaciones. Luego, puedes regresar de esa escena a la entrega del cliente con un mensaje Canvas.

En el siguiente fragmento, se muestra cómo implementar triggerScene() en tu acción:

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

Almacenamiento en la casa y del usuario en el cliente

En lugar de usar un webhook para obtener y establecer los valores de almacenamiento de la página principal y del usuario, puedes llamar a las APIs del cliente para controlar el almacenamiento de la casa y del usuario en tu app web. La app web puede usar estos valores almacenados en varias sesiones (por ejemplo, en mensajes y condiciones) y puede acceder a valores para un grupo familiar o usuario específicos cuando sea necesario. El uso de estas APIs puede reducir la latencia en tu acción de Interactive Canvas porque ya no necesitas llamar a un webhook para obtener y configurar valores de almacenamiento.

El almacenamiento principal y del usuario en la app web sigue los mismos principios generales que el almacenamiento en el webhook. Para obtener más información sobre el almacenamiento de usuarios y de la casa, consulta la documentación sobre el almacenamiento de la casa y el almacenamiento de usuario.

Almacenamiento del cliente en la casa

El almacenamiento de la casa te permite almacenar valores de usuarios del grupo familiar según el gráfico de inicio y se comparte entre todas las sesiones del grupo familiar. Por ejemplo, si un usuario juega un juego de Interactive Canvas en una familia, la puntuación del juego se puede almacenar en el almacenamiento de la casa, y otros miembros de la familia pueden seguir jugando con la puntuación almacenada.

Para habilitar tu acción y admitir el almacenamiento de la casa, sigue estos pasos:

  1. En la Consola de Actions, navega a Deploy > Directory information > Additional Information.
  2. Marca la casilla en la opción ¿Tus acciones usan el almacenamiento en casa?

Para escribir un valor en el almacenamiento de la casa de tu app web, llama al método setHomeParam(), como se muestra en el siguiente fragmento:

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

Para leer un valor del almacenamiento de la casa en tu app web, llama al método getHomeParam(), como se muestra en el siguiente fragmento:

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

Para borrar todo el almacenamiento de la casa existente, llama al método resetHomeParam(), como se muestra en el siguiente fragmento:

interactiveCanvas.resetHomeParam();

Almacenamiento del usuario del cliente

El almacenamiento del usuario te permite almacenar valores de parámetros para un usuario específico verificado en varias sesiones. Por ejemplo, si un usuario está jugando, la puntuación del juego se puede almacenar para ese usuario. En una sesión de juego posterior, el usuario puede seguir jugando con la misma puntuación.

Para escribir un valor en el almacenamiento del usuario en tu app web, llama al método setUserParam(), como se muestra en el siguiente fragmento:

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

Para leer un valor del almacenamiento del usuario en tu app web, llama al método getUserParam(), como se muestra en el siguiente fragmento:

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

Para borrar todo el almacenamiento del usuario existente, llama al método resetUserParam(), como se muestra en el siguiente fragmento:

interactiveCanvas.resetUserParam();

setCanvasState()

El método setCanvasState() te permite enviar datos de estado de tu app web de Interactive Canvas a tu entrega y notifica a Asistente que la app web actualizó su estado. La aplicación web envía el estado actualizado como un objeto JSON.

Llamar a setCanvasState() no invoca un intent. Después de invocar a setCanvasState(), si se invoca a sendTextQuery() o la consulta del usuario coincide con un intent en la conversación, los datos que se configuraron con setCanvasState() en el turno de conversación anterior estarán disponibles en los turnos posteriores de la conversación.

En el siguiente fragmento, la aplicación web usa setCanvasState() para establecer los datos del estado del lienzo:

JavaScript

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

Estado del lienzo de referencia de webhook

Puedes hacer referencia a los valores de estado de Canvas almacenados en tu código de entrega. Para hacer referencia al valor, usa la sintaxis conv.context.canvas.state.KEY, en la que KEY es la clave proporcionada cuando se configuró el valor de estado del lienzo.

Por ejemplo, si antes almacenaste un valor de puntuación alta para un juego en el estado Canvas como el parámetro score, haz referencia a ese valor mediante conv.context.canvas.state.score para acceder a ese valor en la entrega:

Node.js

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

Estado del lienzo de referencia en los mensajes

Puedes hacer referencia a los valores de estado de Canvas almacenados en una instrucción. Para hacer referencia al valor, usa la sintaxis $canvas.state.KEY, en la que KEY es la clave proporcionada cuando se configuró el valor de estado del lienzo.

Por ejemplo, si antes almacenaste un valor de puntuación alta para un juego en el estado Canvas como el parámetro score, haz referencia a ese valor mediante $canvas.state.score para acceder a ese valor en un mensaje:

JSON

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

Estado del lienzo de referencia dentro de las condiciones

También puedes hacer referencia a los valores de estado de Canvas almacenados en condiciones. Para hacer referencia al valor, usa la sintaxis canvas.state.KEY, en la que KEY es la clave proporcionada cuando se estableció el valor de estado del lienzo.

Por ejemplo, si antes almacenaste un valor de puntuación alta para un juego en el estado Canvas como el parámetro score y deseas compararlo con el valor 999 en una condición, puedes hacer referencia al valor almacenado en tu condición con canvas.state.score. Tu expresión de condición se ve de la siguiente manera:

Sintaxis de condiciones

canvas.state.score >= 999
    

sendTextQuery()

El método sendTextQuery() envía consultas de texto a la acción de conversación para buscar coincidencias de manera programática en un intent. En este ejemplo, se usa sendTextQuery() para reiniciar el juego de giro de triángulos cuando el usuario hace clic en un botón. Cuando el usuario hace clic en el botón "Reiniciar el juego", sendTextQuery() envía una consulta de texto que coincide con el intent Restart game y muestra una promesa. Esta promesa da como resultado SUCCESS si se activa el intent y BLOCKED si no lo es. El siguiente fragmento coincide con el intent y controla los casos de éxito y error de la promesa:

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 promesa da como resultado SUCCESS, el controlador de webhook Restart game envía una respuesta Canvas a la app web:

JavaScript

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

Esta respuesta Canvas activa la devolución de llamada onUpdate(), que ejecuta el código en el siguiente fragmento de código RESTART_GAME:

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;
},
…
    

Cómo compilar con entrega del servidor

Puedes implementar las siguientes APIs de Interactive Canvas en tu webhook:

Habilitar el modo de pantalla completa

De forma predeterminada, las aplicaciones web de Interactive Canvas incluyen un encabezado en la parte superior de la pantalla con el nombre de tu acción. Puedes usar enableFullScreen para quitar el encabezado y reemplazarlo por un aviso temporal que aparece en la pantalla de carga, lo que le permite al usuario tener una experiencia de pantalla completa mientras interactúa con tu acción. El mensaje del aviso muestra el nombre visible de la Acción, el nombre del desarrollador y las instrucciones para salir de ella. Además, el color del aviso cambia según lo que el usuario seleccione como tema en su dispositivo.

Figura 1. Un mensaje de aviso en la pantalla de carga de una Acción.

Si un usuario interactúa con tu Acción con frecuencia, el mensaje de aviso deja de aparecer temporalmente en la pantalla de carga. Si el usuario no interactúa con tu acción durante un tiempo, el mensaje de aviso vuelve a aparecer cuando inicia la acción.

Puedes habilitar el modo de pantalla completa en tu webhook o en un mensaje estático en Actions Builder.

Para habilitar el modo de pantalla completa en tu webhook, sigue este paso:

  1. Establece el campo enableFullScreen en true en la primera respuesta de canvas que muestra el webhook en una sesión. El siguiente fragmento es un ejemplo de implementación con la biblioteca cliente de 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);
    

Para habilitar el modo de pantalla completa en un mensaje estático en Actions Builder, sigue estos pasos:

  1. Abre tu proyecto en la Consola de Actions.
  2. Haz clic en Develop, en la barra de navegación, y abre el mensaje que incluye la primera respuesta de canvas.
  3. Configura enable_full_screen como true, como se muestra en el siguiente fragmento:

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

continueTtsDuringTouch

De forma predeterminada, cuando un usuario presiona la pantalla mientras usa una acción de Interactive Canvas, la TTS deja de reproducirse. Con continueTtsDuringTouch, puedes habilitar el TTS para que siga reproduciendo cuando los usuarios toquen la pantalla. No se puede activar ni desactivar este comportamiento en la misma sesión.

Puedes implementar este comportamiento en tu webhook o en una instrucción estática en Actions Builder.

Sigue este paso para habilitar que el TTS continúe después de que el usuario presione la pantalla en tu webhook:

  • Establece el campo continueTtsDuringTouch en true en la primera respuesta de canvas que muestra el webhook en una sesión. El siguiente fragmento es un ejemplo de implementación con la biblioteca cliente de 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);
    

Para permitir que TTS continúe después de que el usuario presione la pantalla en un mensaje estático en Actions Builder, sigue estos pasos:

  1. Abre tu proyecto en la Consola de Actions.
  2. Haz clic en Develop, en la barra de navegación, y abre el mensaje que incluye la primera respuesta de canvas.
  3. Configura continue_tts_during_touch como true, como se muestra en el siguiente fragmento:

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