How to replace my existing webform with a shiny Quriobot?

Quriobot allows a way of integration that makes it totally transparent: it’s your user’s (personal) data and your storage or endpoint which will receive the data.

Privacy: No data will be stored on the Quriobot side in this case, as the data might be sensitive, for example, contain passwords.

Quriobot will be executed in the context of your webpage so it can also be placed in the auth-protected pages and call endpoints that are not public.

Replacing webforms with a conversational interface like Quriobot brings in an additional challenge: validation.

Quriobot is ready for this and allows to properly inform a user about the errors sending the data to your endpoint so a user can re-answer to the bot steps which have errors.

Here is the example of the Quriobot integration in the way it replaces the registration form. This assumes you have a JSON endpoint /register which receives firstName, lastName, email, and password fields.

You can add the following code as Advanced Initialization option code on the Advanced tab (at the bottom of the middle ‘Behaviour’ column):

{
    onSave: function(results) {
         // skip saving as it will happen in onValidate
    },
    onValidate: function(results, callback) {
        // no results, nothing to do and it's not valid
        if(!results){
            callback(false, {});
        }
        // prepare answers data by the step index (startsing from 1)
        var answersByIndex = {};
        results.answers.forEach(function(item) {
            answersByIndex[item.question.index] = {
                id: item.question.id,
                value: item.value.value,
                text: item.text && item.text.answers_text ? (typeof item.text.answers_text === "object" ? item.text.answers_text[0] : item.text.answers_text).toString().trim() : ""
            }}
        );
        // prepare POST data
        var data = {
            firstName: answersByIndex[1].value,
            lastName: answersByIndex[2].value,
            email: answersByIndex[3].value
            password: answersByIndex[4].value
        }
        // performing ajax POST call to the register endpoint
        quriobot.ajax('/register', function(responseText) {
            var response = JSON.parse(responseText);
            if (response.errors.email) {
                var errors = {
                    // setting errors for the 3rd step
                    [answersByIndex[3].id]: ["Sorry..", response.errors.email, "Can you please update this?"]
                }
                var responses = {
                    // setting responses for the 3rd step, when person re-entered the answer
                    [answersByIndex[3].id]: "Thank you!"
                }
                // validation not passed, sending errors and responses
                callback(false, errors, responses)
            } else if (response.errors.password) {
                var errors = {
                    // setting errors for the 4th step
                    [answersByIndex[4].id]: ["Sorry..", response.errors.password, "Can you please update this?"]
                }
                var responses = {
                    // setting responses for the 4th step, when person re-entered the answer
                    [answersByIndex[4].id]: "Thank you!"
                }
                // validation not passed, sending errors and responses
                callback(false, errors, responses)
            } else {
                // validation passed
                callback(true);
            }
        }, data)
    }
}

Edit this page