JavaScript di Dialogflow CX Messenger

Dialogflow CX Messenger fornisce funzioni che puoi chiamare per influenzarne il comportamento.

renderCustomText

Questa funzione esegue il rendering di un messaggio, come se provenisse dall'agente o fosse stato inserito dall'utente.

Argomenti:

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

Risultato:

  • void

Ad esempio:

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

renderCustomCard

Questa funzione esegue il rendering di una scheda personalizzata come se provenisse dal fulfillment di Dialogflow CX.

Argomenti:

  • payload: un elenco di risposte di payload personalizzati, definite nella sezione Fulfillment

Risultato:

  • 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 CX e attende la risposta. In questo modo viene simulato un input utente finale che normalmente viene fornito alla finestra di dialogo dell'agente. Il sistema gestisce la risposta come qualsiasi query dell'utente finale.

Argomenti:

  • string: query di testo

Risultato:

  • Promise<void>: il 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 CX e attende la risposta.

Argomenti:

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

Risultato:

  • Promise<void>: il 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 CX. Altri metodi di Dialogflow CX Messenger possono sostituire i rispettivi valori predefiniti nei parametri di ricerca.

Argomenti:

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

Risultato:

  • 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 dall'utente finale a Dialogflow CX. Queste informazioni rimangono per il resto della sessione.

Argomenti:

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

Risultato:

  • 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. Inoltre, cancella lo stato attuale della finestra di dialogo dell'agente. Per impostazione predefinita, mantiene lo stato di autenticazione dell'utente. Puoi utilizzare l'opzione facoltativa args per personalizzare questo comportamento.

Argomenti:

Nome Tipo Descrizione
args object? Argomento facoltativo per configurare l'operazione di cancellazione dello spazio di archiviazione.
args.clearAuthentication boolean? Flag facoltativo per cancellare lo stato di autenticazione. Se impostato su true, lo stato di autenticazione verrà cancellato, altrimenti verrà conservato.

Risultato:

  • 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

Risultato:

  • 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. Per impostazione predefinita, cancella la cronologia dei messaggi, ma conserva lo stato di autenticazione dell'utente. Personalizza questo comportamento utilizzando il parametro facoltativo args.

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.
args.clearAuthentication boolean? Flag facoltativo per cancellare lo stato di autenticazione. Se impostato su true, lo stato di autenticazione verrà cancellato, altrimenti verrà conservato.

Risultato:

  • void

Ad esempio:

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

openChat

Chiama questa funzione sull'elemento df-messenger-chat-bubble per aprire la chat. Non succede nulla se la chat è già aperta.

Argomenti:

  • nessuno

Risultato:

  • 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 succede nulla se la chat è già chiusa.

Argomenti:

  • nessuno

Risultato:

  • void

Ad esempio:

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

openMinChat

Chat ridotta a icona di Dialogflow CX Messenger

Puoi aprire la finestra di chat in una versione ridotta a icona chiamando questa funzione sull'elemento df-messenger-chat-bubble. Questa funzione non esegue alcuna operazione se la chat è già ridotta a icona.

Argomenti:

Nome Tipo Descrizione
args object? Argomento facoltativo per configurare la chat ridotta a icona.
args.anchor string? anchor facoltativo per configurare dove viene aperta la chat ridotta a icona. Stessa logica dell'attributo anchor nell'elemento del fumetto della chat. Il valore predefinito è left-top.
args.showActorImages boolean? Flag facoltativo per mostrare le immagini degli attori (se specificate 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

Chiama questa funzione sull'elemento df-messenger-chat-bubble per chiudere la chat ridotta a icona. Non esegue alcuna azione se la chat è già chiusa.

Esempio:

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