Concept

Voici les différents concepts à comprendre pour appréhender correctement le framework.

  1. Message du bot
  2. Message de l'humain
  3. Boutons
  4. Champs de texte
  5. Dropdown
  6. Utilisation de then
  7. Variables

Message du bot

BotFrame permet d'afficher des messages sous forme de bulle de dialogue à la façon d'un chat ou de textos.

Les messages qui proviennent de BotFrame sont alignés à gauche avec une couleur de fond en bleu.

Le développeur a le contrôle total sur les messages qui s'affichent et sur le contenu des messages.

Voici comment afficher le message venant du bot :

		
	bot("Bonjour, je suis BotFrame !")
		
	

Message de l'humain

Les messages qui proviennent de la personne qui interagit avec BotFrame sont alignés à droite avec une couleur de fond en gris.

Comme pour les messages du bot, c'est le programmeur qui contrôle les messages de l'utilisateur.

Pour afficher les messages de l'humain, il faut utiliser la fonction human().

					
	human("Ce message s'affichera à droite.")
					
				

Boutons

Les boutons sont des choix que BotFrame peut proposer à l'utilisateur. Chaque choix peut déclencher une action définie.

Son utilisation nécessite de définir son action, comme suit :

					
	button({
		action: [
			{
				text: "Ce texte s'affiche sur le bouton",
				value: "goNext" // lance la fonction goNext() lorsque l'utilisateur clique sur ce bouton
			},
			{
				text: "Un autre bouton",
				value: "goPrev"
			}
		]
	})
					
				

Champs de texte

BotFrame vous offre la possibilité d'afficher un champ texte (de type input) à l'utilisateur.

Le contenu du champ texte peut ensuite être récupéré pour affichage ou pour un traitement, par exemple la récupération d'une adresse mail, d'un nom.

Son utilisation se fait grâce à la fonction input().

					
	// Name du champ input / Placeholer / Function à lancer lors de la validation
	input("nom", "Votre prénom", "nom")
					
				

Si vous voulez afficher une liste déroulante, BotFrame vous en offre la possibilité très simplement.

De plus, lors de la sélection de l'option, BotFrame fait appel à la fonction désirée et récupère le résultat du choix.

Son utilisation est pratiquement similaire à button().

					
	dropdown({
		action: [
			{
				text: "Contenu du choix",
				value: "valeurDuChoix"
			},
			{
				text: "Deuxième choix à sélectionner",
				value: "deuxiemeChoix"
			}
		]
	}, "fonctionAAppeler")
					
				

Utilisation de then

Dans la majorité des cas, vous souhaitez certainement afficher les messages les uns après les autres, ou après qu'une action ait été effectuée.

Pour faire cela, nous avons besoin d'avoir un callback pour déclencher l'action suivante. C'est précisément ce que then fait pour vous.

Vous pouvez définir les actions à effectuer après un callback à l'intérieur d'un then.

Voici comment l'utiliser :

					
	bot("Message de BotFrame")
	.then(function(){
		return bot("Ce message s'affiche juste après le précédent.")
	})
	.then(function(){
		return human("Ce message s'affiche encore après.")
	})
	.then(function(){
		return button({
			action: [
				{
					text: "Vous pouvez également chainer les boutons",
					value: "goNext"
				}
			]
		})
	})
					
				

Variables

Vous pouvez définir des variables pour régler les temps d'attente afin de faire apparaitre les bulles de conversation.

Vous avez la possibilité d'intégrer BotFrame à l'intérieur d'une page, ou de créer une page spécifique au framework.

Afin de régler le scroll automatique de la conversation, vous aurez besoin de régler la variable els.

Si vous intégrez BotFrame dans une page, vous devez régler la variable à true. Dans le cas contraire, vous pouvez laisser la variable par défaut.

Pour pouvoir effectuer un scroll directement sur BotFrame intégré dans une page, vous devez spécifier dans votre CSS sur l'identifiant botframe : overflow-y:scroll;.

					
	// Effectue un scroll directement sur BotFrame
	var els = true;
					
				

Si vous souhaitez que tous les messages apparaissent avec le même délai d'attente, vous pouvez régler la variable delayDefault.

					
	var delayDefault = 1500; // Délai de une seconde et demie avant affichage des messages