Project Study

Call | Answering

VueJS + Vuex | SCSS | Firebase | API's

Overview

If you don't answer every call coming into your business, you’re losing potential leads and losing customers. CallAnswering will answer every call so you'll capture every lead and have the opportunity to speak to every potential customer. Having a professional virtual receptionist presents a far better image to callers than an answering machine.

With CallAnswering providing this exact virtual reception service, I was tasked to develop modern, elegant, smooth & user friendly dashboard for virtual receptionist's. Dashboard helps receptionist's to generally track their calls, provides detailed statistics with average values for receptionist answering time, provide missed calls, calls per day etc. Aside of that, receptionist's are able to connect their calendar provider with CallAnswering, update to-dos, add & manipulate contacts, track their billing data (ranging from budget, invoices & plans), update their account & preferences etc.

Majority of the application (dashboard) was developed using modern standards on front-end side. SCSS was used as a pre-processor, as it provides a lot of benefits, such as Nestings, mixins, variables, modularity & readability. In conclusion, it's a clean way to write styles. Majority of the applicaton also relies on Flexbox. Making each page responsive with that "smooth" feel & vibe. CSS Grid is also being used on some of the pages that have abstract amount of elements (pages such as contacts & team).

Overall features: Detailed statistics of receptionist's calls, Integrated calendar with Nylas (Google, Azure, iCloud), To-Do's, Calls (Ability to make calls directly from dashboard), Admin preferences, Adding FAQs & Knowledgeable Documents, Integrated contacts with Nylas (Google, Azure, iCloud), Teams, Call Types, Billing (Budget, Invoices, Subscription/Plans).

Stack

VueJS -

SFC, Vuex, Vue router, Vue compatible libraries

SASS/SCSS -

Mixins, Nesting, Variables, much more readable code

Firebase -

Cloud functions, Enriched database, Cloud firestore

Libraries & APIs -

Nylas, Elastic Search, KillBill, Filepond..
 

Features

CallAnswering Dashboard View | AndreasDEV

Dashboard View

Offers statistical view of calls based on selected period. Includes latest calls data & integrated global dialer.

For chart view of calls data, I implemented chart plugin called apexcharts which is compatible with Vue. User is able to switch chart between Yearly, Monthly, Weekly & Quarterly view. Chart data is being updated each time new call is made, answered or missed. Apexcharts plugin offers plenty of flexibility, which means number of charts integrated in one block is unlimited (and it still remains fast & optimized, even with 50+ charts!).
Latest calls component is presenting most recent calls made or answered. It is connected with in-house made API. Receptionist's can quickly navigate to specific call from dashboard simply by clicking on call they want to see details of.

CallAnswering Calendar View | AndreasDEV

Integrated Calendar

Receptionist's are able to connect calendar with other calendar providers such as Google, Azure or iCloud. Powered by Nylas.

From receptionist point of view, calendar is an important tool. Making appointments, adding events & pushing events back and forth on calendar from dashboard makes things much more organized. User's are able to connect callanswering calendar with Google, Azure or iCloud providers. Calendar was integrated with devExtreme plugin, which is very compatible with Vue. devExtreme Calendar plugin gives us, developers, detailed documentation, straightforward implementation & easy connection with any API. Plugin is enriched with user friendly UI with options to choose when created event will start & end. User's are also able to Update, Delete & GET specific events.
Nylas was integrated in order to make connection with Google, Microsoft Azure & iCloud easier and simplified. Nylas is great service, providing fine documentation, also, it's easy integratable to any project & it's authentication with 3rd party providers is modern, following current standards.

CallAnswering Plans View | AndreasDEV

Transaction Processing & Subscriptions

In-house developed transaction processing functionality offering range of plans for users to pick from.

Transaction processing was made by back-end team making it in-house built functionality. There was a discussion about integrating 3rd party service such as Stripe instead, even if project manager did greenlight it, decission was made to create in-house functionality in order to provide more flexibility and freedom.
On plans page, user's are able to select most compatible plan for them, purchase it, receiving all of the benefits to that related plan as shown on plan blocks. User's are also able to upgrade or downgrade their plans, as well as cancel it.

CallAnswering FAQs View | AndreasDEV

Business FAQs & Knowledgeable Documents

Ability for receptionists to add FAQs & Documents. Supported with search functionality powered by Elastic search.

When receptionist's answer their daily calls, clients tend to leave multiple questions and / or documents. For this exact reason we decided to create a page intended to deal with client FAQs and documents. Main intent of Knowledge page is ability to upload FAQs and documents to DB & Elastic search, with ease. This is done by smooth UX and clean UI modals. Both FAQs and Docs are being uploaded to Elastic Search.
Plain process of these two functionalities is simple. Receptionist uploads FAQ or Document to elastic search database, where it is stored. Likewise, FAQs & Docs are being fetched from elastic database. All of these methods (GET, POST, PUT, DELETE) are purely done on front-end using axios library for API calls combined with Vuex (it's state, actions, getters, mutations).

CallAnswering FAQs Search View | AndreasDEV

Search functionality is "global", meaning it searches both FAQs & Docs with single keyword. It is also a deep search, meaning it searches element's description, instead of it's name only. Using the power of elastic search in this example, we created flexible search system that goes through both FAQs and documents and returns specific demanded results. In translation, instead of having two search fields, one for FAQs and other for documents, we ended up having only one search field for both elements. Elastic search API makes this possible as it is a very powerful asset.

CallAnswering Contacts | AndreasDEV

Contacts

Receptionist's are able to create contacts from application or connect their account with other services and integrate already existing contacts to CallAnswering.

When receptionist receives a anonymous call, they'll have the ability to add this unknown contact to their list of contacts soon after hanging up. Contacts are being stored on CallAnswering's database & on one of the service providers that user has connected, with CallAnswering (Google, Azure, iCloud). When adding a new contact, receptionist is able to add variety of details as well, such as email address, phone number, company name, upload image, location etc. From contacts page, receptionist's are able to directly ring the contact, send contact an email or add an appointment to the calendar. We called this process "3 in 1" as it provides multiple functionalities from one single block on contacts page.

 

Conclusion

CallAnswering is web application enriched with user friendly UI & plenty of helpful implemented functionalities. With correct integration of multiple plugins & services, it delivers set of tools that every virtual receptionist would like to have in front of them while working from comfort of their home. Application is still in process of development, which means more interesting features will be coming up, giving receptionist even more flexibility, dynamics & freedom.