Chat Widget:
The Conversation Bridge
Company
OCG
Industry
E-commerce
Customer
CS Agent, Buyer
Type
SaaS / Communication tool
(Introduction)
Quick overview
We aimed to simplify how teams and customers talk — designing a chat system that scales effortlessly across brands and channels.
(01 - Background)
Where conversations begin
In early 2025, our team at OpenCommerce Group began building Mesbox, a new communication platform designed to help online merchants connect with customers more efficiently.
The first step in this journey was reimagining one essential touchpoint: the Chat Widget — where every conversation starts.
At that time, businesses like ours relied on third-party tools such as Crisp for customer support. It worked — but not perfectly. As usage scaled, the system revealed clear limitations: high SaaS costs, a rigid UI that didn’t fit our brand identity, and a lack of flexibility for growth.
We didn’t just want to replace a tool. We wanted to build a bridge — a foundation for seamless communication between customer support teams and customers everywhere.
(02 - Challenges)
Finding what get lost
Through observation and internal feedback, three key pain points surfaced:
Brand inconsistency: The existing widget looked out of place on our websites, breaking the visual flow of the ShopBase experience.
Operational friction: CS agents struggled to review past messages, manage multiple stores, and keep track of ongoing conversations.
Scalability cost: The per-seat SaaS pricing model caused costs to skyrocket as our support team grew.
(03 - Goals)
Rebuilding the way we talk
After identifying the gaps between support teams and customers, our next step was to define a clear direction — not just to fix what was broken, but to build the foundation for something lasting.
Short-term goal
Build an internal Chat Widget that can replace Crisp on the ShopBase website while ensuring a similar or better experience.
Long-term goal
Lay the foundation for a multi-channel chat system – the precursor to the Mesbox Chat Platform – allowing merchants to chat with customers across multiple platforms such as websites, Facebook, Instagram, etc.
(04 - Design process)
Designing the connection
Before designing, we agreed on one principle: “Replacing a tool is not just about copying its features — it’s an opportunity to rethink how people connect.”
Our process was divided into three main phases:
Research & Benchmarking
Defining Design Principles
Prototyping & Testing
4.1/ Researching
Before starting the design of the Mesbox Chat Widget, the team conducted a short research phase to understand two aspects:
The actual experience of the CS (Customer Support) team when using Crisp.
The suitability of similar chat platforms on the market – Crisp, Intercom, Gleap – in the context of eCommerce SaaS products like ShopBase.
Key insights
From benchmarking Crisp, Intercom, and Gleap, a few themes kept surfacing — not just differences in feature sets, but deeper patterns about how each product shaped the conversation experience.
ShopBase needs a solution that is "in the middle" — as lightweight as Crisp, as beautiful and modern as Intercom, but as deeply customizable as an internal system.
This was the premise for the creation of Mesbox Chat Widget.
01
Crisp: Fast, but shallow
Crisp delivered speed and simplicity, which our support agents loved. But its lack of customization and limited workflow integration made it feel detached from the ShopBase brand. It solved the “real-time chat” problem, but not the “brand experience” problem.
02
Intercom – powerful, but heavy
Intercom offered incredible automation and analytics, yet that came with complexity and cost. Its setup required more effort, and the interface felt overengineered for smaller teams who just wanted to talk to customers efficiently. It was a great platform — but not for our scale or use case.
03
Gleap – clean, but narrow
Gleap focused on collecting feedback and bug reports rather than fostering conversations. It had a lightweight and beautiful UI, but wasn’t designed for dynamic, ongoing customer support.
Internal feedback: Understanding the CS Agents
We conducted quick interviews with 5 CS agents working at ShopBase to gather qualitative feedback on using Crisp.
The interviews lasted 15–20 minutes, focusing on their actual work journey and the difficulties of handling multiple websites at the same time.
Insights from interviews
CS agents appreciate Crisp's stability and smooth chat experience.
However, they would like more customization options to align with their brand and internal processes.
Most agree that a tool that is "simple, brand-consistent, and pre-integrated with internal systems" would be much more effective than external SaaS platforms.
4.2/ Design principles
From our findings, we defined three guiding principles that shaped every decision:
Familiar, not foreign: Keep behaviors consistent with existing tools so CS agents can adopt Mesbox instantly, without retraining.
Clean, brand-consistent UI: Design a modular, token-based system that allows quick customization for different markets and languages.
Designed for diverse users: Build a product flexible enough to serve multiple user groups — internal teams, merchants, and external clients — so Mesbox can grow beyond a single use case.
4.3/ Wireframing
Once our design principles were clear, we began sketching two main user flows that represented both ends of the conversation bridge:
Testing
We then shared the prototype with the Customer Support team for testing and feedback. The goal was not just to validate usability, but to see how comfortably agents could switch from Crisp to Mesbox without losing efficiency.
We ran two rounds of usability testing with 6 CS agents, each completing five core tasks.
Start a new conversation.
Update or complete customer information.
Send a survey to gather feedback.
Upload images or file attachments.
Reply faster using canned responses.
4.4/ Final design overview
Customer side
Customizable floating chat widget with theme, logo, and greeting options; supports multiple languages and inline HelpDoc.
Agent side
Dashboard displays real-time conversations, file uploads, search, tagging, and customer status tracking…
(05 - Solutions)
Bringing the bridge to life
After the research and design phase, Mesbox Chat Widget was deployed with the goal of not only replacing Crisp for ShopBase, but also becoming a unified communication channel between sellers and customers.
5.1/ Create channel
Each business (or website) will be managed through a channel in the Mesbox system.
Here, the CS team can:
Create a new channel for each website or brand.
Configure basic information such as name, logo, language, and time zone.
Connect to internal data sources or other channels (Facebook, Instagram, TikTok, etc.) in the future.
How to add new channel in Mesbox
5.2/ Chat widget setup
After the Channel is created, the CS team configures and embeds the Chat Widget on the website.
This section consists of two main steps:
Channel Settings
Widget Builder
In the Channel Settings interface, the CS agent can:
Edit the website name, website domain, and channel greeting.
Add a Help Center so customers can quickly browse support articles directly from the chat widget.
Choose a sender name style — either friendly or professional — to match the brand’s tone of voice.
Widget Builder is the biggest difference between Mesbox and previous platforms. Instead of just being able to customize colors and logos, CS agents (or merchants) can:
Choose the widget display position (bottom-left, bottom-right, floating...).
Customize the theme color, icon, font, greeting text, and background to align with brand identity.
Add support content blocks such as HelpDocs, FAQ.
Preview in real-time before publishing.
5.3/ Chat with customers
Once the Chat Widget is embedded on the website, customers can start sending messages, and CS agents manage all conversations in the Mesbox Dashboard.
(06 - Reflection)
What I’ve learned
Familiarity builds trust
A good design is not only more beautiful, but also makes users feel secure when changing.
Design for flexibility, not perfection
Instead of trying to perfect a fixed widget, designing with configuration in mind allows the product to serve different brands, languages, and business models.
Start small, think system
Start with a small need, but always view it as the foundation for a larger system. This approach ensures that every design decision is sustainable.
Contents
