JavaScript Dialogflow CX Messenger

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

renderCustomText

Cette fonction affiche un message, comme s'il provenait de l'agent ou s'il avait été saisi par l'utilisateur.

Arguments :

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

Renvoie :

  • 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 du fulfillment Dialogflow CX.

Arguments :

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

Renvoie :

  • 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. Cela simule une entrée d'utilisateur final qui est normalement fournie à la boîte de dialogue de l'agent. Le système gère la réponse comme n'importe quelle requête d'utilisateur final.

Arguments :

  • string : requête textuelle

Renvoie :

  • Promise<void> : valeur de retour de 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, accepte query (voir aussi sendQuery précédent) et event (voir événement personnalisé)
  • any : charge utile correspondant au type de requête, qui est une chaîne pour les deux types de requêtes compatibles.

Renvoie :

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

Exemple :

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

setQueryParameters

Cette fonction définit les valeurs par défaut du champ queryParams 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 connaître le schéma des paramètres de requête, consultez QueryParameters.

Renvoie :

  • 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 de l'utilisateur final à Dialogflow CX. Ces informations sont conservées pendant le reste de la session.

Arguments :

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

Renvoie :

  • 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, il conserve l'état d'authentification de l'utilisateur. Vous pouvez utiliser l'option facultative args pour personnaliser ce comportement.

Arguments :

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

Renvoie :

  • 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

Renvoie :

  • 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, il efface l'historique des messages, mais conserve l'état d'authentification de l'utilisateur. Personnalisez ce comportement à l'aide du paramètre facultatif args.

Arguments :

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

Renvoie :

  • void

Exemple :

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

openChat

Appelez cette fonction sur l'élément df-messenger-chat-bubble pour ouvrir le chat. Il ne se passe rien si le chat est déjà ouvert.

Arguments :

  • aucun

Renvoie :

  • void

Exemple :

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

closeChat

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

Arguments :

  • aucun

Renvoie :

  • void

Exemple :

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

openMinChat

Chat réduit Dialogflow CX Messenger

Vous pouvez ouvrir la fenêtre de chat dans une version réduite en appelant cette fonction sur l'élément df-messenger-chat-bubble. Cette fonction n'a aucun effet si le chat est déjà réduit.

Arguments :

Nom Type Description
args object? Argument facultatif permettant de configurer le chat réduit.
args.anchor string? anchor facultatif pour configurer l'emplacement d'ouverture du chat réduit. 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? Option facultative 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

Appelez cette fonction sur l'élément df-messenger-chat-bubble pour fermer le chat réduit. Elle n'a aucun effet si le chat est déjà fermé.

Exemple :

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