JavaScript di Dialogflow CX Messenger

Messenger di Dialogflow CX fornisce functions che puoi chiamare per influire sul suo comportamento.

renderCustomText

Questa funzione mostra un semplice messaggio di testo, come se provenisse dall'agente come risposta di testo semplice o fosse stato inserito dall'utente finale.

Argomenti:

  • string: messaggio
  • boolean: true per un messaggio dall'agente, false dall'utente finale

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.renderCustomText('Custom text', true);

renderCustomCard

Questa funzione mostra una scheda personalizzata, come se provenisse dall'elaborazione di Dialogflow.

Argomenti:

  • payload: un elenco di risposte al payload personalizzate, definite nella sezione Esecuzione.

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
const payload = [
  {
    "type": "info",
    "title": "Info item title",
    "subtitle": "Info item subtitle",
    "image": {
      "rawUrl": "https://example.com/images/logo.png"
    },
    "anchor": {
      "href": "https://example.com",
      "target": "_blank"
    }
  }
];
dfMessenger.renderCustomCard(payload);

sendQuery

Questa funzione invia una query all'API Dialogflow e attende la risposta. In questo modo viene simulato un input utente finale che viene normalmente fornito alla finestra di dialogo dell'agente. La risposta verrà gestita come qualsiasi query dell'utente finale.

Argomenti:

  • string: query sul testo

Ritorno:

  • Promise<void>: valore restituito per l'operazione asincrona

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendQuery('Describe shipping costs.');

sendRequest

Questa funzione invia una richiesta all'API Dialogflow e attende la risposta.

Argomenti:

  • string: tipo di richiesta, supporta query (vedi anche sendQuery sopra) e event (vedi evento personalizzato)
  • any: payload corrispondente al tipo di richiesta, che al momento è una stringa per entrambi i tipi di richiesta supportati

Ritorno:

  • Promise<void>: valore restituito per l'operazione asincrona

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.sendRequest('query', 'Describe shipping costs.');

setQueryParameters

Questa funzione imposta i valori predefiniti per il campo queryParams della richiesta detectIntent dell'API Dialogflow. Altri metodi di Messenger di Dialogflow CX potrebbero sostituire i rispettivi valori predefiniti nei parametri di ricerca.

Argomenti:

  • object: dati JSON. Per lo schema dei parametri di ricerca, consulta QueryParameters

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
const queryParameters = {
  parameters: {
  timeZone: "America/New_York"
  }
};
dfMessenger.setQueryParameters(queryParameters);

setContext

Questa funzione invia informazioni sulla personalizzazione generativa dell'utente finale a Dialogflow. Queste informazioni rimarranno invariate per il resto della sessione.

Argomenti:

  • object: dati JSON, consulta la documentazione sulla personalizzazione generativa

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
const metadata = {
  "subscription plan": "Business Premium Plus",
  "devices owned": [
    {
      model: "Google Pixel 7",
    },
    {
      model: "Google Pixel Tablet",
    },
  ],
};
dfMessenger.setContext(metadata);

clearStorage

Questa funzione cancella lo spazio di archiviazione permanente della finestra di dialogo dell'agente. Viene inoltre cancellato lo stato corrente della finestra di dialogo dell'agente.

Argomenti:

  • nessuno

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearStorage();

clearAuthentication

Questa funzione cancella l'autenticazione della finestra di dialogo dell'agente.

Argomenti:

  • nessuno

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.clearAuthentication();

startNewSession

Questa funzione avvia una nuova sessione all'interno della finestra di dialogo dell'agente. Può mantenere o reimpostare la cronologia dei messaggi corrente. Non cancella l'autenticazione degli utenti.

Argomenti:

Nome Tipo Descrizione
args object? Argomento facoltativo per configurare la creazione della nuova sessione.
args.retainHistory boolean? Flag facoltativo per conservare la cronologia. Se impostato su true, la cronologia verrà conservata, altrimenti verrà cancellata.

Ritorno:

  • void

Ad esempio:

const dfMessenger = document.querySelector('df-messenger');
dfMessenger.startNewSession({ retainHistory: true });

openChat

Questa funzione apre la chat. Chiamalo nell'elemento df-messenger-chat-bubble per aprire la chat. Non fa nulla se la chat è già aperta.

Argomenti:

  • nessuno

Ritorno:

  • void

Ad esempio:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.openChat();

closeChat

Questa funzione chiude la chat. Chiamalo sull'elemento df-messenger-chat-bubble per chiudere la chat. Non fa nulla se la chat è già chiusa.

Argomenti:

  • nessuno

Ritorno:

  • void

Ad esempio:

const dfMessengerBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerBubble.closeChat();

openMinChat

Chat di Dialogflow CX Messenger ridotta a icona

Questa funzione apre la finestra della chat in una versione ridotta. Chiamalo sull'elemento df-messenger-chat-bubble per aprire la chat ridotta a icona. Non fa nulla se la chat è già ridotta a icona.

Argomenti:

Nome Tipo Descrizione
args oggetto? Argomento facoltativo per configurare la chat ridotta a icona
args.anchor stringa? (Facoltativo) anchor per configurare la posizione in cui viene aperta la chat ridotta a icona. Stessa logica dell'attributo anchor nell'elemento della bolla della chat. Il valore predefinito è left-top.
args.showActorImages booleano? Flag facoltativo per mostrare le immagini degli attori (se specificato nell'elemento df-messenger-chat-bubble). Il valore predefinito è false.

Esempio:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.openMinChat({
  anchor: 'top-left'
});

closeMinChat

Chiude la chat ridotta a icona. Chiamalo sull'elemento df-messenger-chat-bubble per chiudere la chat ridotta a icona. Non fa nulla se la chat è già chiusa.

Esempio:

const dfMessengerChatBubble = document.querySelector('df-messenger-chat-bubble');
dfMessengerChatBubble.closeMinChat();