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 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.

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