How to create a chat bubble with Tailwind CSS and Alpinejs

Yesterday I was asked to create a chat bubble with alpinejs despite. So here it is.

What is a chat or contact bubble?

A chat bubble is a small bubble that appears on the screen when this one is toggled, normally with a button that says “Chat”, “Help”, or “Contact”. This one is normally on the bottom right of the screen and it contains a form and inputs that allows the user to send a message to another person.

Use Cases:

Customer Support: It can be integrated into websites or web applications to provide real-time customer support. Users can click on the chat bubble to initiate a conversation with a support representative.
Sales Assistance: Chat bubbles can be used to engage website visitors and assist them with product inquiries, helping to drive sales and conversions.
Feedback Collection: Websites can use chat bubbles to solicit feedback from users about their experience, gather suggestions for improvement, or address any issues they encounter.
Onboarding Assistance: Chat bubbles can provide onboarding assistance to new users, guiding them through the features and functionalities of a website or application.
Lead Generation: Chat bubbles can capture leads by prompting visitors to provide their contact information or engage in a conversation about products or services.

This is the structure of the project: Understanding the code:

The toggle button

x-show="open": This is the condition that determines whether the chat bubble is visible or not.

The icons inside the buttons

absolute: This is the positioning of the icons. So they can change once is toggled.

First icon

x-show="!open": This is the condition that determines whether the first icon is visible or not.
x-transition:enter-start="opacity-0 -rotate-45 scale-75": This is the transition that starts when the chat bubble is opened.
x-transition:enter="transition duration-200 transform ease": This is the transition that animates the chat bubble when it is opened.
x-transition:leave="transition duration-100 transform ease": This is the transition that animates the chat bubble when it is closed.
x-transition:leave-end="opacity-0 -rotate-45": This is the transition that ends when the chat bubble is closed.

Second icon

x-show="open": This is the condition that determines whether the second icon is visible or not.
x-transition:enter-start="opacity-0 rotate-45 scale-75": This is the transition that starts when the chat bubble is opened.
x-transition:enter="transition duration-200 transform ease": This is the transition that animates the chat bubble when it is opened.
x-transition:leave="transition duration-100 transform ease": This is the transition that animates the chat bubble when it is closed.
x-transition:leave-end="opacity-0 -rotate-45": This is the transition that ends when the chat bubble is closed.

Classes and irrelevant content are removed for brevity, but I’ll keep those classes relevant to the tutorial.

  <!-- toggle buttons -->
  <button
    @click="open = !open">
    <svg
      class="absolute"
      x-show="!open"
      x-transition:enter-start="opacity-0 -rotate-45 scale-75"
      x-transition:enter="transition duration-200 transform ease"
      x-transition:leave="transition duration-100 transform ease"
      x-transition:leave-end="opacity-0 -rotate-45">
     <!-- SVG Content goes here -->
    </svg>
    <svg
      class="absolute"
      x-show="open"
      x-transition:enter-start="opacity-0 rotate-45 scale-75"
      x-transition:enter="transition duration-200 transform ease"
      x-transition:leave="transition duration-100 transform ease"
      x-transition:leave-end="opacity-0 rotate-45">
       <!-- SVG Content goes here -->
    </svg>
  </button>
</div>

The chat bubble

x-data="{ open: false }": This is the data object that holds the open state of the chat bubble.
x-show="open": This is the condition that determines whether the chat bubble is visible or not.
x-transition:enter-start="opacity-0 translate-y-5": This is the transition that starts when the chat bubble is opened.
x-transition:enter="transition duration-200 transform ease": This is the transition that animates the chat bubble when it is opened.
x-transition:leave="transition duration-200 transform ease": This is the transition that animates the chat bubble when it is closed.
x-transition:leave-end="opacity-0 translate-y-5": This is the transition that ends when the chat bubble is closed.
@click.away="open = false": This is the event listener that closes the chat bubble when the user clicks outside of it.
The rest of the classes are positioning the chat bubble and styling the chat bubble.

Classes and irrelevant content are removed for brevity, but I’ll keep those classes relevant to the tutorial.

<div
  x-data="{ open: false }">
  <div
    id="#"
    x-show="open"
    x-transition:enter-start="opacity-0 translate-y-5"
    x-transition:enter="transition duration-200 transform ease"
    x-transition:leave="transition duration-200 transform ease"
    x-transition:leave-end="opacity-0 translate-y-5"
    @click.away="open = false"
    class="fixed flex flex-col z-50 bottom-[100px] top-0 ring-0 left-0 sm:top-auto sm:right-5 sm:left-auto h-[calc(100%-95px)] w-full sm:w-[350px] overflow-auto min-h-[250px] sm:h-[600px] ">
    <!-- Chat Bubble goes here -->
  </div>

Conclusion

This is a simple chat bubble that uses Tailwind CSS and Alpinejs. It’s a great starting point for building more complex chat bubbles and checkout the other tutorials for more advanced examples. Remember to add validation and error handling to make sure the chat bubble is always up-to-date, accurate, secure and accessible.

Something good to know is that there is already companies that offer chat bubbles, so you can use them as a starting point and avoid all the hustle of building your own.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza

Did you like this tutorial? Please share it with your friends!