JavaScript di Dialogflow CX Messenger

Dialogflow CX Messenger provides 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 risposta di testo semplice o fosse stato inserito dall'utente finale.

Argomenti:

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

Valore restituito:

  • 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 personalizzate, definite nella sezione Fulfillment.

Valore restituito:

  • 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 pratica, simula 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 di testo

Valore restituito:

  • 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) ed event (vedi evento personalizzato)
  • any: payload che corrisponde al tipo di richiesta, che al momento è una stringa per entrambi i tipi di richiesta supportati

Valore restituito:

  • 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 queryParams campo 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

Valore restituito:

  • 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 relative all'utente finale. Queste informazioni verranno mantenute per il resto della sessione.

Argomenti:

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

Valore restituito:

  • 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 l'argomento facoltativo 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à mantenuto.

Valore restituito:

  • 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

Valore restituito:

  • 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. Utilizza l'argomento facoltativo args per personalizzare questo comportamento.

Argomenti:

Nome Tipo Descrizione
args object? Argomento facoltativo per configurare la creazione di una nuova sessione.
args.retainHistory boolean? Flag facoltativo per conservare la cronologia. Se impostato su true, la cronologia verrà mantenuta, 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à mantenuto.

Valore restituito:

  • void

Ad esempio:

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

openChat

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

Argomenti:

  • nessuno

Valore restituito:

  • void

Ad esempio

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

closeChat

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

Argomenti:

  • nessuno

Valore restituito:

  • 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. Chiamala sull'elemento df-messenger-chat-bubble per aprire la chat ridotta. Non fa nulla se la chat è già ridotta.

Argomenti:

Nome Tipo Descrizione
args object? Argomento facoltativo per configurare la chat ridotta
args.anchor string? anchor facoltativo per configurare la posizione di apertura della chat ridotta. 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 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

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

Esempio:

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