{"desc":"The ChatBox is comming soon. It will be available in version 3.6."}
 

BLOGCHAT Tutorial

Index Setting up BLOGCHAT for WordPress


where is it

Plugin installation

If you still need to download and install the plugin, the instructions are found here: http://wordpress.org/plugins/blogchat-chat-system/installation/.

Once installed, the chat box should appear on all of your post pages, after the blog content but before the comments section. (This can be changed later.)

To test if Blogchat is functioning properly, go to one of your blog posts. It must be a single post and not a collection of entries. If everthing is ok, you should see the chat box at the bottom of the page. In this case, you may skip the rest of this section. If you do not see the chat box, continue reading.

Embedding Blogchat in you pages

Method 1

If the chat box is not showing up, it may be that your WordPress template does not contain the element that Blogchat uses to anchor the chat box. Blogchat is designed to work with the default WordPress template only. If you have a different template, you may have to specify, in the Blogchat Settings, exactly where in the page you want the chat box to be embedded in order for it to appear. To do this, go to a single blog entry page on your site, and use your browser’s view source function to view the source code of the page.

Find a spot in the source code where you want to put the chatbox. There are usually a lot of div and span html tags in the source code, and they usually have ids (though not always). Here is an example:

<div id=”comments” class=”comments-area”></div>

This tag appears on all post pages in the default template, and it offers us a good spot to put the chat box. In fact, by default, Blogchat is instructed to place the chat box before the tag with the id “comments”.

However, your template may not include this tag, or, you just may want to put the chat box somewhere else.

In this case, you will have to find another html tag to replace the default tag (and it must have an id attribute). It must be a tag which is common to all pages on which you want the chat box to apear.

If possible, you can also insert your own tag into the html of the page, and have the chat point to that.

You will enter the id of this tag in the Blogchat settings, and at the same time, you will specify whether the chat box is to appear before or after the tag.

Here is how you do this:
1) First go the the Blogchat Settings page from your WordPress dashboard. Settings -> BLOGCHAT Settings

2) Find the Chatbox option.

You will see the following:

embed:{
	tag_id:'comments',
	before:'true'
},

3) Enter you new tag_id and set before to either true or false, depending on whether you want the chat box before or after the tag.


Method 2

Alternatively, if the method above is not working for you, you can use a more straightforward approach and place the iframe code directly in the page:


<div style="margin-left:auto;margin-right:auto;margin-bottom:30px;;background-color:transparent;width:592px;">
<h2 style="font-size:16px;font-family:arial;font-weight:bold;color:#a3b3ff;">Chat</h2>
<div style="background-color:transparent;background-color:#fff;border: 1px solid #eee;border-radius:4px;
-webkit-box-shadow:0px 0px 4px 2px rgba(0,0,0,0.2);box-shadow:0px 0px 4px 2px rgba(0,0,0,0.2);;padding:0px 0px;">
<iframe id="fc_bc_iframe" scrolling="no" 
src="<WORDPRESS_ROOT>/wp-content/plugins/blogchat-chat-system/html/chat/blogchat.html?embed=true&room;_offset=60"
 style="width:590px;" frameborder="0" align="middle" height="420px" width="590px"></iframe></div></div>

You would need to replace <WORDPRESS_ROOT> with your own root directory. You can also change the CSS (width,height,etc.) to suit your needs. There is a drawback to this method, which is that you will not be able to adjust the width, height, or CSS properties of the chatbox using the Blogchat Settings page.

Next Step: Visit the Activation Page to activate your chat account. After you activate your account, you will receive a Chat ID and host value. You will insert these two values into your Blogchat Settings to complete your installation. If you have already done this, you can go to the User Guide to start configuring you chat.




Solution Graphics