J'ai commencé cela comme un projet parallèle et il a pris vie, avec de nombreuses personnes qui y voient différentes utilisations, d'une manière complètement différente de ce qu'il était censé faire à l'origine. Je pourrais dans un avenir incertain refaire cela à partir de zéro pour atteindre ces possibilités, mais actuellement je n'ai pas assez de temps pour travailler là-dessus, désolé. Si vous souhaitez aider avec quoi que ce soit, n'hésitez pas à ouvrir des demandes de tirage.
Un plugin qui transforme un formulaire en chat interactif.
Caractéristiques:
Pour créer le chat, enveloppez simplement le formulaire dans un élément et appelez .convform() sur son sélecteur jquery.
Exemple:
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;
Pour que le plugin sache quelle question poser, chaque entrée et sélection doit avoir un attribut data-conv-question. Exemple:
< select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
< option value =" yes " > Yes option >
< option value =" sure " > Sure! option >
select >
Si vous le souhaitez, vous pouvez écrire plusieurs questions pour chaque balise, en utilisant pipe | pour les séparer. Le plugin en choisira un au hasard à utiliser à chaque fois que le chat est généré. Exemple:
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >
Vous pouvez utiliser des modèles d'expression régulière sur les entrées, utilisez simplement l'attribut data-pattern sur la balise. Lorsque l'utilisateur tape une réponse, si elle ne correspond pas au modèle, il ne peut pas l'envoyer et la couleur d'entrée devient rouge. Exemple:
< input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >
Vous pouvez lancer la conversation et poser des questions spécifiques en fonction de la réponse de l'utilisateur. Cela ne fonctionne que lors de la bifurcation à partir de sélections.
Pour ce faire, vous devez mettre une balise div après la question à partir de laquelle vous souhaitez bifurquer la conversation, avec une balise data-conv-fork portant le nom de la sélection.
À l'intérieur de ce div, vous devez créer des balises div avec l'attribut data-conv-case faisant référence à la réponse qui redirigera la conversation vers ses éléments enfants.
< select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
< option value =" yes " > Yes option >
< option value =" no " > No option >
select >
< div data-conv-fork =" programmer " >
< div data-conv-case =" yes " >
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
div >
< div data-conv-case =" no " >
< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
< option value =" yes " > Yes option >
< option value =" no " > No.. option >
select >
div >
div >
Pour utiliser les réponses de l'utilisateur aux questions, vous pouvez utiliser {inputname} dans une balise data-conv-question, dans laquelle inputname fait référence à la question pour laquelle vous avez besoin de la réponse. Si vous le souhaitez, vous pouvez obtenir des mots spécifiques de la réponse en utilisant : le sélecteur (indexé à 0). Par exemple, lorsque vous avez besoin du prénom de l'utilisateur, vous pouvez utiliser {name}:0, et le plugin obtiendra le premier mot de la réponse à la question "nom". Exemple:
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >
Vous pouvez mettre des messages dans le flux de discussion. Ce sont des questions qui n’attendent aucune réponse de la part de l’utilisateur, le plugin passera donc instantanément à la question suivante. Pour ce faire, placez un attribut data-no-answer="true" sur une balise d'entrée. Exemple:
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
Vous pouvez utiliser des fonctions personnalisées à appeler lorsqu'un utilisateur clique sur une réponse dans une sélection ou à la fin de la question (si la question attend une réponse, le rappel sera appelé après la saisie de l'utilisateur. Si ce n'est pas le cas, rappelez sera appelé après l'impression du message.). Pour cela, il suffit de mettre le nom de la fonction à appeler dans l'attribut "data-callback" de la balise option, ou dans la balise input :
< select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
< option value =" google " data-callback =" google " > Google option >
< option value =" bing " data-callback =" bing " > Bing option >
select >
< script >
function google ( stateWrapper , ready ) {
window . open ( "https://google.com" ) ;
ready ( ) ;
}
function bing ( stateWrapper , ready ) {
window . open ( "https://bing.com" ) ;
ready ( ) ;
}
script >
Les fonctions de rappel sont appelées avec les paramètres stateWrapper
et une fonction de rappel ready
. Le wrapper d'état est l'objet convForm et ready est une fonction que vous DEVEZ appeler pour passer à la question suivante.
Vous pouvez ajouter un objet options en tant que paramètre à la fonction convForm, contenant :
placeHolder
: l'espace réservé que vous souhaitez voir apparaître sur la saisie de l'utilisateurtypeInputUi
: 'input' ou 'textarea', pour choisir le type d'élément html à utiliser comme entrée de l'utilisateurtimeOutFirstQuestion
: temps en ms comme durée de l'animation de chargement avant la première questionbuttonClassStyle
: classe pour le bouton de soumission de réponse de l'utilisateureventList
: un objet avec des fonctions à appeler à des moments précis, les seules supportées pour le moment sont onSubmitForm
(la fonction est appelée avec le convState comme paramètre) et onInputSubmit
(fonction appelée avec le convState comme premier paramètre, et une fonction de rappel prête pour imprimer la question suivante comme deuxième paramètre)formIdName
: identifiant html du formulaireinputIdName
: identifiant HTML pour la saisie de l'utilisateurloadSpinnerVisible
: classe pour le loadSpinnerselectInputStyle
: show
(par défaut), disable
ou hide
-- indique au plugin comment gérer le champ de saisie lorsqu'une question est une select
.selectInputDisabledText
: Le texte à afficher sur l'entrée des questions sélectionnées au cas où le selectInputStyle
est défini sur disable
. $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ;
Attention, les fonctions de rappel sont appelées à l'intérieur de la fonction onInputSubmit
. Si vous modifiez cette fonction d'événement, vous ne devriez pas avoir besoin d'utiliser des fonctions de rappel dans les balises HTML, mais si, pour une raison quelconque, vous en avez besoin, assurez-vous de les appeler ici en utilisant window[convState.current.input.callback](convState, readyCallback);