JavaScript Dialogflow Messenger

Dialogflow Messenger offre fonctions que vous pouvez appeler pour modifier son comportement.

renderCustomText

Cette fonction affiche un message texte simple, comme s'il provenait de l'agent, sous la forme d'une simple réponse textuelle ou si l'utilisateur final l'a saisie.

Arguments :

  • string: SMS
  • 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 s'il provenait du fulfillment Dialogflow.

Arguments :

  • payload: liste de réponses de charge utile personnalisée, définies dans le Fulfillment.

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 l'entrée de l'utilisateur final qui est normalement fournie à la boîte de dialogue de l'agent. La réponse sera traitée comme toute requête d'utilisateur final.

Arguments :

  • string: requête textuelle

Retour:

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

Arguments :

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

Arguments :

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

Retour:

  • void

Exemple :

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

setContext

Cette fonction envoie personnalisation générative des informations sur l'utilisateur final à Dialogflow. Ces informations seront conservées jusqu'à la fin de la session.

Arguments :

  • object: données JSON (voir 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.

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 lance une nouvelle session dans la boîte de dialogue de l'agent. Elle peut soit garder ou réinitialiser l'historique actuel des messages. Elle n'efface pas les utilisateurs l'authentification unique.

Arguments :

Nom Type Description
args object? Argument facultatif permettant de configurer la création de la session.
args.retainHistory boolean? Indicateur facultatif permettant de conserver l'historique. Si cette règle est définie sur "True", l'historique est conservé, sans quoi il est effacé.

Retour:

  • void

Exemple :

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

openChat

Cette fonction ouvre le chat. L'appeler au niveau de 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. L'appeler au niveau de l'élément df-messenger-chat-bubble pour fermer le chat. 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

Fonctionnalité de chat Dialogflow Messenger réduite

Cette fonction permet d'ouvrir la fenêtre de chat en version réduite. Appelez-le au df-messenger-chat-bubble pour ouvrir la fenêtre de chat réduite. N'a aucun effet si le chat est déjà réduit.

Arguments :

Nom Type Description
args objet ? Argument facultatif pour configurer le chat réduit
args.anchor chaîne ? Facultatif anchor pour configurer l'emplacement où la fenêtre de chat réduite est ouverte. Même logique que l'attribut anchor sur l'élément de bulle de chat. La valeur par défaut est left-top.
args.showActorImages boolean? Indicateur facultatif permettant d'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 dans l'élément df-messenger-chat-bubble pour fermer la fenêtre de chat réduite. N'a aucun effet si le chat est déjà fermé.

Exemple :

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