| Mobile ✓ |
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).
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.
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:
You are done, enjoy! (or read on for more tips...)
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.
Here are some examples of simple customizationFor 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.
How to make a box with a broad, graphical frameIt's not difficult to make something like this if you know HTML/CSS:
How to show the box on the page from the beginning (not requiring a click)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.)
If you want to open your room in a new (small) browser windowWell, 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
If you want to put links to different rooms on one pageThere is no problem in placing links to different rooms on one page, like:
<A href="http://www.chatzy.com/frame/YourRoom1" onClick="ChatzyOpen(this.href);return false;">Room No #1</A>
<A href="http://www.chatzy.com/frame/YourRoom2" onClick="ChatzyOpen(this.href);return false;">Room No #2</A>
<A href="http://www.chatzy.com/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.
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.
If you are a developer or an advanced user, none of the following will come as no surprise to you:
