Continuare la creazione con l'evasione degli ordini lato client o lato server

Ora che hai appreso le nozioni di base, puoi migliorare e personalizzare l'azione con metodi specifici per Canvas. Puoi scegliere di sviluppare l'Azione con il modello di fulfillment client o con il modello di fulfillment lato server quando crei il progetto Actions. Per ulteriori informazioni su queste opzioni, consulta Abilitare Interactive Canvas.

Se selezioni l'opzione del modello di fulfillment client, puoi utilizzare quanto segue nell'Azione:

Se selezioni l'opzione del modello di fulfillment server, puoi utilizzare quanto segue nell'Azione:

Alcune API Interactive Canvas non sono consigliate per l'utilizzo con un particolare modello di fulfillment. La tabella seguente mostra le API abilitate quando selezioni l'opzione di fulfillment client e se queste API sono consigliate o sconsigliate per ogni modello:

Nome API Supportato nel modello di distribuzione del server? Supportato nel modello di fulfillment client?
sendTextQuery() Supportate ma non consigliate (vedi sendtextQuery() per maggiori informazioni)
outputTts()
triggerScene() No
createIntentHandler(), expect(), clearExpectations(), prompt() No
createNumberSlot(),createTextSlot, createConfirmationSlot, createOptionsSlot() No
setHomeParam(), getHomeParam(), setUserParam(), getUserParam() No

Le seguenti sezioni spiegano come implementare le API per i modelli di fulfillment lato client e lato server nell'azione Interactive Canvas.

Crea con il fulfillment lato client

Puoi implementare le seguenti API Interactive Canvas nella logica della tua app web:

outputTts()

Questa API consente di produrre sintesi vocale (TTS) da un dispositivo senza inviare un prompt statico da Actions Builder o richiamare un webhook. Se non è richiesta alcuna logica lato server associata al TTS, puoi utilizzare outputTts() dal lato client per saltare una visita al tuo server e fornire una risposta più rapida agli utenti.

La funzionalità di sintesi vocale outputTts()lato client può interrompere o annullare la sintesi lato server. Puoi evitare di interrompere la sintesi vocale lato server adottando le seguenti precauzioni:

  • Evita di chiamare outputTts() all'inizio della sessione. Utilizza invece la sintesi lato server nella prima svolta conversazionale dell'Azione.
  • Evita di chiamare outputTts() consecutivamente senza un'azione dell'utente intermedia.

Lo snippet seguente mostra come utilizzare outputTts() per generare la sintesi vocale dal lato client:

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

Puoi anche utilizzare outputTts() con onTtsMark() per posizionare gli indicatori SSML nella sequenza di testo. L'utilizzo di onTtsMark() consente di sincronizzare l'animazione dell'app web o lo stato del gioco in punti specifici di una stringa TTS SSML, come mostrato nello snippet seguente:

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

Nell'esempio precedente, i due marcatori che personalizzano la risposta vengono inviati all'app web con la sintesi vocale.

Gestire il fulfillment dell'intent sul client

Nel modello di fulfillment server per Interactive Canvas, tutti gli intent devono essere gestiti da un webhook, il che aumenta la latenza dell'Azione. Anziché chiamare un webhook, puoi gestire il fulfillment degli intent all'interno dell'app web.

Per gestire gli intent lato client, puoi utilizzare le seguenti API:

  • createIntentHandler(): un metodo che ti consente di definire gestori di intent nel codice della tua app web per intent personalizzati definiti in Actions Builder.
  • expect(): un metodo che attiva/registra il gestore di intent in modo che un utente possa soddisfare l'intent.
  • clearExpectations(): un metodo che chiarisce le aspettative per tutti gli intent attualmente attivati in modo che non possano essere abbinati, anche se un utente pronuncia un'espressione che corrisponde all'intent.
  • deleteHandler(): un metodo che disabilita singoli gestori di intent in modo che questi intent non possano essere abbinati.

Con queste API, puoi attivare o disattivare in modo selettivo gli intent per diversi stati dell'azione interattiva Canvas. Devi utilizzare expect() per i gestori di intent per attivare questi intent.

Attivare i gestori di intent

L'attivazione di un gestore di intent è un processo in due fasi. Innanzitutto, devi definire l'intent in Actions Builder. A questo punto, per rendere l'intent abbinabile, devi chiamare expect() sul gestore di intent.

Per configurare e attivare un gestore di intent sul lato client, procedi nel seguente modo:

  1. Apri il progetto nella console di Actions e aggiungi un intent personalizzato.
  2. Seleziona per Si tratta di un intent globale?

  3. Configura l'intent e fai clic su Salva.

  4. Definisci il gestore dell'intent nella logica della tua app web, come illustrato nello snippet seguente:

    /**
    * 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. Chiama il metodo expect() per registrare il gestore di intent, come mostrato nel seguente snippet:

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

Disattiva i gestori di intent

Dopo aver definito un gestore di intent, puoi attivare o disattivare l'intent in base alle tue esigenze. Quando chiami expect() per attivare un intent, questo restituisce un oggetto con un metodo deleteHandler(), che puoi utilizzare per disabilitare il gestore appena creato. La definizione del gestore di intent persiste anche se l'intent non è attualmente attivo, quindi è possibile riattivarlo quando necessario.

Per disattivare un gestore di intent, chiama deleteHandler() sul gestore di intent, come mostrato nel seguente snippet:

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

Puoi chiamare expect() per aggiungere nuovamente un gestore di intent disattivato, come illustrato nel seguente snippet:

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

Per disabilitare collettivamente gli intent, puoi usare il metodo clearExpectations(), che disattiva tutti gli intent attualmente attivati. Lo snippet seguente mostra come chiarire le aspettative per tutti i gestori di intent:

interactiveCanvas.clearExpectations();

Gestire la compilazione degli slot nel client

Anziché aggiungere il riempimento degli slot a una scena all'interno di Actions Builder, puoi gestire il riempimento degli slot direttamente nell'app web.

Per gestire il riempimento degli slot sul lato client, devi prima creare uno slot utilizzando una delle seguenti API:

  • createNumberSlot(callback, hints): un metodo che consente di definire uno slot numerico nel codice dell'app web. Utilizzato per richiedere all'utente un numero.
  • createTextSlot(callback, hints): metodo che consente di definire uno spazio di testo nel codice dell'app web. Utilizzato per richiedere all'utente una parola.
  • createConfirmationSlot(callback, hints): metodo che consente di definire un'area di conferma nel codice dell'app web. Utilizzato per chiedere all'utente una conferma (sì/no).
  • createOptionsSlot(options, callback, hints): un metodo che ti consente di definire un'area opzioni nel codice della tua app web. Utilizzato per richiedere all'utente di selezionare da un elenco di opzioni predefinite.

Quando crei un'area annuncio, puoi definire facoltativamente triggerHints, ovvero parole chiave che migliorano il sistema di comprensione del linguaggio naturale (NLU) per la tua azione. Queste parole chiave dovrebbero essere brevi che l'utente potrebbe pronunciare quando riempie l'area annuncio. Ad esempio, la parola chiave triggerHints per un'area numerica potrebbe essere years. Quando un utente risponde a una domanda sulla sua età nella conversazione con la risposta "Ho trent'anni", l'Azione ha maggiori probabilità di riconoscere che l'utente sta occupando l'area in modo appropriato.

Dopo aver creato uno slot, puoi richiedere all'utente uno slot utilizzando l'API prompt:

  • prompt(tts, slot): un metodo che restituisce la sintesi vocale all'utente, chiedendogli di compilare un'area prevista.

La chiamata a prompt() restituisce una promessa con lo stato e il valore dell'area riempita.

Crea slot numerico

Uno slot numerico ti permette di chiedere all'utente un numero durante la conversazione. Per ulteriori informazioni sul riempimento degli slot, consulta la sezione Riempimento degli slot della documentazione di Actions Builder.

Per richiedere all'utente di riempire uno slot numerico sul lato client, procedi nel seguente modo:

  1. Chiama il metodo createNumberSlot() per creare uno slot numerico nella logica dell'app web:

    /**
     * Create number slot.
     */
    const triggerHints = { associatedWords: ['guess number', 'number'] };
    const slot = interactiveCanvas.createNumberSlot(
      number => {
        console.log(`Number guessed: ${number}.`);
      }, triggerHints);
    
    
  2. Chiama il metodo prompt() per richiedere all'utente l'area annuncio e gestisci il valore slot della promessa restituita, come mostrato nello snippet seguente:

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

Crea spazio di testo

Uno spazio di testo ti permette di chiedere all'utente una parola durante la conversazione. Per ulteriori informazioni sul riempimento degli slot, consulta la sezione Riempimento degli slot della documentazione di Actions Builder.

Per richiedere all'utente di riempire un'area di testo sul lato client:

  1. Chiama il metodo createTextSlot() per creare uno spazio di testo nella logica dell'app web:

    /**
     * Create text slot.
     */
    const triggerHints = { associatedWords: ['favorite color', 'color'] };
    const slot = interactiveCanvas.createTextSlot(
      text => {
        console.log(`Favorite color: ${text}.`);
      }, triggerHints);
    
    
  2. Chiama il metodo prompt() per richiedere all'utente l'area annuncio e gestisci il valore slot della promessa restituita, come mostrato nello snippet seguente:

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

Crea spazio di conferma

Uno spazio di conferma ti consente di richiedere una conferma a un utente (l'utente può rispondere "Sì" o "No" per riempire l'area annuncio). Per ulteriori informazioni sul riempimento degli slot, consulta la sezione Riempimento degli slot della documentazione di Actions Builder.

Per richiedere all'utente di riempire un'area di conferma sul lato client, segui questi passaggi:

  1. Chiama il metodo createConfirmationSlot() per creare uno spazio di conferma nella logica della tua app web:

    /**
     * Create confirmation slot (boolean).
     */
    const triggerHints = { associatedWords: ['user confirmation', 'confirmation'] };
    const slot = interactiveCanvas.createConfirmationSlot(
      yesOrNo => {
        console.log(`Confirmation: ${yesOrNo}`);
      }, triggerHints);
    
    
  2. Chiama il metodo prompt() per richiedere all'utente l'area annuncio e gestisci il valore slot della promessa restituita, come mostrato nello snippet seguente:

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

Crea area opzioni

Uno slot opzioni consente di richiedere all'utente di effettuare una selezione da un elenco di opzioni predefinite. Per ulteriori informazioni sul riempimento degli slot, consulta la sezione Riempimento degli slot della documentazione di Actions Builder.

Per richiedere all'utente di riempire un'area dedicata alle opzioni sul lato client, segui questi passaggi:

  1. Chiama il metodo createOptionsSlot() per creare uno slot di opzioni nella logica della tua 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. Chiama il metodo prompt() per richiedere all'utente l'area annuncio e gestisci il valore slot della promessa restituita, come mostrato nello snippet seguente:

    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() ti consente di passare a un'altra scena nell'azione interattiva Canvas dal fulfillment lato client. Con triggerScene(), puoi anche passare dal fulfillment lato client a quello lato server quando l'utente deve accedere a una scena di sistema in Actions Builder che richiede un webhook. Ad esempio, puoi chiamare triggerScene() quando un utente deve collegare il proprio account o ricevere notifiche e poi tornare da quella scena al fulfillment lato client con un prompt di Canvas.

Lo snippet seguente mostra come implementare triggerScene() nell'Azione:

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

Spazio di archiviazione della home page e degli utenti sul client

Invece di utilizzare un webhook per recuperare e impostare i valori dello spazio di archiviazione degli utenti e della casa, puoi chiamare le API lato client per gestire lo spazio di archiviazione degli utenti e della casa nella tua app web. La tua app web può quindi utilizzare questi valori archiviati in più sessioni (ad esempio, nei messaggi e nelle condizioni) e può accedere ai valori per un nucleo familiare o un utente specifico quando necessario. L'utilizzo di queste API può ridurre la latenza nell'azione Interactive Canvas, perché non è più necessario chiamare un webhook per recuperare e impostare i valori dello spazio di archiviazione.

Lo spazio di archiviazione nell'app web e nella home page segue gli stessi principi generali dello spazio di archiviazione nel webhook. Per saperne di più sullo spazio di archiviazione per casa e utenti, consulta la documentazione relativa allo spazio di archiviazione Home e allo spazio di archiviazione utente.

Spazio di archiviazione per la casa lato client

Lo spazio di archiviazione domestico consente di archiviare i valori per gli utenti del nucleo familiare in base al grafico Home e viene condiviso tra tutte le sessioni del nucleo familiare. Ad esempio, se un utente gioca a un gioco Interactive Canvas in un nucleo familiare, il punteggio del gioco può essere archiviato nello spazio di archiviazione di casa e gli altri membri del nucleo familiare possono continuare a giocare con il punteggio memorizzato.

Per consentire all'Azione di supportare lo spazio di archiviazione in casa, segui questi passaggi:

  1. Nella console di Actions, vai a Deployment > Informazioni sulla directory > Informazioni aggiuntive.
  2. Seleziona la casella per Le tue azioni utilizzano lo spazio di archiviazione di casa?

Per scrivere un valore per lo spazio di archiviazione domestico nella tua app web, chiama il metodo setHomeParam(), come mostrato nello snippet seguente:

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

Per leggere un valore dello spazio di archiviazione domestico nella tua app web, chiama il metodo getHomeParam(), come mostrato nello snippet seguente:

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

Per cancellare tutto lo spazio di archiviazione esistente, chiama il metodo resetHomeParam(), come mostrato nel seguente snippet:

interactiveCanvas.resetHomeParam();

Spazio di archiviazione utente lato client

Lo spazio di archiviazione degli utenti consente di archiviare i valori dei parametri per un utente specifico verificato in più sessioni. Ad esempio, se un utente sta giocando, il punteggio del gioco può essere memorizzato per quell'utente. In una sessione di gioco successiva, l'utente può continuare a giocare con lo stesso punteggio.

Per scrivere un valore per lo spazio di archiviazione degli utenti nella tua app web, chiama il metodo setUserParam(), come mostrato nello snippet seguente:

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

Per leggere un valore dello spazio di archiviazione utente nella tua app web, chiama il metodo getUserParam(), come mostrato nello snippet seguente:

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

Per cancellare tutto lo spazio di archiviazione esistente degli utenti, chiama il metodo resetUserParam(), come mostrato nel seguente snippet:

interactiveCanvas.resetUserParam();

setCanvasState()

Il metodo setCanvasState() ti consente di inviare dati sullo stato dall'app web Interactive Canvas al fulfillment e comunica all'assistente che l'app web ha aggiornato il proprio stato. L'app web invia il suo stato aggiornato come oggetto JSON.

La chiamata a setCanvasState() non richiama un intent. Dopo aver richiamato setCanvasState(), se viene richiamato sendTextQuery() o la query dell'utente corrisponde a un intent nella conversazione, i dati impostati con setCanvasState() nella svolta conversazionale precedente sono disponibili nelle conversazioni successive.

Nello snippet seguente, l'app web utilizza setCanvasState() per impostare i dati sullo stato di Canvas:

JavaScript

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

Fare riferimento allo stato della canvas dal webhook

Puoi fare riferimento ai valori dello stato della Canvas archiviati nel codice di distribuzione. Per fare riferimento al valore, utilizza la sintassi conv.context.canvas.state.KEY, dove KEY è la chiave fornita quando è stato impostato il valore dello stato Canvas.

Ad esempio, se in precedenza hai memorizzato un valore di alto punteggio per un gioco nello stato di Canvas come parametro score, fai riferimento a tale valore utilizzando conv.context.canvas.state.score per accedere a quel valore in fulfillment:

Node.js

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

Fare riferimento allo stato della Canvas all'interno dei prompt

Puoi fare riferimento ai valori dello stato della canvas archiviati in un prompt. Per fare riferimento al valore, utilizza la sintassi $canvas.state.KEY, dove KEY è la chiave fornita quando è stato impostato il valore dello stato Canvas.

Ad esempio, se in precedenza hai memorizzato un valore del punteggio elevato per un gioco nello stato di Canvas come parametro score, fai riferimento a tale valore utilizzando $canvas.state.score per accedere a tale valore in un prompt:

JSON

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

Stato della canvas di riferimento all'interno delle condizioni

Puoi anche fare riferimento ai valori di stato della canvas archiviati in determinate condizioni. Per fare riferimento al valore, utilizza la sintassi canvas.state.KEY, dove KEY è la chiave fornita quando è stato impostato il valore dello stato Canvas.

Ad esempio, se in precedenza hai memorizzato un valore con un punteggio alto per un gioco in Canvas come parametro score e vuoi confrontarlo con il valore 999 in una condizione, puoi fare riferimento al valore memorizzato nella condizione utilizzando canvas.state.score. L'espressione della condizione è simile alla seguente:

Sintassi delle condizioni

canvas.state.score >= 999
    

sendTextQuery()

Il metodo sendTextQuery() invia query di testo all'azione conversazionale per corrispondere in modo programmatico a un intent. Questo esempio utilizza sendTextQuery() per riavviare il gioco a rotazione triangolare quando l'utente fa clic su un pulsante. Quando l'utente fa clic sul pulsante "Riavvia gioco", sendTextQuery() invia una query di testo che corrisponde all'intent Restart game e restituisce una promessa. Questa promessa genera SUCCESS se l'intent viene attivato e BLOCKED in caso contrario. Lo snippet seguente corrisponde all'intent e gestisce i casi di successo e di errore della promessa:

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

Se la promessa restituisce SUCCESS, il gestore di webhook Restart game invia una risposta Canvas alla tua app web:

JavaScript

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

Questa risposta Canvas attiva il callback onUpdate(), che esegue il codice nello snippet di codice RESTART_GAME riportato di seguito:

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

Crea con fulfillment lato server

Puoi implementare le seguenti API Interactive Canvas nel tuo webhook:

Attiva modalità a schermo intero

Per impostazione predefinita, le app web Interactive Canvas includono un'intestazione con il nome dell'Azione nella parte superiore dello schermo. Puoi utilizzare enableFullScreen per rimuovere l'intestazione e sostituirla con un avviso popup temporaneo visualizzato nella schermata di caricamento, che consente all'utente di avere un'esperienza a schermo intero durante l'interazione con l'Azione. Il messaggio toast mostra il nome visualizzato dell'Azione, il nome dello sviluppatore e le istruzioni per uscire dall'Azione. Inoltre, il colore del toast cambia a seconda del tema selezionato dall'utente sul dispositivo.

Figura 1. Un avviso popup nella schermata di caricamento di un'Azione.

Se un utente interagisce frequentemente con l'Azione, il messaggio toast non viene temporaneamente visualizzato nella schermata di caricamento. Se l'utente non interagisce con l'Azione per un po' di tempo, il messaggio toast viene visualizzato di nuovo quando avvia l'Azione.

Puoi attivare la modalità a schermo intero nel webhook o in un prompt statico in Actions Builder.

Per attivare la modalità a schermo intero nel webhook, segui questo passaggio:

  1. Imposta il campo enableFullScreen su true nella prima risposta canvas restituita dal webhook in una sessione. Il seguente snippet è un esempio di implementazione utilizzando la libreria client 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);
    

Per attivare la modalità a schermo intero in un prompt statico in Actions Builder, procedi nel seguente modo:

  1. Apri il progetto nella console di Actions.
  2. Fai clic su Sviluppa nella barra di navigazione e apri il prompt che include la prima risposta canvas.
  3. Imposta enable_full_screen su true, come mostrato nello snippet seguente:

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

continueTtsDuringTouch

Per impostazione predefinita, quando un utente tocca lo schermo mentre utilizza un'azione Canvas interattiva, la riproduzione della sintesi vocale si interrompe. Puoi attivare la sintesi vocale affinché continui la riproduzione quando gli utenti toccano lo schermo con continueTtsDuringTouch. Questo comportamento non può essere attivato e disattivato nella stessa sessione.

Puoi implementare questo comportamento nel webhook o in un prompt statico in Actions Builder.

Per consentire la continuazione della sintesi vocale dopo che l'utente ha toccato lo schermo nel webhook, segui questo passaggio:

  • Imposta il campo continueTtsDuringTouch su true nella prima risposta canvas restituita dal webhook in una sessione. Il seguente snippet è un esempio di implementazione utilizzando la libreria client 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);
    

Per consentire la continuazione di TTS dopo che l'utente ha toccato lo schermo in un prompt statico in Actions Builder, segui questi passaggi:

  1. Apri il progetto nella console di Actions.
  2. Fai clic su Sviluppa nella barra di navigazione e apri la richiesta che include la prima risposta canvas.
  3. Imposta continue_tts_during_touch su true, come mostrato nello snippet seguente:

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