Discover, design and personalize your perfect AI chatbot

At AINIRO, we've got infinite possibilites for the AI chatbot designs. Here I'll showcase the evolution of our chatbot designs, as well as showing you all of our current designs. Additionally, I'll touch upon the subject of personalization through custom designs, although I won't delve into comprehensive guidelines just yet - a blog like that is in progress!

Whether you're a chatbot enthusiast or a business owner keen on harnessing the potential of conversational AI, you probably recognize the significance of design. Not only does it catch the user's attention with the chat button, but it also plays a vital role in ensuring a seamless user experience.

The OG designs

We started out with a handful of Thomas' original designs. Thomas did some experimenting with the designs, and kept improving them little by little. These are the office, numorphism, default, morphed bubbles and chess designs (in that order, from left to right).

The first colored designs

Tage and I wanted to experiment with different colors and designs for the chatbots, but since Thomas is usually busy with coding, he didn't have time to prioritize it. So I experimented a bit with the CSS code, and made some color choices based on the chess design. For these designs, I mostly did things like remove borders and change the HEX colors. While testing color combinations took a bit of time, these designs are almost a true copy of the chess design, just with different colors.

Twilight:

Burning sunset:

Galaxy:

Ocean Bleu:

Parakeet:

Emerald:

Sunflower:

Lollipop:

Scandinavian designs

We also wanted to have some "cleaner" designs to pick from, so I got back to experimenting and made a template for what we ended up naming the Scandinavian designs. We chose that name due to Scandinavian design being known for being clean with rounded edges. With these designs I changed a lot more than I did for the first color designs, but to narrow it down: a lot of places in the CSS code that said x px, I changed the number. Border radius was increased for more rounded edges, most borders were removed, padding and margin was changed some places and of course colors were changed.

Scandinavian Cyan:

Scandinavian Navy:

Scandinavian Orchid:

Scandinavian Grape:

Scandinavian Flamingo:

Scandinavian Blush:

Scandinavian Mulberry:

Scandinavian Maroon:

Scandinavian Scarlet:

Scandinavian Pumpkin:

Scandinavian Honey:

Scandinavian Lime:

Scandinavian Teal:

Scandinavian Deep Teal:

Scandinavian Raven:

Scandinavian Chocolate:

Personalizing the chatbot designs by experimenting yourself will probably mostly consist of changing numbers and HEX codes. The code is very intuitive, there are "headers" explaining which part of the design the following code is for - for example chat window. You can find UI templates in Hyper IDE by checking system files, typing "openai" in the search field and expanding the folders system - openai - front.files - chat. It's very important to make your own new file though, because if you make changes to a system file, it'll revert back to the original design with the next update. To make a new file, uncheck system files and expand the folders etc - www - system - openai - css - chat and create your file here. Name it anything.css. A comprehensive guide is coming!

As we continue to expand our range of designs, we value your valuable input and feedback. If you have specific suggestions in mind, we'd love you share them with us! Your insights will help shape our chatbot designs, creating even better experiences for users. Stay tuned for regular updates, and the upcoming guide dedicated to creating personalized designs yourself!