MXit EVO Help

What is MXit EVO?

MXit EVO is a suite of web products, from a PC-based instant messenger for online chat to your own fully customisable social networking application to embed in your blog site or website. With the advances in Web 2.0 it’s becoming imperative to own your own SNS, and MXit EVO allows you to create and fully customize your own social networking world.

Tell me about MXit EVO Webchat?

MXit EVO Webchat is an integrated application that allows you to embed a widget into your blog site or website, for your own fully customisable branded social network. How do you do this? Simply follow the instructions below to embed MXit's web widget into your site, for your own SNS online chat.

Instructions: Copy the embedding script and paste it onto your website, in the desired location. Remember it is imperative not to change the order in which the script is written. The script will draw the widget into any element in which you have embedded it. We highly recommend that you use the minimum size of 220px wide X 300px when embedding the widget, to ensure a perfect rendition. Although it is possible to embed the widget using smaller dimensions than the recommended minimum size, the rendering of the widget may look distorted and some of the buttons may not be completely visible.

Embed code explained

Below is a sample of the Embed code:

1. The first code element is the container that holds the widget. This element is called mxit_silverlightControlHost. The widget will scale to 100% of the width and height of this element, therefore it is the element used to control the size of the widget on your page.

2. The second code element is the mxit_RestPanel. This element is used to contain any HTML that should share real estate with the widget.
3. The third element reference the scripts used to build the MXit Webchat.

4. The last element embeds the Microsoft^® Silverlight™ application and provides the MXit Webchat with it’s display instructions.

Features that can be tailored for your MXit EVO Widget:

1. width
Specified in percentage, this is the scale width of the widget in relation to its parent element.

2. height
Specified in percentage, this is the scale height of the widget in relation to its parent element.

3. adTag
A true/false value which instructs the widget to resize when users log on and off.

4. bgColor
This is the background color of the element in which the widget is displayed. This setting will only be effective if you use a transparent background image in your skin pack.

5. customImages
This is web path (URL) to a location where custom images are hosted. This value can be set from the embed wizard. If you edit this value, ensure that the path you enter is URL-encoded.

6. customImagesExtension
The custom images extension is used to load custom images, the default type is PNG. Currently the widget only supports PNG files. This value has to be provided.

7. mouseOver
This is the highlight color that will be used when you run the mouse over your contact list. The color is represented in hex format (e.g.: #335599).

8. chatBar
The chatBar will set the color of the bar that separates conversations in a chat. This color is also represented in the hex format (e.g.: #f7f7f7).

9. ContainerHeight
The ContainerHeight property sets the height of the widget. This value should be the same as the parent element.

10. ContainerWidth
The ContainerWidth property sets the height of the widget. This value should be the same as the parent element.

Create a custom theme for your MXit EVO Webchat

For customisation, you can use our widget wizard to specify the path to your custom images. To do this, Simply paste the path to your custom theme pack in the box provided.

Should you wish to enter the path to the images manually, you can do so by modifying the embed script by changing the customImages value. Take care when modifying the embed script as the name of the parameters in the scripts are case-sensitive and all values must be URL-encoded. The embed code sample below shows the customImages value highlighted. (Note that the values are separated by an ampersand (&) symbol).

EVO webchat is only compatible with PNG image files. Therefore ensure that no JPEG or GIF images are included in your theme pack. Themes must include all images using the same names and dimensions. If an image is not included in the theme pack, the widget will load the default image for that specific image from the MXit website.

To make your own theme pack, download our MXit theme from http://evo.mxit.com/widget/images/themes/mxit/theme.zip. Make sure that you don’t change the dimensions or names of the images.

Theming basics
The quickest way to see results when building a theme for the webchat application, is to change the two fundamental background images, the webchat uses: headerBackgroundImage.png for the background up to the beginning of the contact list. The remainder of the body uses bodyBackgroundImage. By creating two new images to replace these images, you can instantly theme your widget to your requirements.