Implement Webrtc based calling and messaging functionality along with customer details panel -- 2

₹12500-37500 INR

Cerrado

Publicado hace 8 meses

₹12500-37500 INR

Pagado a la entrega

***Apply only if you have implemented WebRTC before for audio and video calling. ***We need this completed within 7 to 10 days including UI and UX design as well as application development. ***So bid only if you can complete this in the given time range. I'm looking for a skilled React Developer with strong UI design skills to help add new functionality to my existing React web app. The primary goal of this project is to integrate Webrtc based calling and messaging. 1. Introduction Objective: Develop a new feature in our call center web application to enable agents to perform daily functions of receiving and dialing calls with enhanced communication capabilities. This feature must be developed using React, Chakra UI, and Ant Design (AntD) frameworks. Scope: The feature will include the following functionalities: Dial missed calls Dial phone numbers with country codes Search and dial contacts Display customer details and communication history during calls Action panel for call-related actions Send and receive SMS and WhatsApp messages during calls View recent calls Enable/disable communication modes (WebRTC, mobile phone, SIP phone) Change agent status Implement socket connection for event notifications Sound alerts for WebRTC and message notifications Permission check for feature access 2. Requirements 2.1 Functional Requirements 2.1.1 Dial Missed Calls Four buckets for missed calls: Not dialed yet, Dialed once, Dialed twice, Dialed thrice UI components: Tabs or sections for each bucket Actions: Dial, View details 2.1.2 Dial Phone Numbers Input: Text input for phone number and country code On-screen dial pad for number input Action: Dial 2.1.3 Search and Dial Contacts Search bar for contacts Display search results with contact details Action: Dial 2.1.4 Call Screen Active State: Customer details panel Call history (calls, SMS, email, WhatsApp, files) Action panel (Hang up, Transfer, Hold, Add participant, Block contact, Add/Update notes) SMS panel WhatsApp panel Inactive State: Missed calls section Dial pad section Call activity history 2.1.5 Send and Receive Messages During Calls SMS Panel: Send/receive SMS Display message history WhatsApp Panel: Send/receive WhatsApp messages Send template messages Send files Display message history 2.1.6 View Recent Calls List recent calls with details Actions: View details, Redial 2.1.7 Enable/Disable Communication Modes Toggle buttons for WebRTC, mobile phone, SIP phone Actions: Enable/Disable 2.1.8 Change Agent Status Dropdown or button group for predefined statuses (Online, Offline, Break, Lunch, etc.) Action: Change status 2.1.9 Socket Connection Event types: Missed call counts, Call events (agent up, customer up, hangups), SMS/WhatsApp message notifications Actions: Display notifications, Update UI 2.1.10 Sound Alerts WebRTC: Ringing, Customer pickup, Call end Messages: SMS and WhatsApp message notifications 2.1.11 Permission Check Enable feature based on user permissions 2.2 Non-Functional Requirements 2.2.1 Performance Real-time updates and notifications Efficient handling of multiple communication channels simultaneously 2.2.2 Usability Intuitive and user-friendly UI Responsive design for mobile, tablet, laptop, and desktop 2.2.3 Security Secure handling of customer data Proper authentication and authorization mechanisms 2.2.4 Reliability Stable and consistent performance across all supported devices 2.2.5 Compatibility Compatible with latest versions of major browsers (Chrome, Firefox, Safari, Edge) 3. User Interface Components 3.1 Dial Missed Calls Section Tabs/Sections for each missed call bucket List items for each missed call with details Dial button for each missed call 3.2 Dial Phone Number Section Text input for phone number and country code On-screen dial pad Dial button 3.3 Search Contacts Section Search bar List of search results with contact details Dial button for each contact 3.4 Call Screen (Active State) Customer Details Panel: Customer name, contact info, and other relevant details Call History Panel: Call, SMS, email, WhatsApp, file history Action Panel: Buttons: Hang up, Transfer, Hold, Add participant, Block contact, Add/Update notes SMS Panel: Send/receive SMS input Message history display WhatsApp Panel: Send/receive message input Template message input File attachment option Message history display 3.5 Call Screen (Inactive State) Missed calls section (as defined above) Dial pad section (as defined above) Call activity history section 3.6 Recent Calls Section List of recent calls with details Actions: View details, Redial 3.7 Communication Mode Toggle Toggle buttons for WebRTC, mobile phone, SIP phone 3.8 Agent Status Section Dropdown or button group for status selection 3.9 Notifications Real-time notifications for events (missed calls, messages, call status changes) 3.10 Sound Alerts Configurable sound alerts for various events 4. API Actions and Error Handling 4.1 API Integration Integrate with existing APIs for dialing, receiving calls, sending messages, and fetching customer details 4.2 Error Handling Display appropriate error messages for all API error codes 5. Acceptance Criteria Feature must be fully functional as described in the requirements UI should be responsive and user-friendly Real-time updates and notifications should work seamlessly Sound alerts should be configurable and function correctly Permission checks must ensure only authorized users can access the feature

ID del proyecto: 38203924

Información sobre el proyecto

10 propuestas

Proyecto remoto

Activo hace 7 meses

¿Buscas ganar dinero?

Dirección de email

Beneficios de presentar ofertas en Freelancer

Fija tu plazo y presupuesto

Cobra por tu trabajo

Describe tu propuesta

Es gratis registrarse y presentar ofertas en los trabajos

10 freelancers están ofertando un promedio de ₹26.250 INR por este trabajo

@rana176

As an experienced developer who has successfully crafted various web solutions tailored to meet specific user needs, I believe I am the best fit for implementing the requested Webrtc based calling and messaging functionality for your call center application. With an impressive seven-year portfolio inclusive of MERN stack and React expertise, I have a deep understanding of the technology stack required to fulfill your requirements. My proficiency in Responsive Web Design, HTML5, CSS3, JavaScript, and UI/UX design guarantees I can bring an intuitive and user-friendly interface to your application which is crucial for your customer detail panel. Additionally, I have comprehensive knowledge in Redux for state management. This ensures that the complex dialing functionalities such as searching contacts and phone numbers with country codes will be efficiently handled

₹12.500 INR en 2 días

4,8

(27 comentarios)

3,7

@malkesh3m

⭐ Hi, My availability is immediate. I read your project post on React Developer to Implement Webrtc based calling and messaging functionality along with customer details panel. We have extensive knowledge in MERN Stack (MongoDB/MySQL, Express JS, React, and NodeJS), as well as RESTful API integration. We are an experienced team of full-stack developers having skill sets in - React, JavaScript, jQuery, TypeScript, NextJS - NodeJS, ExpressJS - MongoDB, MySQL, PostgreSQL, SQLServer, SQLite - Redux, Thunk, GIT - JavaScript, HTML, CSS, Tailwind CSS - AWS, Server Hosting Please send a message So we can quickly discuss your project and proceed further. I am looking forward to hearing from you. Thanks

₹36.500 INR en 8 días

4,9

(12 comentarios)

3,5

@max3pro

Hi! I have good experience with React.js. Other skills I am good in - HTML, CSS, Javascript, PHP, Python. I easily read the code of other developers, may work with both layers - design and logic, and I am able to fulfill your project at a high level. I'll be glad to execute your project and bring your ideas to life. I'm willing to begin immediately and I'm always online.

₹37.500 INR en 7 días

4,9

(4 comentarios)

2,8

@Dliteinfotech

At Dlite Info Tech, we understand the immense value communication has on your call center operations. That's why we believe our skills in implementing WebRTC calling and messaging functionality will add enormous value to your project. With previous expertise in ReactNative, our team seamlessly integrates cutting-edge technology into functional, user-friendly apps - just what you need to optimize your call center's functions. Our skills don't just end at application development; we are also well-versed in UI/UX design as required. We understand the significance of a well-thought-out design, especially when it comes to complex applications like yours. Our knowledge in Chakra UI and Ant Design will ensure an intuitive, responsive, and aesthetically pleasing interface across all supported devices. Furthermore, our extensive experience enables us to deliver projects within tight deadlines without compromising quality or functionality. We keep you updated on every step of the project and work to ensure stable and consistent performance for smooth day-to-day operations. With us by your side, you can be confident that your call-center web application will be elevated with enhanced communication functionalities, robust security mechanisms, excellent performance even under high load, and comprehensive permission control. Choose Dlite Info Tech for a remarkable blend of technical expertise and efficient delivery.

₹25.000 INR en 7 días

5,0

(6 comentarios)

2,4

@rajeevnewnetlink

With over five years of experience in React.js and a wide range of other technologies, I am the ideal candidate for implementing Webrtc based calling and messaging functionality within your given timeframe. I have completed more than 350 mobile applications and 400 web applications, many of which involved integrating complex features like what you've laid out. In terms of design, I can leverage my skills in Chakra UI and Ant Design to create an intuitive and user-friendly interface for your call center web application. As an added bonus, my expertise in different mobile platforms will ensure that the design is responsive and compatible with all major browsers. Most importantly, I have a meticulous approach to security as evidenced by my prior work in securely handling sensitive customer data using proper authentication and authorization mechanisms. Given such a multifaceted project with intricate technical and security requirements such as this one, I believe my skill set makes me the perfect fit to ensure both reliable performance and secure data handling throughout your application.

₹25.000 INR en 7 días

0,0

(0 comentarios)

0,0

@ahmadhanif123

As a seasoned Computer Scientist, I am skilled in the exact technologies your project requires - React, Chakra UI, and Ant Design frameworks. What sets me apart is my ability not just to code but to solve problems and deliver tailor-made solutions. I've always believed that UI/UX design strengthens the user's connectivity with an application. So, while implementing the Webrtc-based calling and messaging features, I assure you that the application's aesthetics won't be overlooked. From dialing missed calls to enabling communication modes, I understand every aspect of the feature-set you require. Additionally, my proficiency in not only WebRTC but also Python allows me to provide you with a holistic solution. With me on board, you can expect efficient handling of multiple communication channels simultaneously and real-time updates for performance enhancement

₹30.000 INR en 3 días

0,0

(0 comentarios)

0,0

@akshaywaghmarecc

As a highly experienced and talented React Developer, with an exceptionally keen eye for UI/UX design, I'm confident that I can deliver on the exact requirements of your project. Additionally, my expertise in React.js and Chakra UI will ensure seamless integration of Webrtc for audio and video calling within your tight timescale. In terms of functionality, I understand the core objective of enhancing your call center web application to boost agent productivity. I'm prepared to take on every aspect of this project, from dialing missed/multiple calls through country code handling to actionable panels for calls and messages during conversations. Adding necessary elements like sound alerts, permission checks, and secure handling of customer data will guarantee top-of-the-linerelicability, performance and security. Communication is vital for any successful collaboration, and I strongly emphasize it throughout my workflow. Your initial vision serves as our base and we strategize our talents around it to give you a revolutionary product. With my team's profound skills in React, Nextjs,GatsbyJs and Node.js , proficient understanding in Machine Learning: NLP, Bsoup,LR,RL, OpenCV and Design using Figma, Sketch & AdobeXD alongside web design competence in HTML5/CSS3/Javascript/Bootstrap that perfectly aligns with your demands. Choose us as your partner as together we'll break barriers and surpass expectations at every turn.

₹25.000 INR en 7 días