How we created the new themes on Querlo

Lorenzo Meriggi / November 8, 2020
Querlo themes

TL;DR Great news! Querlo now has themes!

Querlo chatbots have always been customizable in every element, from the simple chat preferences window, where you can change colors, avatars and backgrounds, up to the creation of special css styles that overwrote the properties of the basic styles.

But the creation of custom styles is limited to our big customers, so we thought that it would be very important for all our users to have themes that look very different from each other!

Here comes the themes!

We studied a new layer of customization named themes that can be picked by our chat configuration window.
At the moment 3 themes are available:

Classic theme

The classic Querlo theme, not much to say about this, as it always been the base of Querlo chatbots. You know it well =) and we all love it.

Querlo classic theme

2101 theme

Inspired by the great classic of Kubrick, we humbly tried to recreate the feel of the computer communications on this fantastic movie.

We found this great post by types in the future that analyzes every single aspect of the scenes regarding the typeface chosen for each of them.
In the end our font of choice was Michroma from Google fonts, as it is very similar to the Eurostyle font by Aldo Novarese.

We wanted something special for this theme, so a new way to show incoming messages was developed and the result is very different from your average chat. We also limited messages to a max of 5 and removed scrollbars.

2101 theme

CRT Terminal theme

A little gift to all our old schoolers out there; still remembering the good old days in front of CRT monitors =).

A lot of love went in for this theme as we are all very attached to the green glowing fonts in a pixelated and blurry monitor (burning your eyes).

To recreate a CRT monitor effect, we had specially developed two filters:

  • One that blurs the text.
  • The other one that adds vertical and horizontal scanlines.

Both of these filters are animated to subtly move the scanlines/text blur, finally recreating the desired look and feel!

A new incoming message animation was created: a typing animation, every character is typed one by one and an animated cursor follows the line while it’s printed, simulating how the old remote terminals worked.

Old terminal theme

More themes are coming!

Be sure to follow our blog to find out when more will come.

New chat preview window

As a bonus to the new themes, we needed to give it a better preview window.

The new chatbot preview window

A totally new look for the chat configuration window was introduced. We divided all the customization aspects of the chat into different tabs.

In the layout tab you can now see the real chat with the new themes applied “live”.
You will be able to see the actual look of the chat while you change colors and themes.

This is it for this huge update to our Querlo Chatbot studio.

If you are not a Querlo user you now have one more reason to join!