Chatbots are becoming more and more mainstream across all industries as a way of automating customer service, without losing the “ideal” user experience of having a free, one-to-one conversation with instant replies; opposed to reading a list of FAQs, phoning a helpline, or sending a support ticket.
They largely achieve their goals to a great deal of success and in the cases that they cannot help, will usually send the user onto another one of the aforementioned “old-school” services, in order to help get the job done.
One of the most popular bot frameworks is the Microsoft Bot Framework and although it offers a great user experience, the default appearance looks quite plain and can leave the bot looking rather out of place and unbranded on your website.
Default Styling:
Some of you reading this might be thinking: “Well, yeah. How different can you make a chatbot look?”, to which I would say “Very, and the Microsoft Bot Framework allows you to easily do this.” The framework comes with its own default styling but, nevertheless, this can be completely overwritten however you like, through both SASS or generic CSS to completely bespoke the design of your chatbot.
To prove my point, I have put together a number of examples in a git repository (found here https://github.com/elastacloud/botskins), which includes a number of examples of how the chatbots can be styled in completely unique ways. For the sake of best getting across my point of how easily customisable Microsoft make their framework, I have replicated a number of well-known widely used messenger services. These include Facebook Messenger, WhatsApp and Twitter. Alongside these I have included a unique design, based on the colour schemes of Visual Studio Code’s dark theme, to prove how the bot framework can be matched to any branding or colour scheme. On top of this theme, I have also created another example, showing how custom CSS animations can even be added to the backgrounds of the chatbot window. A selection of these designs can be seen below.
WhatsApp Styling:
Animated Styling:
Each of these examples has been done in plain CSS, but can easily be converted into SASS, or simply added to a SASS build.
In its current state, it does not have styling for the different message types (cards, carousels, buttons, etc), as you can see in the previous images, but I am currently working on also styling these.
I plan to update this in the future with more styles, either replicas of existing media windows or completely unique designs.
If you want to check out my work visit: https://github.com/elastacloud/botskins
And to check out the Microsoft Bot Framework itself visit: https://github.com/Microsoft/BotFramework-WebChat