Hello ForuMotion members,
In this tutorial you will learn how to create a pop out chatbox by just clicking a certain image/button. You can be any version forum, but it looks better when it is phpBB2 or punBB.


phpBB2 & punBB users:

Step 1:
Go to your Administration Panel

Step 2:
Navigate to Display>Templates>General>overall_footer>Click the Modify button

Step 3:
Navigate through to the bottom of the entire code and find:

Code:

</body>
</html>

Now, just before the </body>, paste:

Code:

<div id="chatbox_ret_cont" onmouseout="stopINT()" onclick="stopINT()" onmousever="stopINT()" style="border-top: 7px solid rgb(148, 11, 11); border-left: 7px solid rgb(148, 11, 11); z-index: 10000; -moz-border-radius: 20px 0pt 0pt 0pt; background-color: COLOR HERE; position: fixed; bottom: 0pt; right: 0pt; border-color: COLOR HERE;"><div onclick="(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); $('#chatbox_ret').toggle('normal');" style="font-size: 12px; font-family: 'trebuchet ms',serif; cursor: pointer; padding: 3px;"><span id="chatbox_ret_online" style="color: black);">Chat</span><span id="chatbox_ret_offline" style="color: black;">Box</span></div><iframe scrolling="no" frameborder="0" onload="if(cb_new) { cb_start(); cb_new=0; }" style="width: 740px; height: 400px; display: none;" marginheight="0" marginwidth="0" name="chatbox_ret" id="chatbox_ret" src="/chatbox/chatbox.forum"></iframe></div>

You can change the color by editing the:

Code:

background-color: COLOR HERE;

You can change the border color by editing the:

Code:

border-color: COLOR HERE;

You can also change the text ChatBox by changing the texts "Chat" and "Box" in the code above.

Once your done, click Save, then go back to overall_footer and click the plus button indicating publish.

phpBB3 & Invision users:

Step 1:
Go to your Administration Panel

Step 2:
Navigate to General>Messages and e-mails>Announcements

Step 3:
Activate Announcements: "Yes"
Announcements Display: "All Pages" or if you just want it to appear on the forum page, "Homepage"
Scrolling: "Deactivate"

Step 4:
Click the + Create a new announcement button.

Step 5:
Add:

Code:

<div id="chatbox_ret_cont" onmouseout="stopINT()" onclick="stopINT()" onmousever="stopINT()" style="border-top: 7px solid rgb(148, 11, 11); border-left: 7px solid rgb(148, 11, 11); z-index: 10000; -moz-border-radius: 20px 0pt 0pt 0pt; background-color: COLOR HERE; position: fixed; bottom: 0pt; right: 0pt; border-color: COLOR HERE;"><div onclick="(document.getElementById('chatbox_ret').style.display=='block')?my_setcookie('chatbox_ret','0',0,0):my_setcookie('chatbox_ret','1',1,0); $('#chatbox_ret').toggle('normal');" style="font-size: 12px; font-family: 'trebuchet ms',serif; cursor: pointer; padding: 3px;"><span id="chatbox_ret_online" style="color: black);">Chat</span><span id="chatbox_ret_offline" style="color: black;">Box</span></div><iframe scrolling="no" frameborder="0" onload="if(cb_new) { cb_start(); cb_new=0; }" style="width: 740px; height: 400px; display: none;" marginheight="0" marginwidth="0" name="chatbox_ret" id="chatbox_ret" src="/chatbox/chatbox.forum"></iframe></div>

You can change the color by editing the:

Code:

background-color: COLOR HERE;

in the script above.

You can change the border color by editing the:

Code:

border-color: COLOR HERE;

You can also change the text ChatBox by changing the texts "Chat" and "Box" in the code above.

Then click save.

Once the code has been entered and everything has been saved, go to your Admin panel>Modules>Chatbox>Configuration>Chatbox display>Do not display

Then click save.

Tutorial on how to use this new chatbox:

First, click that image on the bottom right hand part of your screen which says "ChatBox."

Second, a screen will pop up that should say Chat Box, "You are disconnected."

Third to log in, simply click the text that says log in.

You should now be logged into the chat box! To see the members logged into the chat box, simply view the left hand screen inside the chat box.

Image:

You can now associate with anyone inside the chat box that is online. To close the chat box, just simply click anywhere that is gold surrounding the actual chat box. This will not log you out!

To log out, simply click the text that says "Log Out."

Image:
Enlarge this imageReduce this image Click to see fullsize


To send messages just simply type in the text box, and click "Send."