At BuboBox we try to improve the user interface on a daily basis to make it more intuitive and usable for our clients. One of our newest features is a perfect example of this ideology.

A lot of clients requested if there was an easier way to edit the HTML content copy of a challenge. The solution is a WYSIWYG editor that allows you to edit HTML in a visual way.

WYSIWYG What?

WYSIWYG is one of the many IT acronyms that leaves the average computer user clueless. Basically it’s a very simple concept. A WYSIWYG editor gives you the ability to write content and apply visual styles like bold and italic without you having to know any HTML. We will automatically convert this to HTML on our end to make it applicable within the BuboBox platform.

default-context

Context specific editor

One of the many annoyances with a lot of these WYSIWYG editors is that you get overwhelmed with buttons and features. This is something that we have taken into account and we tried to filter out the irrelevant buttons and features. Resulting in a cleaner view that will help the user to focus on the task.

Our editor for example has some different modes (minimal, default, extended), and depending on what content is edited we use a specific mode. For example: to edit a footer text of a challenge an extended editor would be total overkill because you’ll probably only want to edit the text and apply some bold or italic styling. In this case a minimal editor would suffice.

Below is an example of a minimal WYSIWYG editor:

Minimal context in editor

Release the HTML Ninja in you

Now that we made our editors more user friendly for the average computer user, we obviously don’t want to limit the more advanced computer user. Therefore on every WYSIWYG editor, regardless of the context, we added an edit source code button. Thanks to these buttons the HTML Ninja can release her powers on the content and express herself in her favourite slang.

Source code editor in WYSIWYG

Personalize content with variables

At the top of some editors you will see a button Personalize. This gives you the ability to insert variables in the content. As an example, in the mail module you can see some of these fields where you can use the Personalize button. Some examples of variables are contestant name, or the number of Facebook likes an entry received.

To use this button place your cursor in the editor where you want to insert a variable. Click on Personalize and choose a variable that you want to insert. Once this content is handled by our platform these variables will be replaced by the appropriate value.

Insert variables in the content

The above content that will be sent to a user that submits a new challenge entry will receive an email like the one below. The name Wim, comes from the form data that the user fills in before submitting the entry.

Example parsed content with variables

Help us to improve the user experience

We as a company can make some assumptions of what would be useful for you as a client, but there’s nothing better then getting direct feedback from clients that use your software. Tell us about what features and options are missing or can be improved. Let us know in the comments below or through support how we can improve our platform. We’re here to help!