DEV Community

Cover image for Design your own ChatGPT Website Chatbot
Thomas Hansen
Thomas Hansen

Posted on • Originally published at ainiro.io

Design your own ChatGPT Website Chatbot

One of the unique things about our ChatGPT website chatbot technology is how much you can customise it. It's got settings for everything, custom designs being one of the settings you can apply.

In the video below I am showing you how to create a custom design for your chatbot. The process is very easy, you start out with any of the existing designs and simply copy and paste it into a new file, at which point you'll rapidly understand the CSS, allowing you to customise it any ways you want. The entire design is some 250 lines of CSS code, so it's easily understood if you know CSS from before.

The process is quite simple once you realise what folder to put your file in. The correct folder is /etc/system/openai/css/chat/. Then just give your CSS file a name such as howdy.css, at which point you can reference this CSS file in the query parameters for your chatbot JavaScript inclusion as css=howdy. Below is a screenshot of how you can use Hyper IDE to edit your CSS.

Custom ChatGPT CSS design

This process allows you to move the chatbot button. Maybe your bottom/right corner is too noisy? Maybe you want to have the button in the top/right corner? Maybe you want to have the chatbot open in fullscreen mode on phones? Whatever you can do with CSS you can also do to your chatbot.

Notice - If you're new to AINIRO, you might want to check out how to get ChatGPT website chatbot first.

Become a partner of AINIRO

You can create as many themes as you wish using the above process, giving you a "suite" of chatbot themes to show to clients. For a web design company this might provide a golden opportunity for some extra income. For partners doing all the setup, selling and 1st line support, we have a 50/50 net revenue share model, where you can almost "white label" our entire product. If you're interested in this, reach out to us and let's have a meeting. For partners we provide all the training required to administrate your clients entirely by yourself, implying you get to keep the ownership of the client, while we simply deliver great technology to you, providing you with an additional source of revenue.

Later we will even implement tracking links, allowing you to share articles and pages from our website, resulting in that the client becomes associated with you, such that as they contact "us" they're actually contacting you!

Rome wasn't built in one day, and it surely wasn't built by a small group of people either. Our strategy is to rely upon close partners to sell and support clients, and in return we're willing to share our entire net revenue 50/50 with you if you're interested. Notice, this is recurring revenue, and subscription-based payments, implying you won't get much initially, but it'll keep coming, once every month, for the lifetime of the client.

Top comments (2)

Collapse
 
arianygard profile image
AriaNygard

Great video showing the process, and luckily CSS is easy enough for most people to be able to do it well!

Collapse
 
polterguy profile image
Thomas Hansen

Yup, if you've got some basic CSS skills, it should be fairly straight forward ^_^