New: Dynamic CSS Variables

Hello folks! A new technical feature is now deployed. :man_technologist:

Dynamic CSS Variables are now available to use with custom CSS. This allows you to dynamically pass along variables from your website into the chat embed. This is perfect if you have multiple themes on your website, or different colors on pages, and would like these reflected in the chat.

Let’s dive in.

Writing CSS

Let’s say you have a primarily red website, but users are able to change the theme to blue. You’d like an element of the chatroom — like the textbox — to change, to match this.

Just go to the Chat Settings, Appearance, and write the following CSS:

#textbox{background-color:#ff0000;background-color:%var1%;}

This will make the textbox red by default.

If var1 is present, it will use that instead.

Setting Variables

Setting variables is easy. Just include them as a URL parameter in the chat, e.g. minnit.chat/demo?embed&cssvar1=blue

The chatroom will see that you have CSS var 1 set to “blue”, and will dynamically replace %var1% in your CSS with:

#textbox{background-color:#ff0000;background-color:blue;}

You can use hex codes as well, just remember to encode the # symbol, replacing **#**0000ff with %230000ff

If you later decide to make an orange-colored page on your site, and want that applied in the chat, just change the URL to &cssvar1=orange and the chat will automatically update:

This makes it incredibly easy to deploy any number of themes quickly, allowing each embed to have its own splash of originality. Whether you base it off of the user’s preferences, specific pages, or how long a user’s been registered, CSS variables are a great fit.

Going Advanced

You can do more than just colors. For security purposes, CSS variables can not contain line-breaks, semicolons, external URLs, or HTML tags. This prevents users from sending vast amounts of CSS or tricking others into clicking a malformed URL.

You can use CSS variables to set element sizes, shapes, positions, and more. The sky’s the limit.

Using %var2% and &cssvar2=blue, for instance, will allow you to pass along a second CSS variable to us.

If you have any questions about getting started, or if you have anything cool you’d like to demonstrate, feel free to reply here.

Enjoy!