JavaScript Dialogflow CX Messenger

Dialogflow CX Messenger fournit des fonctions que vous pouvez appeler pour affecter son comportement.

renderCustomText

Cette fonction affiche un simple message texte, comme s'il provenait de l'agent en tant que réponse textuelle simple ou s'il avait été saisi par l'utilisateur final.

Arguments:

  • string : message texte
  • boolean : "true" pour un message de l'agent, "false" pour un message de l'utilisateur final

Retour :

  • void

Exemple :

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

renderCustomCard

Cette fonction affiche une fiche personnalisée, comme si elle provenait de la réponse Dialogflow CX.

Arguments:

  • payload : liste de réponses de charge utile personnalisées, définies dans la section Réponse.

Retour :

  • void

Exemple :

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

Cette fonction envoie une requête à l'API Dialogflow CX et attend la réponse. Elle simule efficacement une entrée de l'utilisateur final normalement fournie à la boîte de dialogue de l'agent. La réponse sera traitée comme n'importe quelle requête d'un utilisateur final.

Arguments:

  • string : requête textuelle

Retour :

  • Promise<void> : valeur de retour pour l'opération asynchrone

Exemple :

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

sendRequest

Cette fonction envoie une requête à l'API Dialogflow CX et attend la réponse.

Arguments:

  • string : type de requête, compatible avec query (voir aussi sendQuery ci-dessus) et event (voir événement personnalisé)
  • any: charge utile correspondant au type de requête, qui est actuellement une chaîne pour les deux types de requêtes compatibles

Retour :

  • Promise<void> : valeur de retour pour l'opération asynchrone

Exemple :

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

setQueryParameters

Cette fonction définit des valeurs par défaut pour le queryParams champ de la requête detectIntent de l'API Dialogflow CX. D'autres méthodes Dialogflow CX Messenger peuvent remplacer les valeurs par défaut respectives dans les paramètres de requête.

Arguments:

  • object : données JSON. Pour le schéma des paramètres de requête, consultez QueryParameters

Retour :

  • void

Exemple :

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

setContext

Cette fonction envoie des informations de personnalisation générative à l'utilisateur final à Dialogflow CX. Ces informations seront conservées pendant le reste de la session.

Arguments:

  • object : données JSON, consultez la documentation sur la personnalisation générative.

Retour :

  • void

Exemple :

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

Cette fonction efface le stockage persistant de la boîte de dialogue de l'agent. Elle efface également l'état actuel de la boîte de dialogue de l'agent. Par défaut, elle conserve l'état d'authentification de l'utilisateur. Utilisez l'argument facultatif args pour personnaliser ce comportement.

Arguments:

Nom Type Description
args object? Argument facultatif permettant de configurer l'opération d'effacement du stockage.
args.clearAuthentication boolean? Indicateur facultatif permettant d'effacer l'état d'authentification. Si la valeur est "true", l'état d'authentification est effacé. Sinon, il est conservé.

Retour :

  • void

Exemple :

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

clearAuthentication

Cette fonction efface l'authentification de la boîte de dialogue de l'agent.

Arguments:

  • aucun

Retour :

  • void

Exemple :

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

startNewSession

Cette fonction démarre une nouvelle session dans la boîte de dialogue de l'agent. Par défaut, elle efface l'historique des messages, mais conserve l'état d'authentification de l'utilisateur. Utilisez l'argument facultatif args pour personnaliser ce comportement.

Arguments:

Nom Type Description
args object? Argument facultatif permettant de configurer la création d'une session.
args.retainHistory boolean? Indicateur facultatif permettant de conserver l'historique. Si la valeur est "true", l'historique est conservé. Sinon, il est effacé.
args.clearAuthentication boolean? Indicateur facultatif permettant d'effacer l'état d'authentification. Si la valeur est "true", l'état d'authentification est effacé. Sinon, il est conservé.

Retour :

  • void

Exemple :

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

openChat

Cette fonction ouvre la discussion. Appelez-la sur l'élément df-messenger-chat-bubble pour ouvrir la discussion. Si la discussion est déjà ouverte, cette fonction ne fait rien.

Arguments:

  • aucun

Retour :

  • void

Exemple

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

closeChat

Cette fonction ferme la discussion. Appelez-la sur l'élément df-messenger-chat-bubble pour fermer la discussion. Si la discussion est déjà fermée, cette fonction ne fait rien.

Arguments:

  • aucun

Retour :

  • void

Exemple

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

openMinChat

Chat réduit Dialogflow CX Messenger

Cette fonction ouvre la fenêtre de discussion dans une version réduite. Appelez-la sur l'élément df-messenger-chat-bubble pour ouvrir la discussion réduite. Si la discussion est déjà réduite, cette fonction ne fait rien.

Arguments:

Nom Type Description
args object? Argument facultatif permettant de configurer la discussion réduite.
args.anchor string? anchor facultatif permettant de configurer l'emplacement d'ouverture de la discussion réduite. Même logique que l'attribut anchor de l'élément de bulle de discussion. La valeur par défaut est left-top.
args.showActorImages boolean? Indicateur facultatif permettant d'afficher les images des acteurs (si elles sont spécifiées dans l'élément df-messenger-chat-bubble). Valeur par défaut : "false".

Exemple :

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

closeMinChat

Ferme la discussion réduite. Appelez-la sur l'élément df-messenger-chat-bubble pour fermer la discussion réduite. Si la discussion est déjà fermée, cette fonction ne fait rien.

Exemple :

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