Account finder tools are often used by clients to guide their users to an account that may be useful to them. They are made up of several pieces–a set of divs containing questions & answers, and an array that displays a div for the final result.
There are A LOT of different account finder setups. This page, for now, will focus in on the most basic setup for account finders. See the list of example sites below for other setups, and if you think a new setup needs to be added, feel free to do so!
How To
Script
Often the account finder setup is simple enough that you can include it in the script.js file, but sometimes there’s just so much that it makes it easier/cleaner to include the account finder in its own js file, and then include that file in the scripts > plugins folder.
The explanation of script will be different from many other snippets in that I’ll be breaking it into pieces to explain it. Most account finders will use the same basic pieces, but there will be some customization involved, so it’s not as simple of a copy-and-paste as the other snippets.
This example is pulled from Neighborhood Credit Union, since it was the most common type out of the example sites.
This chunk of script is the basic function that happens when a user chooses an answer. It removes the “checked” class from any of the others, and applies it to the one you clicked. It also hides the “error” class that may have showed if you tried to go to the next question without choosing any answer at all.
$('.account-finder .question-checks .answer').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).siblings('.answer').removeClass('checked');
$(this).addClass('checked');
$(this).siblings('.accountfinder-error').addClass('hide');
});
This sets up the basic answer of arrays. It’s not necessarily required to have “null” for all of them, I just find that it helps me keep track to have something in place for the number of answers that there are.
var ans = [null, null, null, null, null, null, null]
An example “next” button on the first page. The question being asked is included in a comment for ease of use.
When the next button is clicked, it reads which div has a class of “checked”, of the two possible answers. Depending on which one it is, a value is added to the array, the first question is hidden, and the next question is shown. Note that also depending on which answer is chosen, the question that is shown may change when you click next. This will depend on the spreadsheet of questions/answers provided by the client.
Lastly, if “next” is clicked but no answer has a class of “checked”, the error class is shown to ask people to choose an answer.
$('.account-finder .question-1 .next').click(function(e) { // What type of account are you interested in?
e.preventDefault();
e.stopPropagation();
if($('.question-1 .question-checks .everyday-checking').hasClass('checked')) {
ans[0] = "Everyday Checking";
$('.question-1').addClass('hide');
$('.question-2').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
} else if($('.question-1 .question-checks .savings').hasClass('checked')) {
ans[0] = "Savings";
$('.question-1').addClass('hide');
$('.question-5').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
} else {
$('.account-finder .accountfinder-error').removeClass('hide');
}
});
This is an example “back” button. It removes the previously set answer from the array, and moves you to the previous question. The error is also hidden.
$('.account-finder .question-2 .back').click(function(e) {
e.preventDefault();
e.stopPropagation();
ans[1] = null;
$('.question-2').addClass('hide');
$('.question-1').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
$('.question-2 .question-checks .answer').removeClass('checked')
});
This is an example “next” button from later in the account finder. For the first checked option, it moves to the next question just like above. But for the other one, it sets a value in the array and then displays the recommendation divs based on the values in the array.
$('.account-finder .question-3 .next').click(function(e) { // What's more important to you?
e.preventDefault();
e.stopPropagation();
if($('.question-3 .question-checks .free-checking-and-atm-refunds').hasClass('checked')) {
ans[2] = "Free Checking & ATM Refunds";
$('.question-3').addClass('hide');
$('.question-4').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
} else if($('.question-3 .question-checks .identity-and-fraud-protection').hasClass('checked')) {
ans[2] = "Identity & Fraud Protection";
$('.question-3').addClass('hide');
displayResults();
$('.recommendation').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
} else {
$('.accountfinder-error').removeClass('hide');
}
});
This is an example “back” button from later in the account finder. For some options, it goes to the previous question numerically, but for some more complex account finders, it may need to bring you back to a specific question depending on the path you took to get there.
$('.account-finder .question-3 .back').click(function(e) {
e.preventDefault();
e.stopPropagation();
ans[2] = null;
$('.question-3').addClass('hide');
$('.question-2').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
$('.question-3 .question-checks .answer').removeClass('checked')
});
$('.account-finder .question-4 .next').click(function(e) { // What features would be most helpful to you?
e.preventDefault();
e.stopPropagation();
if($('.question-4 .question-checks .earning-high-yield-interest').hasClass('checked')) {
ans[3] = "Earning High Yield Interest";
$('.question-4').addClass('hide');
displayResults();
$('.recommendation').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
} else if($('.question-4 .question-checks .monthly-cash-rewards').hasClass('checked')) {
ans[3] = "Monthly Cash Rewards";
$('.question-4').addClass('hide');
displayResults();
$('.recommendation').removeClass('hide');
$('.account-finder .accountfinder-error').addClass('hide');
} else {
$('.accountfinder-error').removeClass('hide');
}
});
This is the functionality of a restart/start-over button. It sets the value of all answers in the array to null, removes the “checked” class from all answers, hides all the recommended answer classes, and then shows the first question.
// Restart Button
$('.btn-restart').on('click',function(e) {
e.preventDefault();
e.stopPropagation();
ans[0] = null;
ans[1] = null;
ans[2] = null;
ans[3] = null;
ans[4] = null;
ans[5] = null;
ans[6] = null;
$('.account-finder').find('.answer').removeClass('checked');
$('.recommendation').addClass('hide');
$('.recommendation .recArea1').addClass('hide');
$('.recommendation .recArea2').addClass('hide');
$('.recommendation .recArea3').addClass('hide');
$('.recommendation .recArea4').addClass('hide');
$('.recommendation .recArea5').addClass('hide');
$('.recommendation .recArea6').addClass('hide');
$('.recommendation .recArea7').addClass('hide');
$('.recommendation .recArea8').addClass('hide');
$('.recommendation .recArea9').addClass('hide');
$('.recommendation .recArea10').addClass('hide');
$('.recommendation .recArea11').addClass('hide');
$('.recommendation .recArea12').addClass('hide');
$('.recommendation .recArea13').addClass('hide');
$('.recommendation .recArea14').addClass('hide');
$('.recommendation .recArea15').addClass('hide');
$('.account-finder .question-1').removeClass('hide');
});
This is an example of the if/else statement that defines what happens based on the values in the array. There are multiple sets of answers, with one array for each, and the recommendation divs are shown based on what answers were given.
At the very end, in the “else” statement, there is a console.log to say if no results were prepared for a specific set of answers. This is very helpful for debugging and finding answer sets that the client may not have thought of.
// Results
function displayResults () {
if(hasAnswers("Everyday Checking", "Reward Checking", "Free Checking & ATM Refunds", "Earning High Yield Interest", null, null, null)) {
$('.recommendation .recArea3').removeClass('hide');
} else if(hasAnswers("Everyday Checking", "Reward Checking", "Free Checking & ATM Refunds", "Monthly Cash Rewards", null, null, null)) {
$('.recommendation .recArea4').removeClass('hide');
} else if(hasAnswers("Everyday Checking", "Reward Checking", "Identity & Fraud Protection", null, null, null, null)) {
$('.recommendation .recArea2').removeClass('hide');
} else if(hasAnswers("Everyday Checking", "Second Chance Checking", null, null, null, null, null)) {
$('.recommendation .recArea1').removeClass('hide');
} else if(hasAnswers("Savings", null, null, null, "Earning High Yield Interest", "No", "Less Than 12 Months")) {
$('.recommendation .recArea10').removeClass('hide');
$('.recommendation .recArea11').removeClass('hide');
$('.recommendation .recArea12').removeClass('hide');
$('.recommendation .recArea16').removeClass('hide');
} else if(hasAnswers("Savings", null, null, null, "Earning High Yield Interest", "No", "Greater Than 12 Months")) {
$('.recommendation .recArea13').removeClass('hide');
$('.recommendation .recArea14').removeClass('hide');
$('.recommendation .recArea15').removeClass('hide');
$('.recommendation .recArea16').removeClass('hide');
} else if(hasAnswers("Savings", null, null, null, "Earning High Yield Interest", "Yes", null)) {
$('.recommendation .recArea3').removeClass('hide');
$('.recommendation .recArea8').removeClass('hide');
$('.recommendation .recArea9').removeClass('hide');
$('.recommendation .recArea16').removeClass('hide');
} else if(hasAnswers("Savings", null, null, null, "Everyday Savings", null, null)) {
$('.recommendation .recArea5').removeClass('hide');
$('.recommendation .recArea6').removeClass('hide');
} else if(hasAnswers("Savings", null, null, null, "Savings With Rewards", null, null)) {
$('.recommendation .recArea5').removeClass('hide');
} else if(hasAnswers("Savings", null, null, null, "Kids Savings", null, null)) {
$('.recommendation .recArea7').removeClass('hide');
} else {
console.log('no answers prepared.');
}
}
This is the function to decide the answer. In general it will stay the same as long as you are using the array-based setup.
function hasAnswers() {
while( ans.length < arguments.length ){
ans.push(null);
}
for( var i = 0; i < ans.length; i++ ){
if( ans[i] != null && arguments[i] != null ){
var s = arguments[i];
if( s.indexOf( ans[i] ) < 0 ){
return false;
}
} else if( ans[i] != arguments[i] ){
return false;
}
}
return true;
}
Example Sites
- Neighborhood Credit Union (Probably the most basic / most normal one)
- Bar Harbor Bank & Trust (2020 Remake) (Similar to Neighborhood, pretty basic but with some customization!)
- Limestone Bank (Super basic, JS-only, no arrays)
- Busey Bank (Insane, all options visible at start that you turn on/off with toggles)
Tags: bs2,bs3, bs4, account finder, script, js javascript, html