Guide

Exemple simple

Voici un exemple simple qui montre l'utilisation d'un champ texte, d'un bouton et des messages de bot et de human.

Le code

					
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Exemple simple</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="css/theme.css">
	<script src="js/botframe.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="botframe">
	<div v-for="bot in botframe" :class="bot.class">
		<div v-html="bot.message">
		</div>
	</div>
</div>
</body>
<script>
	bot("Voici un exemple simple", 500)
	.then(function(){
		return bot("Avant d'aller plus loin, quel est votre nom ?", 1500)
	})
	.then(function(){
		return input("nom", "Votre prénom", "nom")
	})

	function nom(res)
	{
		removeLast();

		var prenom = res;

		human("Je m'appelle "+prenom+".", 300)
		.then(function(){
			return bot("C'est un très beau prénom.", 1500)
		})
		.then(function(){
			return bot("Que puis-je faire pour vous ?", 1500)
		})
		.then(function(){
			return button({
				action: [
					{
						text: "Montre-moi comment tu fonctionnes !",
						value: "show"
					},
					{
						text: "Rien, merci.",
						value: "nothing"
					}
				]
			})
		})
	}


	function show()
	{
		human("Montre-moi comment tu fonctionnes !", 300)
		.then(function(){
			return bot("Je fonctionne comme ça.", 750)
		})
	}

	function nothing()
	{
		human("Rien, merci.", 300)
		.then(function(){
			return bot("Il n'y a pas de quoi.", 750)
		})
	}

</script>
</html>