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 textuel, comme s'il provenait de l'agent en tant que réponse textuelle simple ou s'il a été saisi par l'utilisateur final.

Arguments :

  • string: message texte
  • boolean : "true" pour un message de l'agent, "false" pour 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 l'exécution Dialogflow.

Arguments :

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

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 et attend la réponse. Cela simule efficacement une entrée utilisateur final qui est normalement fournie à la boîte de dialogue de l'agent. La réponse sera traitée comme n'importe quelle requête d'utilisateur final.

Arguments :

  • string: requête textuelle

Retour:

  • Promise<void>: valeur renvoyée par 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 et attend la réponse.

Arguments :

  • string: type de requête, compatible avec query (voir également 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 renvoyée par 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 champ queryParams de la requête detectIntent de l'API Dialogflow. D'autres méthodes Dialogflow CX Messenger peuvent remplacer les valeurs par défaut respectives dans les paramètres de la requête.

Arguments :

  • object: données JSON. Pour obtenir 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 sur l'utilisateur final à Dialogflow. Ces informations seront conservées jusqu'à la fin 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 l'espace de stockage persistant de la boîte de dialogue de l'agent. Il efface également l'état actuel de la boîte de dialogue de l'agent.

Arguments :

  • aucun

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. Il peut conserver ou réinitialiser l'historique des messages actuel. Il n'efface pas l'authentification des utilisateurs.

Arguments :

Nom Type Description
args object? Argument facultatif permettant de configurer la création de la session.
args.retainHistory boolean? Indicateur facultatif pour conserver l'historique. Si cette valeur est définie sur "true", l'historique est conservé. Dans le cas contraire, il est effacé.

Retour:

  • void

Exemple :

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

openChat

Cette fonction ouvre le chat. Appelez-le sur l'élément df-messenger-chat-bubble pour ouvrir le chat. N'a aucun effet si le chat est déjà ouvert.

Arguments :

  • aucun

Retour:

  • void

Exemple :

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

closeChat

Cette fonction ferme le chat. Appelez-le sur l'élément df-messenger-chat-bubble pour fermer le chat. Cette commande n'a aucun effet si le chat est déjà fermé.

Arguments :

  • aucun

Retour:

  • void

Exemple :

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

openMinChat

Chat minimisé Dialogflow CX Messenger

Cette fonction ouvre la fenêtre de chat dans une version réduite. Appelez-le sur l'élément df-messenger-chat-bubble pour ouvrir le chat réduit. Aucune action n'est effectuée si la discussion est déjà réduite.

Arguments :

Nom Type Description
args objet ? Argument facultatif pour configurer la discussion réduite
args.anchor chaîne ? anchor facultatif pour configurer l'emplacement d'ouverture de la discussion réduite. Même logique que l'attribut anchor de l'élément bulle de discussion. La valeur par défaut est left-top.
args.showActorImages booléen ? Indicateur facultatif pour afficher les images des acteurs (si spécifié 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 le chat réduit. Appelez-le sur l'élément df-messenger-chat-bubble pour fermer la discussion réduite. Cette commande n'a aucun effet si le chat est déjà fermé.

Exemple :

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