Hosted Rooms
Chat on your own website or blog - Powered by Chatzy
If you want to show your Premium Room on your own site, blog, personal page, etc., it couldn't be any easier:
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.
For our basic popup chat box, you can customize the frame, the shade and the close button, by changing the first four lines of code. For example:
Of course, you can combine these examples and/or change the values for height, width, backgrounds, borders, etc. independently to suit your individual preferences.
It's not difficult to make something like this if you know HTML/CSS:
- Start by making a picture like this one. We chose the dimensions 680x540 pixels.
- Reference the background-image and add some padding to our script above:
"Style": 'background-image:url(/elements/frame/frame680.gif);padding:95px 95px 85px 105px;', - Save the image, the script, etc. on your server and you are ready to go!
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.org/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:
function ChatzyOpen (a) { var ChatzyWidth = 550; var ChatzyHeight = 400; var ChatzyLeft = parseInt ((screen.width - ChatzyWidth) / 2); var ChatzyTop = parseInt ((screen.height - ChatzyHeight) / 2); window.open (a, 'blank', 'menubar=no,toolbar=no,location=no,directories=no,status=no,resizable=yes,width=' + ChatzyWidth + ',height=' + ChatzyHeight + ',top=' + ChatzyTop + ',left=' + ChatzyLeft); }
This would work like this: Click to open chat window
There is no problem in placing links to different rooms on one page, like:
<A href="http://www.chatzy.org/frame/YourRoom1" onClick="ChatzyOpen(this.href);return false;">Room No #1</A>
<A href="http://www.chatzy.org/frame/YourRoom2" onClick="ChatzyOpen(this.href);return false;">Room No #2</A>
<A href="http://www.chatzy.org/frame/YourRoom3" onClick="ChatzyOpen(this.href);return false;">Room No #3</A>
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.
Desktop View
Chatzy
New User
Here are some examples of simple customization
