JavaScript Dialogflow Messenger

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

renderCustomText

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

Argomenti:

  • string: SMS
  • boolean: true per un messaggio dell'agente, falso per l'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 dal fulfillment Dialogflow.

Argomenti:

  • payload: un elenco di risposte di payload personalizzate, definite nel Sezione Fulfillment.

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. Questo simula in modo efficace l'input di un utente finale normalmente fornito alla finestra di dialogo dell'agente. La risposta verrà gestita come qualsiasi query dell'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 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 Dialogflow Messenger 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 personalizzazione generativa le informazioni per l'utente finale a Dialogflow. Queste informazioni verranno mantenute 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 l'archiviazione permanente della finestra di dialogo dell'agente. Si cancella anche lo stato attuale 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 attuale dei messaggi. Gli utenti non vengono cancellati autenticazione.

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 il criterio viene impostato su true, la cronologia verrà mantenuta, altrimenti verrà cancellata.

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 a icona Dialogflow Messenger

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

Argomenti:

Nome Tipo Descrizione
args ? Argomento facoltativo per configurare la chat ridotta a icona
args.anchor stringa? anchor facoltativo per configurare il punto in cui la chat ridotta a icona verrà aperta. Stessa logica dell'attributo anchor nell'elemento fumetto della 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. Richiamalo sull'elemento df-messenger-chat-bubble per chiudi la chat ridotta a icona. Non fa nulla se la chat è già chiusa.

Esempio:

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