How to Create a Live Chat Button UI in Next.js | Clean & Responsive Design

Need a clean and modern live chat button for your website? In this guide, we’ll walk you through how to design a responsive chat button UI using Next.js and Tailwind CSS. It’s simple, lightweight, and easy to customize to fit any site.

Live Chat preview

Please install everything that's required

Before setup and using this component, please install all the required dependencies from this link (if you have never installed).

1. Live chat with message icon

Create a component /components/LiveChatButton.tsx

jsx
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/20/solid";

...

<a
  href={"/#"}
  target="_blank"
  className="fixed bottom-6 right-6 cursor-pointer transition-transform hover:scale-125"
>
  <ChatBubbleOvalLeftEllipsisIcon className="size-16 text-blue-500" />
</a>

Now you can see, the live chat will be shown on the bottom right corner of browser.

2. Bonus: Live chat with Facebook messenger image

we can also create live chat with image Messenger, Instagram, ...

jsx
<a
  href={"/#"}
  target="_blank"
  className="fixed bottom-6 right-6 cursor-pointer transition-transform hover:scale-125"
>
   <Image
      src={"/images/messenger-icon.png"}
      width={60}
      height={60}
      alt="messenger chat"
    />
</a>

The UI is shown like that

You can download the Messenger image icon on this link