Scroll to top

Case Study: How We Created Smart Widget For Bank Website

Maryna Cherednychenko - January 28, 2021 - 5 comments

Business process automation (BPA) makes companies more flexible and agile. It sets the right balance between human and robotic labor, allowing each party to perform tasks they do best. BPA touches nearly every side of business activity. However, the most significant impact is observed in customer care. 

According to Gartner, 70% of human agents will work side by side with AI-powered platforms by 2022. This is not surprising. Smart technologies show good results in interacting with clients. They quickly assist in simple queries, allowing humans to focus on more creative tasks.

This post will share the results of work on creating an AI-based widget for a European bank website. It allows users to quickly learn about bank products and contact an operator if necessary.

Project Goal

The project’s goal is to automate the answers to standard questions and provide a better user experience. For this purpose, we develop a widget for a bank site that contains the most popular requests and responses to them. Except for predefined answers, the widget generates replies to non-standard questions using built-in smart technologies. Thus, users have quick access to information and can easily understand banking products. 

It is expected the solution will cover 85-90% of user queries and reduce the contact center load. Upon achieving such a result, the bank will significantly improve service quality and increase customer satisfaction. Human agents will pay more attention to non-trivial cases and resolve complex issues faster.

How Widget Works

By and large, the widget is a modern representation of the knowledge base. It is placed on the site page, so the user does not have to go elsewhere to search for the question of interest. The widget has user and admin interfaces. Let’s see how it works.


Bank website widget

Widget on the bank website

User Interface

When on the site, the user opens the widget and sees a list of popular questions. The questions list depends on the page the user is currently on. For example, the main page contains such questions as “How to replenish the card?” or “How to find out the account details?” The loans page displays the following queries: “What are the mortgage lending conditions?” or “What documents do I need for a cash loan?”


FAQ banking

Website widget displays FAQ


If the needed question is not on the list, the user can enter it manually. Smart algorithms will look for the matching information and generate the answer shortly.


User can enter question manually

User can enter question manually


After receiving an answer, the user can rate it. For that, they should choose a positive or negative emoji. The system collects statistics of questions’ views and ratings. The most popular ones are displayed on top.


User can rate the answer

User can rate the answer


The search history of each client is saved. So, when they open the widget the next time, they will see the previously viewed requests.

If the user does not find a suitable answer or needs a follow-up consultation, they can enter the chat with a human agent through one of the three instant messengers – Telegram, Viber, Facebook. If none of the above apps is installed on the user’s device, the messenger’s web version will open.


Contact operator in messenger

User can contact operator in messenger

Admin Interface

In the admin panel, the user can create, edit, or delete categories and questions. To create a new category, the admin should specify its name and insert a link to the site’s page where it will be located. For a new question, the admin should enter the info text and mark it with one or more categories.


Admin side of the widget

Admin side of the widget


The admin can view the question’s statistics: the number of clicks, positive and negative reviews, the total number of ratings, etc. Based on this data, they update the posted questions to be more informative for clients.

Technologies In Use

To develop the widget, we used different technologies with a focus on speed and accuracy. The right choice of tech stack helped us achieve an excellent result: our smart widget responds correctly and quickly to customer requests and switches to live chat when necessary. Below, I list the primary technologies in use.

Backend – Go. Golang is a statically typed, compiled programming language widely used for highly loaded systems. Go has a strong concurrency thanks to goroutines. Each goroutine is very light and short, so you can run millions of them at once to keep your system working smoothly even during peak loads. Considering the widget should serve thousands of user requests daily, we opted for Go to ensure the ongoing glitchless operation.

Frontend – JS, React, Redux, SharedWorker, HTML5, CSS3, Sass. HTML, CSS, and JavaScript are a standard set of tools for creating an app frontend. The React library helps build interactive UIs nicely and easily. Redux supplies a container for JavaScript apps, which allows them to run in different environments. A SharedWorker is a special kind of worker that can be accessed from multiple browser contexts, such as multiple windows, iframes, or other workers. Finally, Sass is an advanced CSS extension for quick styling.

Smart search – Elasticsearch. Elasticsearch is an AWS product that quickly generates the right answers to user questions. When a client enters a request, Elasticsearch compares it by letter, then by word, then by a phrase in the database. After that, it issues a response that matches the user’s request. Thus, the client can quickly access information even if it is not on the predefined questions list.


Tech stack for Ecobank widget

Tech stack used to develop widget


The smart widget for the banking website covers the lion’s share of the user’s requests. Its database contains a large number of frequently asked questions and detailed answers with step-by-step instructions. If the faced issue is not on the list, the user can use smart search and quickly get the necessary information. Thus, human operators get free from routine, repetitive tasks. Instead, they can carefully deal with complex problems that require research, testing, and taking non-trivial decisions.

At the moment, the widget is at the final testing stage. It will soon be released into production and deployed on the bank’s website. After that, we will start developing the mobile version and launch the same widget in the Ecobank mobile app.

Related posts


  1. takipçi satın al

    Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to more added agreeable from you! By
    the way, how could we communicate?

  2. 東京 当たる 占い師

    Hello I am so glad I found your web site, I really found you by error,
    while I was researching on Yahoo for something else, Regardless I
    am here now and would just like to say thanks for a
    tremendous post and a all round interesting blog (I also love the theme/design), I
    don’t have time to browse it all at the moment but I have
    book-marked it and also added your RSS feeds, so when I have time I will be back
    to read more, Please do keep up the awesome b.

  3. Automation accessories

    Appreciating the dedication you put into your blog and detailed information you offer.
    It’s great to come across a blog every once in a while that
    isn’t the same outdated rehashed information. Great read!
    I’ve saved your site and I’m adding your RSS feeds to my
    Google account.

  4. 안전놀이터추천

    Greetings! Very useful advice in this particular post!
    It is the little changes that produce the largest changes.

    Thanks for sharing!

Post a Comment

Your email address will not be published. Required fields are marked *