JavaScript di Dialogflow CX Messenger

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

renderCustomText

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

Argomenti:

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

Ritorno:

  • 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 dall'adempimento di Dialogflow CX.

Argomenti:

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

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 CX e attende la risposta. In questo modo viene simulato un input utente finale normalmente fornito alla finestra di dialogo dell'agente. La risposta verrà gestita come qualsiasi query di un utente finale.

Argomenti:

  • string: query di 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 CX 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 attualmente è 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 CX. Altri metodi di Dialogflow CX Messenger possono sostituire i rispettivi valori predefiniti nei parametri di query.

Argomenti:

  • object: dati JSON. Per lo schema dei parametri di ricerca, vedi 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 a Dialogflow CX informazioni sulla personalizzazione generativa per l'utente finale. Queste informazioni rimarranno 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. Cancella anche lo stato attuale della finestra di dialogo dell'agente. Per impostazione predefinita, conserva lo stato di autenticazione dell'utente. Utilizza args facoltativo 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 viene impostato su true, lo stato di autenticazione viene cancellato, altrimenti viene mantenuto.

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. Per impostazione predefinita, cancella la cronologia dei messaggi, ma mantiene lo stato di autenticazione dell'utente. Utilizza args facoltativo per personalizzare questo comportamento.

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 viene impostato su true, la cronologia viene conservata, altrimenti viene cancellata.
args.clearAuthentication boolean? Flag facoltativo per cancellare lo stato di autenticazione. Se viene impostato su true, lo stato di autenticazione viene cancellato, altrimenti viene mantenuto.

Ritorno:

  • void

Ad esempio:

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

openChat

Questa funzione apre la chat. Chiamalo sull'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 ridotta al minimo di Dialogflow CX Messenger

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 object? Argomento facoltativo per configurare la chat ridotta a icona
args.anchor string? (Facoltativo) anchor per configurare la posizione in cui viene aperta la chat ridotta a icona. Stessa logica dell'attributo anchor nell'elemento della bolla di chat. Il valore predefinito è left-top.
args.showActorImages boolean? 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();