SBM blog CTA mobile 1

Boost ops efficiency, drive revenue, & save big with omnichannel messaging

On This Page

Introducing 4 important mobile web enhancements for Sendbird’s React Chat UIKit

20230601 UI Kit web mobile support Launch 3
Jun 14, 2023 • 10 min min read
Emmanuel
Emmanuel Delorme
Product Marketing Manager
SBM blog CTA mobile 1

Boost ops efficiency, drive revenue, & save big with omnichannel messaging

On This Page
SBM blog CTA mobile 1

Boost ops efficiency, drive revenue, & save big with omnichannel messaging

We are excited to announce 4 React Chat UIKit updates that streamline user interactions with mobile web browsers. We implemented a new responsive UI for mobile screens, redesigned popups, introduced a bottom panel for reactions, and transformed the context menus into long-press interactions. This blog will explore these enhancements to make the Sendbird React UIKit mobile-friendly!

4 mobile web support enhancements for Sendbird's React UIKit

The mobile web is complementary to apps and an essential experience that lowers the threshold of user engagement by removing the need to download a native app. Mobile web support is crucial to cater to the growing number of mobile users: 92.3% of internet users access the internet using a mobile phone, and as of Q1 2023, people using mobile devices contributed to almost 60% of all website traffic. Because engagement correlates with conversion and retention, mobile web apps and sites are vital components of a mobile-first strategy that extends reach and accelerates business growth in today's mobile-centric world.

Responsive UI: Adapting to mobile web screens

The latest React UIKit update eliminates the need for developers to create CSS tweaks to adapt the UI to mobile screens. The UI components now adjust automatically, saving developers time and unnecessary hassle. For example, the chat message thumbnail will adapt its size and module widths for mobile viewing.

Figure 1. A chat thumbnail optimized for the mobile web

Redesigned popups: An improved user experience

To ensure a consistent and user-friendly experience, the popups in the Sendbird UIKit were completely redesigned and standardized. In a nutshell:

  • Alert messages such as 'Leave Channel' or 'Delete Message' now feature a unified design.

  • Actions such as inviting users to a channel or moderating conversations have been revamped to utilize full-screen layouts.

  • The 'Create Channel' feature has received special attention to provide an enhanced user experience.

Figure 2. Redesigned chat popup messages for the mobile web

Bottom panel for reactions: Simplified & fun interaction

To streamline interaction in the context of reactions, we have replaced the context menus with a bottom sheet that lists the number of reactions and authors who posted them. This creates a more socially conducive experience in which users can assess other members' reactions.

Figure 3. New reaction context panel for the mobile web

Long press for context menus: Improved usability

In line with mobile conventions, we have transformed the context menus, previously triggered by kebab menus, into long press interactions. This change enhances usability and aligns with established mobile interaction patterns.

Figure 4. The kebab menu that we replaced with a long press UX
Figure 5. Demonstration of a long press interaction

Architecture and concepts for the mobile web

To activate the mobile mode in the Sendbird Chat React UIKit, developers can use the simple mediaQueryBreakPoint boolean variable. A specific pixel value or a dynamically deduced boolean value activates the mobile mode. Please refer to the docs for more information.

How to set up mobile mode in your web app:

No additional setup is required if you are using the Sendbird Chat React UIKit component. UIKit will automatically optimize itself for mobile browsers. However, if you have your own layout management libraries, you can use the mediaQueryBreakPoint property to set up the desired layout based on the screen size.

Miscellaneous enhancements:

  • We added a back icon to the Channel component with an onBackClick handler for seamless navigation.

Figure 6: The new back icon
  • We introduced the onUserProfileMessage prop to help customers create and navigate to new 1-1 channels when clicking the Message button on the user profile popup.

Figure 7. The new onUserProfileMessage prop that enables users to create and navigate to 1:1 channels

Enhancing the user experience with mobile web support

With the new optimizations for mobile browsers, web developers can now use Sendbird’s React UIKit to deliver an even more powerful communication experience on desktop and mobile browsers. The responsive UI, redesigned popups, simplified interactions, and other mobile-specific enhancements contribute to an enhanced user chat experience.

Update your application with the new Sendbird React UIKit and unlock the potential of mobile web communication: try our React Chat UIKit today with our 30-day free trial (no commitment or credit card required).

Stay tuned for more low-code or no-code updates to further streamline your React Chat development. Meanwhile, happy mobile web upgrade!✨

Ebook Grow background mobile

What are the preferred communication channels of modern customers?