Mobile Development 14 min read

Design and Implementation of a Cross‑Platform Network Phone Service for an Online Travel Platform

This article details the motivation, architecture, and iterative development of a network‑phone solution that combines native and React Native components for mobile apps and a WebRTC‑based web client, aiming to improve customer‑service efficiency, reduce costs, and enhance user experience across multiple channels.

Qunar Tech Salon
Qunar Tech Salon
Qunar Tech Salon
Design and Implementation of a Cross‑Platform Network Phone Service for an Online Travel Platform

Authors Hu Bo (frontend engineer focusing on IM, VoIP, push, familiar with Android, RN, Flutter) and Li Kang (frontend engineer for the large‑frontend service platform) introduce the project.

Problem: the existing hotline (95117) and chat channels suffer from long human‑hand‑off times, low lock‑order rates, high costs, limited international accessibility, and inefficient communication.

Solution: introduce a network‑phone service that works over any internet connection, eliminating carrier restrictions, and augment it with order guidance, robot self‑service, and co‑screen capabilities to improve lock‑order rates and reduce manual workload.

App‑side research: The project is split into basic capabilities (audio playback, call handling, dialing, headset/Bluetooth) and business interactions (order management, robot self‑service). Third‑party voice SDKs are chosen for cost efficiency; native implementation is used for low‑level audio control, while React Native provides cross‑platform, hot‑updatable business logic.

The division of responsibilities: Native handles audio management, background services, call connection, short‑flow support, and floating‑window management; React Native handles order management, robot assistance, and manual co‑screen features.

Overall app design: Users initiate a call, a cloud‑based room is created via the complain session service, SIP and call‑center interact to bridge VoIP and PSTN, and the call is routed to a human agent.

Robot self‑service & short flows: Users can select an order, receive context‑aware suggestions, or type queries; a comprehensive knowledge base provides answers, and common short‑flow tasks (itinerary, invoice, payment) are automated.

Manual co‑screen: During a voice call, users and agents can exchange text and images in real time via a WebSocket‑based channel, allowing verification of information and image uploads without ending the call, reducing average handling time by about 10%.

Usability enhancements: A floating‑window can be collapsed during a call, and network‑quality indicators alert users to poor connectivity; network status is synced to the server and displayed to agents.

Web‑side implementation: The same network‑phone features are delivered on PC/H5/mini‑program using a unified code base; three interaction scenarios are supported: self‑service over HTTP(S), IM over WebSocket, and voice over WebRTC. Issues such as audio latency, autoplay restrictions, and microphone permissions are solved with Web Audio buffering, user‑initiated playback, and explicit permission prompts.

Iteration process: The project was released in multiple versions, gradually adding self‑service, short‑flow, chat‑bot integration, and web/touch support, each iteration collecting user feedback for continuous improvement.

Project outcomes: After three major releases, network‑phone adoption reached 18% of channels, self‑service rate 26.22%, lock‑order rate increased by 40%, manual ticket creation time cut by 50%, and average manual service duration reduced by 10%.

Future plans: Continue optimizing audio quality under unstable networks, address remaining call‑back scenarios, and extend the solution to overseas users for a globally consistent experience.

cross‑platformcustomer servicemobile appReact NativeWeb IntegrationWebRTCnetwork phone
Qunar Tech Salon
Written by

Qunar Tech Salon

Qunar Tech Salon is a learning and exchange platform for Qunar engineers and industry peers. We share cutting-edge technology trends and topics, providing a free platform for mid-to-senior technical professionals to exchange and learn.

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.