Custom Live Chat UI

Developer Support APIs & Integrations
1

Instead of HS’s out-of-the-box chat widget and UI, I want to use our own Live Chat UI components and design.
Has anyone managed to create something like this on top of HS’s APIs (or via any other means)?

2

Hi @TSpence9

Thanks for reaching out to the Community!

I wanted to invite our subject matter experts to this conversation to see if they have advice.

Hi @Jnix284 @Shadab_Khan @danmoyle - Do you have any insight or recommendations for @TSpence9?

Thank you!

Best,

Jan

3

@TSpence9, Great use-case, I haven’t personally done it however it looks like you can use Chat Widget SDK to build your own UI with this

Stay Awesome & Keep Doing it BIG :fire:

4

Hi TSpence9 and welcome to the Community. This is a great question. I’ve only used HubSpot chat or Drift and it’s worked well. But your question got me thinking and doing a little research. While there aren’t specific search results I could find detailing custom Live Chat UI implementations with HubSpot’s APIs, I do know it’s possible to create your own chat interface using HubSpot’s APIs and your own UI components.

Here’s an overview I found of how you could approach this:

  1. Utilize HubSpot’s Conversations API: HubSpot provides a Conversations API that allows you to programmatically interact with conversations, messages, and threads. This API can serve as the backend for your custom chat interface.
  2. Design custom UI components: Create your own chat UI components using a framework of your choice (e.g., React, Vue, Angular, your current UI). This gives you full control over the look and feel of your chat interface.
  3. Implement real-time messaging: Use WebSockets or a similar technology to enable real-time message updates between your custom frontend and HubSpot’s backend.
  4. Handle authentication: Implement proper authentication mechanisms to ensure secure communication between your custom UI and HubSpot’s APIs.
  5. Integrate HubSpot features: Incorporate key features like file sharing, user status indicators, and notifications into your custom UI.
  6. Optimize for different devices: Ensure your custom chat UI is responsive and works well on both desktop and mobile devices.
  7. Test thoroughly: Conduct extensive testing to ensure your custom implementation works seamlessly with HubSpot’s backend and provides a smooth user experience.

You may need to combine HubSpot’s API documentation with general chat UI design principles and best practices to achieve your desired result.

If you’re looking for inspiration or guidance on chat UI design, I found quite a few resources available that discuss chat interface components, design patterns, and implementation strategies for various platforms and frameworks. good luck and hopefully you find success - we’d love to hear how it goes, here as fellow Community members & HubSpot users!