Building a Robust SaaS Widget for Exceptional Customer Support

Overview

Type

Web App - Widget

Industry

Travel & Hospitality

TechStack

100ms

100ms

React RnD

React RnD

PubNub

PubNub

Key Results

1+

1 Million

concurrent user capacity

5000+

5000+ Hrs

of potential development time savings

30+

30 Mins

integration and installation of widget

ABOUT THE CLIENT

SaaS Company Offering Customer-centric Solutions

San Francisco, CA

Their specialty lies in offering innovative solutions that cater to the unique needs of businesses across various industries. The company operates on a global scale.

PRODUCT VISION

A SaaS Widget for Exceptional Customer Support

The client wanted us to create a widget for customers to communicate with service agents through various channels, such as text and video. They wanted the app to be dependable and robust enough to surpass industry benchmarks.


Key Objectives to Achieve

  • Create a software-as-a-service (SaaS) suite for customer support.
  • Build an iframe widget capable of being placed on any site using a few lines of JavaScript.
  • Flow similar to Intercom, and customers could interact with this widget to contact support
BUSINESS REQUIREMENTS

Stable iframe Widget With Multimedia Features

The widget needed to deliver a good user experience and enable agents to interact with customers effortlessly.


Key Features to Build

  • Allow customers to communicate with agents through text and video.
  • Enable multi-person video chat capabilities with a dynamic layout.
  • Have Integrated screen-sharing features with real-time notifications for events and status.
OUR APPROACH

Evaluate. Plan Milestones. Build in Agile.

The project requirements were first evaluated to finalize the tech stacks and the development methodology. The execution was then planned according to the timelines agreed by the client. The milestones were planned to be completed in an agile manner.

{"time":1684838719965,"blocks":[{"id":"df6xdX5ygq","type":"header","data":{"text":"Development Milestone","level":3}},{"id":"3wmbqKTkTB","type":"paragraph","data":{"text":"Agile for fast and stable project delivery and shipping timelines"}}],"version":"2.27.0"}

Development Milestone

Agile for fast and stable project delivery and shipping timelines

{"time":1684838809232,"blocks":[{"id":"HzGQtgu9sK","type":"header","data":{"text":"Methodology Used","level":3}},{"id":"Af-L0hZELy","type":"paragraph","data":{"text":"<b>Time and Material (T&amp;M)</b>&nbsp;for better flexibility and collaboration"}}],"version":"2.27.0"}

Methodology Used

Time and Material (T&M) for better flexibility and collaboration

{"time":1684838840269,"blocks":[{"id":"iL5ivrrZlF","type":"header","data":{"text":"Execution Journey","level":3}}],"version":"2.27.0"}

Execution Journey

Execution Journey
TECHNICAL ARCHITECTURE
General Communication Flow
PROJECT EXECUTION

Agile Development. Time and Material Method. Strict Quality Tests.

Our team utilized a Time and Material engagement model to foster better collaboration. Additionally, we prioritized quality assessment (QA) at every stage of the development process, with a dedicated QA check for most steps.


Features Built


  • A widget for communication with agents via various channels
  • Video/voice call integration using 100ms
  • Screen share integration
  • Multi-person video chat with a dynamic layout
  • Notifications flow for real-time events, calls, and status updates
  • Real-time event for call notification and call status
  • PIP flow for video/voice call when not present in video call screen

User Flow Created


Consumer Flow

The flow for consumers was designed to be intuitive and self-explanatory. They would get multiple sign-in options and get notifications when an agent joined. Agent assignment would happen according to the topic selected.



Agent Flow

When a room is created by the consumer, the agent gets a notification to enter the room. On entry, the agent will receive all the sign-in info the consumer shares, along with a unique ID. The agent can then follow a predefined flow for interaction.



Admin flow

Admins have the same options as agents for user interaction. Admins are also given extra privileges to add or remove agents and manage topics.


CHALLENGES

Notification Issues and Reloading

Solution
RESULTS

Interactive Widget with Optimized User Flow

The project was completed within the designated timelines, and all the features planned were deployed within a short turnaround window. Implementation of the project went smoothly, and the client had no problem adopting it into their workflow.

1+

1 Million

concurrent user capacity

5000+

5000+ Hrs

of potential development time savings

30+

30 Mins

integration and installation of widget