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

BLOGCHAT Tutorial

Index Setting up BLOGCHAT on your site


where is it

This tutorial covers configuration and administration tasks specific to the BLOGCHAT chat system. If you need additional help, feel free to contact us at support@fastcatsoftware.com.



Configuring Blogchat

Go to the Blogchat Settings page (in WordPress: Settings -> BLOGCHAT Settings).
The majority of the setting on this page are described in the FCChat User Guide and the FCChat Manual.
Below we discuss only the chatbox option, which is central to the configuration of the Blogchat widget.

Chatbox Configuration

Within the Blogchat Settings page, the chatbox field contains the configuration options for the chatbox, as shown below:

//CHATBOX
chatbox:{
	enabled:true,
	mode:1, /*0 - sitewide, 1 - page discussion*/
	require_tag:false,
	embed:{
		tag_id:'comments',
		before:true
	},
	layout:{
		mode:2, /* 0 - horizontal, 1 -vertical, 2 - autodetect */
		auto_detect_width_transition:570
	},
	width:{
		desktop:590, /*min 580*/
		tablet:590,
		mobile:290
	},
	height:{ /*min 390*/
		desktop:450,
		tablet:450,
		mobile:450 
	},
	resize:{
		enable:true,
		increment:50,
		min_height:400,
		max_height:700
	},
	css:{
		loading:'font-family:arial;font-size:14px;font-weight:bold;color:lightblue',
		container_spacing:'margin-left:auto;margin-right:auto;margin-bottom:30px;',
		container_css:'background-color:#fff;border: 1px solid #eee;',
		horizontal_alignment:11, 
		padding:'10px 10px',
		label:'font-size:16px;font-family:arial;font-weight:bold;color:#a3b3ff;'
	},
	label_txt:'Chat',
	loading_txt:'Chat Loading...Please Wait...',
	sitewide:{
		full_page:true,
		topic:'',
		desc:'',
		button_width:140,
		button_text:'Chatbox',
		title_text:'Live Comments',
		chatroom_text:'Chat:',
		connected_text:'Connected: ',
		viewing_text:'Viewing'
	},
	page_discussion:{
		button_width:140,
		button_text:'This Topic',
		title_text:'Live Comments',
		chatroom_text:'Chat about this page:',
		connected_text:'Viewing this page: ',
		viewing_text:'Active',
		use_querystring_in_url:true,
		use_page_title:true,
		lock_all_discussions:false
	},
	dialog_width:500,
	hide_chatroom_info:true,
	hide_eye:false
},

enabled
Enables the chatbox.

mode
The chatbox has two modes. When in mode 0, you will have one sitewide chat room. In mode 1, you have the option of having a different chat room for each page, or topic, on your site. When in mode 0, the accompanying sitewide parameters will be used. When in mode 1, the page_discussion parameters will be used.

require_tag
When this is set to true, a page tag is required to activate and display the chatbox. There is more info about page tags and how they are used below. When set to false, the chatbox, if enabled, will automatically be displayed on all pages where it has been embedded. Enabling the require_tag parameter allows you to specify which pages will display the chatbox.

embed parameters

The embed parameters tell Blogchat where to embed the chat box. This was discussed at greater length in the section above: Embedding blogchat in your pages

tag_id
The id attribute of the page element that is to serve as a reference point for the chat box.

before
If true, place the chat box before the specified element. If false, place it after.



layout parameters

mode
Placement of the userlist panel with respect to the chat panel. 0 – horizontal, 1 -vertical, 2 – autodetect

auto_detect_width_transition
When mode is set to 2, the chat will set the layout of the chat to vertical when the screen size is small, and horizontal when it is big. auto_detect_width_transition defines the screen size, in pixels, at which the transition between vertical and horizontal mode occurs.



width parameters

desktop
The suggested width of the chat box on a large screen browser.

tablet
The suggested width of the chat box on a tablet browser.

mobile
The suggested width of the chat box on a small screen browser.



height parameters

desktop
The suggested height of the chat box on a large screen browser.

tablet
The suggested height of the chat box on a tablet browser.

mobile
The suggested height of the chat box on a small screen browser.



resize parameters

enabled
Enables the chatbox to be resized.

increment
The amount of increment in the size of the chatbox when a user presses the resize tab.

min_height
The minimum height of the chatbox.

max_height
The maximum height of the chatbox.



css parameters

The CSS parameters provide a few options for the styling of the border area surrounding the chatbox and for the placement of the chat box.

loading
Use this option to specify how loading_text will be styled.

container_spacing
Use this option to specify how the chat box will be aligned and spaced with respect to other page elements. The default setting attempts to center the chat box in the page.

container_css
Defines the styling of the border area surrounding the chatbox.

horizontal_alignment
Adjust the number to change the left/right positioning of the chatbox.

padding
Adjust the amount of padding around the chatbox.

label
CSS styles for the label_txt that appears on the left side of the chat box.



label_txt
Text that apears in the upper left hand corner of the chatbox.

loading_txt
Text that apears in the upper left hand corner when the chat is loading.

sitewide parameters

full_page
If true, the chatbox will be displayed in the full page chat.

topic
Info about the chatbox’s topic.

desc
More info about the chatbox.

button_width
The width of the chatbox button in the toolbar.

button_text
The chatbox button text.

title_text
The chatbox dialog title.

chatroom_text
The chatroom introduction text.

connected_text
Text to describe the state of users who are connected to the chatbox.

viewing_text
Text to describe the state of users in the chatbox’s userlist, who are actively viewing the chat room.

page_discussion parameters

button_width
The width of the chatbox button in the toolbar.

button_text
The chatbox button text.

title_text
The chatbox dialog title.

chatroom_text
The chatroom introduction text.

connected_text
Text to describe the state of users who are connected to the chatbox.

viewing_text
Text to describe the state of users in the chatbox’s userlist, who are actively viewing the chat room.

use_querystring_in_url
Different querystrings should be counted as separate pages? T/F

use_page_title
The page title will be taken to be the default “topic” for the page discussion? T/F

lock_all_discussions
The page discussions will be locked? T/F

dialog_width
Depricated. Not in use.

hide_chatroom_info
Switch to hide the “Chat Room” link and the Chats (0 new)” indicator in the bottom bar.

hide_eye
Switch to hide the “evil eye”.



Using page tags to control the chatbox.

You can embed a small tag in your blog posts to control the operation of the chatbox. Simply enter the tag when editing the post. Don’t worry, it won’t show up as part of the post. When require_tags is enabled, a tag must be present on the page in order for the chatbox to appear. Here is an example of a page tag:

<span class='fc_chat_params'>{"id":"chatbox_tutorial","topic":"Using the chatbox."}</span>


There are no required parameters for the page tag. It can be as simple as an empty set of braces, like this:

<span class='fc_chat_params'>{}</span>


Important: WordPress inserts extra characters in your text, thus, you must not have any line breaks from your tags, or they won’t work.

Here is a page tag with more parameters included. Line breaks have been included for clarity, but you must remove them when placing the tag in the page:

<span class='fc_chat_params'>
	{
		"page":"all",
		"id":"testchat",
		"no_discussion":false,
		"topic":"This is just a test",
		"desc":"Blah blah blah",
		"topic_closed":false
	}
</span>


Here are some options you can put in your page tag, to control various aspects of the chat box:

page
This can be set to the exact url of the page in which the tag is embedded, or it can be set to “all”. When FCChat encounters more than one tag on a page, it chooses the correct tag in this fashion:

1) The first tag it encounters with “all” for the page parameter, or

2) the first tag it encounters with the same URL as the current page, or

3) simply, the first tag on the page.

id
This is an identifier for the chat room associated with this page. It can be anything you want. By using an identifier, you can have the same room span accross several pages. If you omit the identifier, and you are running in “page discussion” mode, the url of the page will be used as the identifier. If you are running a sitewide chatbox, the phrase “Sitewide Discussion” will be used as the default identifier.

no_discussion
Set this to true if you want to hide the chatbox on this page. (true/false)

topic
The topic of the chatbox. This overrides the topic parameter in the configuration.

desc
A description. This overrides the desc parameter in the configuration.

topic_closed
Closes the chatbox discussion, so that no further chats are allowed. (true/false)


In addition to these parameters, the page tag may contain any of the fields from the sitewide or page_discussion parameters above. These parameters, when present, will override the corresponding parameters in the chatbox configuration above.



Blogchat administration

Chat box messages can be moderated from your web pages, and they can be fully administrated with the Chatbox Manager in the Blogchat administration panel. To access the Chatbox Manager, sign in to the chat with your admin account, go to the Blogchat adminstration panel, and open the chatcenter window. You will see an options to adminstate the chat box below the main panel of the chatcenter window.


Solution Graphics