This will give you a room without Chatzy logos, where all unnecessary menus and warnings are hidden. Powered by Chatzy, so you don't have to worry about the back-end stuff, but seemingly on your site and in line with your design (with a Room skin).

... That's enough to get started!

If you are a front-end developer, that's really all you need to know. You can built/use your own lightbox customized for your needs. You are, of course, welcome to find inspiration in the code examples below.

If you don't know much HTML or CSS, you may succeed if you follow the instructions on this page meticulously. Please notice, however, that your personal implementation of a hosted room is not supported by Chatzy.

A basic popup chat box

It is easy to embed a Premium Room in another web page and get a chat box like this. You can get started with this code:

Copy the ENTIRE green text above and paste it into a plain text editor like Notepad. Then complete the following three steps:

First, you must change "YourName" near the bottom of the script to the 12-digit ID or the custom label of your room. Be sure to leave the rest of the link unchanged; specifically, do not delete the "/frame/" part.

Optionally, you may want to change the dimensions and the style of the chat box and perhaps also define your own close button image. This is all done at the beginning of the script and requires some understanding of HTML and CSS. If you don't want to experiment with this, you can skip this step and use the default settings.

Finally, copy the modified code and place it where you want the link on a webpage. You might also want to change the text "Click here to chat with me".

You are done, enjoy! (or read on for more tips...)

Customizing the chat box

If you know front-end coding well, there is no limit to how much you can customize the chat box. Here's an example. Even if you only have a slight understanding of HTML/CSS, you can make some simple customizations.

In this case, you still use the above code, but without the <A>...</A> line. You also need to put an onload="ChatzyOpen('http://www.chatzy.com/frame/YourName');" command in the BODY tag of your page. (If you don't understand this, you probably shouldn't try.)

Well, you can of course include a target="_BLANK" parameter in the <A> tag, but it's probably better to replace the javascript section in the green box above with some code that opens a window of the size you want in the center of the screen. For example:

With several links on each page, however, it becomes more important to follow the Guidelines below.

Customizing the chat itself

The instructions above deal with placing a chatbox on your page with the desired dimensions, shade and frame style.

Now, you can also customize the chat itself by applying a custom skin. A custom skin defines the room's background color and text color, as well as the preferred fonts and text size, so it fits your preferences and/or existing design.

The custom skin is defined under Room Properties for each room. To get an idea of what you can do, check out these Device Skin Examples. You can apply the exact same properties to your room, in a Room Skin.

Guidelines for best results

If you are a developer or an advanced user, none of the following will come as no surprise to you:

It is a much cleaner solution to place the JavaScript in the HEAD section of your page, optionally in a separate file with a reference in the HEAD section. E.g. <HEAD><SCRIPT type="text/javascript" src="/filename.js"></SCRIPT></HEAD>

It is also better to place the <DIV>...</DIV> in the beginning or the end of your page's BODY section. (Or, alternatively, to change the DOM dynamically with JavaScript.)

Make sure the main page has zero margin, otherwise the shadow overlay will not cover the entire screen: <BODY style="margin:0;">

Whether you want to create your own close button or use our (which you are welcome to), copying the file to your own server is better than linking to our server. First of all, because we might want to change the file location someday (while we will never change the main room address), secondly, because retrieving all files outside of the iframe from your own domain is preferable.