Building a Phone Integration Micro Frontend: Empowering Agencies with Seamless Telephony Management

This project overviews the Phone Integration Micro Frontend, a self-contained HighLevel web app built on micro frontend architecture, managing telephony integrations and subaccounts management functionality for an Agency.

Screenshot

Technology Stack

Firebase
Firebase
GitHub
GitHub
Google cloud
Google cloud
Jenkins CI/CD
Jenkins CI/CD
Jest
Jest
Kubernetes
Kubernetes
Mongo DB
Mongo DB
Nest.js
Nest.js
Pinia
Pinia
Postman
Postman
Tailwind CSS
Tailwind CSS
Typescript
Typescript
Vue3
Vue3
Webpack
Webpack

Project Overview

The Phone Integration Micro Frontend is a groundbreaking project that revolutionizes how agencies manage telephony integrations and subaccounts within the HighLevel platform. This self-contained web application, built on micro frontend architecture, streamlines the process of connecting and managing telephony services for agencies and their clients.

By providing a user-friendly interface for integrating both HighLevel’s features and third-party providers like Twilio, we’ve created a powerful tool that enhances the platform’s functionality and user experience.

Objectives

  1. Simplify telephony integration for agencies and their clients, eliminating the need for complex setups and local software installations.
  2. Create a flexible system that supports both HighLevel’s native telephony features and third-party integrations, giving users more control over their communication stack.
  3. Develop a robust subaccount management system, allowing agencies to efficiently organize and oversee their clients’ activities within the platform.
  4. Implement a seamless number migration feature to facilitate easy transfer of phone numbers between subaccounts and service providers.
  5. Improve the overall user experience by providing a cohesive, intuitive interface for managing all aspects of telephony within the HighLevel ecosystem.

Domain and Industry Context

In the rapidly evolving landscape of digital marketing and customer relationship management, efficient communication is paramount. Traditionally, agencies using sales & marketing platforms like HighLevel had to navigate the complex world of telephony integration independently. This often involved signing up for services like Twilio and manually integrating them into their CRM, a process that required advanced technical knowledge and could be daunting for many users.

The telecommunications industry, particularly cloud communications providers like Twilio, offers powerful APIs for SMS, voice, video, and messaging channels. However, the complexity of managing these integrations and the associated learning curve can be a significant barrier for many agencies.

Our project addresses these challenges by introducing LC (Lead Connector) Phone, a custom telephony service provider built into the HighLevel platform. This innovation aims to streamline the setup process, improve deliverability, and offer better compliance at a more affordable rate compared to traditional telephony service providers.

Features

Lead Connector’s Integration Page

The Lead Connector’s Integration Page is the cornerstone of our phone integration system. When SAAS mode is enabled, agencies can effortlessly resell HighLevel’s telephony features to their clients without requiring any local software installations. This page serves as a central hub where users can connect to HighLevel’s native telephony features or integrate their preferred third-party providers, such as Twilio.

The intuitive interface guides users through the setup process, making it accessible even to those without extensive technical knowledge. By consolidating all telephony-related configurations in one place, we’ve significantly reduced the time and effort required to get up and running with communication features.

Screenshot
Screenshot
Screenshot
Screenshot

Sub-Accounts Management

Our Sub-Accounts Management feature revolutionizes how agencies organize and oversee their clients within the HighLevel platform. This powerful tool allows agency owners to create separate subaccounts for each of their clients, effectively segmenting the use of HighLevel features on a per-client basis. Each subaccount operates as an independent entity, with its own set of configurations, data, and resources.

This granular level of control enables agency owners to tailor the platform experience for each client, manage permissions more effectively, and maintain clear boundaries between different clients’ activities. The Sub-Accounts Management interface provides a comprehensive overview of all subaccounts, along with tools for quick adjustments and detailed analytics, empowering agencies to scale their operations efficiently.

Screenshot
Screenshot

Numbers Migration

The Numbers Migration feature addresses a common pain point in the industry: the need to transfer phone numbers between different accounts or service providers. This robust system allows agency owners to seamlessly migrate phone numbers between sub-accounts of a client’s external service provider (like Twilio), from HighLevel’s agency to an external provider, or between sub-accounts within HighLevel’s agency.

The process is designed to be user-friendly, with clear step-by-step instructions and safeguards to prevent accidental transfers. This feature not only saves time and reduces the risk of errors during migrations but also provides agencies with the flexibility to adjust their telephony setup as their business needs evolve.

Screenshot
Screenshot
Screenshot

Outcome

The Phone Integration Micro Frontend project has been a resounding success, significantly improving the user experience for agencies using the HighLevel platform. By simplifying the telephony integration process and providing powerful management tools, we’ve enabled agencies to focus more on their core business activities and less on technical setup and maintenance.

One of the major challenges we overcame was ensuring seamless integration with various third-party providers while maintaining a consistent user interface. This required extensive research into different APIs and careful design of our integration layer to accommodate various service-specific quirks.

A key lesson learned was the importance of user feedback throughout the development process. We conducted multiple rounds of user testing and iteratively refined our interface based on agency owners’ input, resulting in a more intuitive and efficient final product.

Looking forward, we plan to expand the range of supported third-party providers and introduce more advanced analytics features to help agencies optimize their communication strategies.

Conclusion

Working on the Phone Integration Micro Frontend project has been an incredibly rewarding experience that has significantly contributed to my growth as a developer. It challenged me to deepen my understanding of micro frontend architecture and pushed me to find creative solutions for integrating complex third-party services.

This project reinforced the importance of considering the end-user experience at every stage of development. It also highlighted the value of building flexible, scalable systems that can adapt to changing business needs.

As I reflect on this project, I’m proud of the impact it will have on agencies using the HighLevel platform. By simplifying complex processes and providing powerful management tools, we’ve created a solution that will help businesses communicate more effectively with their clients and scale their operations with ease.

abhinay

© 2024 Abhinay Thakur. All rights are reserved.