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).
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.
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.
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.
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).
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.
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.
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.