Design your own ChatGPT Chatbot

Apart from choosing between our 20+ existing AI chatbot templates, with AINIRO you can make your own design. While we hope our existing designs may fit most people, we understand the importance of the perfect design. Maybe you want to customize the chat button, or want the colors to match your logo. Whatever the reason, if your perfect design isn't one of our templates, changing the design is actually pretty easy. We use CSS for the chatbot designs, but you actually don't even need to know any CSS at all to change the design. At the very end of this blog post, there are some general tips that might be useful even if you're an expert at CSS as well as a YouTube video going into more detail than the blog.

Creating your new file

First up, you'll want to get your template. In your cloudlet menu, click on Create - Hyper IDE. From there, type "openai" in the search field, check on system files and expand the folders system - openai - front.files - chat. Pick one of the designs to use for your template. Do not make any changes here though, as you'll lose all your progress with the next update of your cloudlet. You're going to want to create a new file. Click on the file you want for your template and copy all the text.

Now it's time to make your new file. Check system files back off and remove your search. Expand the folders etc - system - openai - css - chat. Click on the leftmost blue icon (next to the Files & folders text) to create your new file, and name it "whatever".css. You can name it whatever you want, as long as you remember .css at the end. After you click Create, your new file will open automatically. Paste in the CSS code from the template you chose and click save at the bottom right.

Next up, you'll want to create a default HTML page to see the changes you're making as you're making them. Expand the folders etc - www and click on the leftmost blue icon to create a HTML file. Name it "whatever".html. Your file will open automatically once you've hit Create.

Creating a new HTML page

Next, you need to create your HTML page. You can get the AI to do it for you, by using the prompt field at the bottom of the file page. Type "create a default html page", hit ask or enter, wait for the popup. You'll need an embed code for a chatbot (you can click use, save then get your embed code and come back here). The embed code needs to be in the header, aka between head and /head. Click enter at the end of line 4 for example, and paste in your embed code here. Hit use and remember to save your file.

Now you've got your HTML page. Now, you'll probably need to make a small change in the embed code. Scroll a little bit to the right, until you find "css=whatever". Change the current one (for example chess, scandinavian-navy or whatever else) with your new CSS file's name. If you named your new design test.css, the text in the embed code should now say "css=test", NOT "css=test.css". Save, and open your HTML page. The HTML page is the URL of your cloudlet/the HTML filename. In the screenshot, the HTML page URL would be https://demo-team.us.ainiro.io/ainirodemo.

Your HTML page should look something like this. Whenever you make a change to your new CSS file, you'll want to click F12 on your keyboard, then click network and disable cache (if this one is already checked on you may need to click it twice - off and back on). Then refresh the page. Now you'll see whatever changes you've made to the design, so you can see if you're happy with the change or not.

Making changes to the design

Back in your cloudlet, in your new CSS file, this is what it looks like. The marked text can be ignored, this is just code that makes the chatbot prioritize its own CSS instead of being overwritten by your website's CSS (this may still happen for demos, but not for chatbots embedded normally). The URL at the top is the imported font. If you want to change this, make sure to scroll down and change the font any places mentioning font names as well. The rest of the design is pretty much self explanatory headers, and anywhere saying a number followed by "px" will change something, and any HEX or RGB codes will of course change the colors of the design.

At line 30, you've got the chat button. I've highlighted anything between line 32 and line 48 you may want to change, but I'll explain what they do. Bottom and right are the position of the button. If you want it at the left of the page, or middle, you change the text here. The 10px is the amount of pixels from the edge it's displayed. Remember that if you change the button to the left for example, you may also want to change the chat window to the left. Border radius is how rounded something will be - the higher the number, the more rounded it is. The lower the number is, the more square it'll be. Padding is basically the pixel size of the design element - so if you want a true circle, maybe something like 20px 20px would be better than 15px 35px - as the last one will never become a circle, but an oval if you increase border radius.

At line 39, you've got a HEX color code. This is the color of the text/icon, the background color (button color) is at line 48. As you can see, I haven't removed the gradient but made both gradient colors the same code. The reason for this is to make it easier to change this back to a gradient in the future, and using this design for a template in the future. I usually just Google search "hex color picker" to find new colors, unless I'm trying to replicate an exact color, for example from a logo. If so, I'll take a screenshot of the logo/color, open something like Paint (or another program) and use that programs color picker to find the correct HEX color.

Box shadow is the shadow behind/around the design. Increasing this number will make the shadow larger, and vice versa. You can change the shadow color, but if you do that I do recommend using HEX just because it's easier to find a new color. Remove "rgba(0,0,0,.2)" and replace it with a HEX color. At line 52, you've got the header for what happens when hovering above the chat button.

Next you've got the chat window, chat header and chat close button. Again, remember to change font-family if you changed the URL at the very top, and change line 69 from right to left if you changed the chat button to the left (or middle, and top for ine 68). At line 70, you've got width. This is the width of the chat window. At line 81, you've got the color of the header. Keep in mind, this is not a background color, so this changes the text color in the header. Again, in all of these, changing the color codes and pixel sizes will change the design of your chatbot. Experiment with what looks best to you.

Some things will deviate a little bit

I'm going to skip through a lot, as if I didn't, I would just be repeating "change the pixel number or color code to change the design". A few things will deviate a bit from what you might assume at this point, which I'll go through. Chat message container is basically the part inside the borders of the chat window. Changing the height (line 107) will make the chat window taller, and changing the color at line 119 will change the text of the chatbot's messages. Background color at line 109 will change the color behind the text bubbles. The headers for chat message container at line 121 and 125 are for hyperlinks. 121 is for unvisited links, while 125 is for links the user has visited already.

Chat question waiting is when you send the chatbot a message and it's blinking. Maybe you want it to be a different bubble color while the waiting animation is going on? If so, change the background color at 142 to something else than the background color at 151. For chat error, to actually see your changes, you'll want to go to the machine learning menu and give your chatbot a role. This will give an error message if you try to message it, so you can see what it looks like when changing the colors etc here. Make sure to turn roles back off after, and keep in mind that text color will be the same at the text color for the chatbot's messages.

At chat answer, you've got the chat bubbles from the chatbot. Line 164 is not the text color though, you can ignore this line. The text color is back at line 119.

Skipping through a bit of stuff, you've got references next. The text like the text that's been highlighted is for the references animation. This is only relevant if you're actually going to use references in your chatbot. Under the header at line 321, you've got the color of the links, you can give it background colors etc.

Scrolling down a bit, you've got the chat prompt at line 343. This is the prompt part of the design, the container for whatever you're writing when asking the chatbot something. The speech button under line 353 is for the speech button if using one, but also for the send/submit button. You can only use one or the other in one chatbot. So changing the color here will change the color of either the speech or submit button in your chatbot. Under line 367 you've got what happens when you're hovering above this button. Lastly, under chat prompt placeholder, you've got the color of the "Ask me anything.." text. This is the placeholder text until you start writing something. If you change this to a dark color, you may want to add opacity. If I use something similar to black, I usually do around 40% opacity.

Some general tips

You may want to use font sizes of around 14-18 pixels. 16 is apparently what looks best and is most user friendly for phones, and as we know, most people do use their phones to visit websites. Never use a clean black or white in your design, but use a very dark almost-black or very light almost-white color. Big companies like phone manufacturers use this a lot, because true black and white colors are straining to the eye, and even though people won't necessarily complain, they'll get tired of looking at the screen much earlier than they would if you used a more diluted color instead. It can look like a true white, but not be the #ffffff HEX code.

Something in your design you want to change but don't know which part of the code it's at? Go to your HTML page, hover above the design you want to change, right-click and click Inspect. Now you'll actually see which part of the CSS code is determining the design for this part of the chatbot. You can also test different colors by clicking the little colored square, but remember to change the color in the CSS file as well, as this isn't a permanent change.

Lastly, I've made a YouTube video you can watch. It goes into a bit more detail, and shows examples of changing the different parts of the code. The design I made for the video is not pretty, it's just to show you what changes when you change the different parts of the design. And as always, be creative with this. Don't be afraid to test out something "crazy", you can always hit CTRL+Z if you regret it, or start over.

Have a Custom AI Solution

At AINIRO we specialise in delivering custom AI solutions and AI chatbots. If you want to talk to us about how we can help you implement your next custom AI solution, you can reach out to us below.

• Contact AINIRO