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

FCChat Configuration

Index Configuring the chat client.


where is it

The purpose of this section is to help you with some of the initial configuration tasks. For further configuration assistance, refer to the product manual.


Accessing the FCChat Configuration

The location of the configuration settings depends on your installation type. For WordPress, Joomla 1.6+, Drupal 7+, or PhpBB 3+ installations, the configuration is built into the adminstration area. (For example, wordpress users may go to Settings >> FCChat Settings from the wp dashboard)

For other installation types, the recommended method for configuring your chat is to use the global configuration template (/config/global.config.js).  A tutorial on this method may be found here. Alternatively, site administrators with these installation types may edit the main configuration file (/config/config.js) directly.


Configuration Tasks



Desktop Integration.

To discover the different ways you can implement FCChat on your site, take a look at this tutorial:
Desktop Integration


Mobile Integration.

To go mobile with FCChat, take a look here:
Mobile Integration


Setting up the chatbox.

To enable the chatbox, Find the Chatbox setting in your FCChat Settings, and set “enabled” to “true”. Here is the complete tutorial on setting up the chatbox:
Using the Chatbox


Adding items to the toolbar.

In order to add or remove toolbar items, access your FCChat Configuration. (See above for instructions related to accessing your configuration) and edit the comma separated list below:

  
	toolbar_items:["friendscenter","social_media:social_media"], 

The toolbar_items variable, above, contains a list of items that will be displayed in the toolbar. The order that items appear in this list is also the order that they will be rendered in the toolbar. The list MUST contain “friendscenter”. The other items in the list are optional.

There are two types of items that can be added to the toolbar, premade items and custom items.

Premade items are found in the fcchat/toolbar_items/ folder. These items include standard Search and Sharing plugins. For a detailed list of all the premade items available, as well as instruction on how to add these items, see Adding toolbar items in the product manual. You may also be able to download additional toolbar items from the Add ons area.

The toolbar now supports adding custom items as well, which can be tailored to the specific needs of your site. FCChat makes it fast and easy to create your own buttons for the toolbar (relatively speaking 🙂 ). To get started read this tutorial: Custom Buttons for the Toolbar


Disabling the new user prompt

When a new user comes to your site, an info bubble will pop up next to the toolbar, inviting them to participate in the chat. If you want to disable this, do the following:

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

c) Set prompt_user to no (or false)


Hiding the floating toolbar and/or the embedded control box

To hide the embedded control box (the widget):

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

b) Set control_visible to no (or false)

and to hide the floating toolbar:

c) Set show_toolbar to no (or false)



Turning Auto-Connect on/off

Auto-Connect is on by default. This means that new every new user who comes to your site will automatically be logged in to the chat as a guest. When the Auto-Connect feature is disabled, new users must sign in before they are connected to the chat.

To disable Auto-Connect:

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

b) Set require_login to yes (or true)



Using relative positioning vs absolute positioning for chat widget placement.

Relative positioning is set by default. This means that the widget is embedded in the page, in the same way that you might embed an image or Flash movie in your web document.

The chat widget may also be positioned absolutely. This means that the widget’s position is fixed to a certain (x,y) coordinate on the page. This type of positioning is sometimes preferable if you wish to set the widget at the very top of the page, and/or you have many other absolutely positioned elements in your page.

To turn on absolute positioning, do the following:

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

b) Set absolute_positioning to true

c) Open the current style template file, located in the styles directory of your FCChat installation, with a text editor (This is FCChat/styles/default_header.js, or FCChat/styles/default_sidebar.js). To see which style template you are currently using, examine the “widget_style_template” setting in the configuration.

d) Set top to a number representing the distance (in pixels) to the top of the page.

e) Set left to a number representing the distance (in pixels) from the left side of the page.



Setting up rooms.

Rooms can be created, edited, and deleted through the FCChat administration panel.

a) Sign in to the chat with your administrative account.

b) Click on your screen-name. When the user dialog box appears, click on “mod”. This will take you to the administration panel.

c) Once in the administration panel, open the ChatCenter window and view the room list. There, you will see options to create, edit, and delete rooms.


Branding.

To add a logo, title, and customized greetings, do the following:

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

b) Edit the variables in the BRANDING section. Descriptions follow.

small_logo A 16X16px (approx.) logo for your site. Insert the full path to the image file. ie. http://www.mysite.com/image.png

big_logo A 80X80px (approx.) logo for your site. Insert the full path to the image file. ie. http://www.mysite.com/bigimage.png

widget_title (Title of the embedded widget) Default value:

ChatCenter

branding_bar_title (Title displayed on the branding bar. Add the branding bar to the toolbar by inserting ‘fullpage:logo’ into the toolbar_items field. See Adding items to the toolbar below.) Default value:

Yourdomain Chat

branding_bar_width (Width of the branding bar. Adjust this so your branding bar title fits nicely.) Default value:

140

startText (Message displayed after the chat has loaded.) Default value:

Click here to join our chat.

loginText (Text displayed by the login panel when user integration is enabled.) Default value:

Please sign in to join our chat.

autoGreet (This is an automatic greeting a user receives when they enter the ChatCenter.) Default value:

Wellcome!!

In the text fields above, you may enter plain text or HTML. If you are editing the raw config.js file, make sure you escape any double quotes within your messages with a backslash. (ie. Have a “nice” day. must be written as have a “nice” day.)


Adjusting the background color.

You may appy a simple two tone color adustment as follows.

Go to your FCChat Configuration. (See above for instructions related to accessing your configuration)

Locate the quickstyling section in your configuration. Try making the following changes, which are highlighted in orange. The effect should be to add a light gray background to the chat. Of course, you will then alter the colors to suit your theme. You can choose any html color code, like gray, lightblue, or #aabbcc.
alldomains:{
	widget:{
		background_css:'background-color:#eee;',
		width_prop_offsets:'0:0:0', /*title : buttons : info box*/
		height_offset:0, 
		text_top_offset:0, 
		height_prop_offsets:'0:0:0', /*title : buttons : info box*/
		width_offset:0, 
		logo_top_offset:0,
		logo_left_offset:0,
		logo_css:'',
		title_css:'',
		full_page_button_css:'',
		off_button_css:'',
		infobox_css:'',
		base_font_css:'',
		title_font_css:'',
		alert_css:'',
		link_css:'',
		link_hover_css:'',
		link_disabled_css:'',
		info_css:''
	},
	toolbar:{
		background_css:'background-color:#eee;',
		divider_css:'',
		width_prop_offsets:'0:0:0', /*info box : buttons : minimized*/
		text_top_offset:0, 
		off_button_left_offset:0,
		base_font_css:'',
		alert_css:'',
		link_css:'',
		link_hover_css:'',
		link_disabled_css:'',
		info_css:''
	},
	dialog:{
		background_css:'background-color:#eee;',
		title_background_css:'background-color:#999;',
		title_css:'',
		link_css:''
	},
	application_window:{
		frame_color:'#999',
		background_color:'#eee',
		panel_color:'#f6f6f6',
		title_css:''
	},
	full_page_css_obj:{
	}
}
PS: Don't forget the semicolons when you make your edits. Sometimes they are easy to miss.


Changing language and style templates.

FCChat supports multiple languages and multiple styles. You can also create your own custom language or style templates. If you need a language or style that is not included in the standard distribution, try looking in the Add ons area.

In order to change these templates, the first thing you need to do is access your FCChat Configuration. (See above for instructions related to accessing your configuration)

a) Changing the language template:

Set language_template to the name of the language file you want (for instance, english.js).

The language templates are in the languages folder, so make sure a file for your language exists before setting this parameter.

b) Changing the style templates: Please Note: The templates available may be different from the ones described here. Look in your styles/ folder to see which ones you have.

Locate the style_templates section in your configuration. You should see something that looks like this:
alldomains:{
	widget:'widget_default_sidebar.js',
	toolbar:'toolbar_default.js',
	application_window:'chatcenter_light_gray.js'
}

Set widget to the name of the style template file you want for the embedded widget (for instance, widget_default_header.js).

You can choose between the 2 default configurations:
Horizontal Layout: widget_default_header.js      
Vertical Layout: widget_default_sidebar.js


The widget style templates are found in the styles folder, and they are prefixed by the word "widget".

Here is a list of widget templates that may be available:

widget_white_sidebar.js
widget_white_header.js
widget_light_gray_sidebar.js
widget_light_gray_header.js
widget_dark_sidebar.js
widget_dark_header.js

Set toolbar to the name of the style template file you want for the toolbar(for example, toolbar_white.js).

The toolbar style templates are found in the styles folder, and they are prefixed by the word "toolbar".

Here is a list of widget templates that may be available:

toolbar_white.js
toolbar_light_gray.js
toolbar_dark.js

Set applicaton_window to the name of the style template file you want for the chatcenter window (for instance, chatcenter_light_gray.js).

Here are some of the application window styles that are available:
Light Template: chatcenter_light_gray.js
Medium Template: chatcenter_blue_silver.js
Dark Template: chatcenter_midnight_blue.js


The chatcenter style templates are found in the styles folder as well. They are prefixed by the word "chatcenter".


Enabling video.

Video is disabled by default.

You may enable the video chat doing the following:

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

c) Set video_enabled to yes (or true)

Please note: When you activate your chat, you must sign up for a video account plan in order to use this feature.


Enabling image uploads

Uploading images is disabled by default.

If you wish to enable it, first verify that you have either php or asp (classic or .net) installed. These are two common scripting components, available in almost all hosting environments. If your hosting environment is Windows based, then you should have asp installed. If your web host is Linux based, then it most likely supports php. If it does not, you should download and install php from http://www.php.net. before proceding. Once you have determined you scripting language, you may enable uploading images by doing the following:

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

b) Set script_type to either PHP or ASP

c) Set upload_images_enabled to yes (or true) (this enables images)

d) Open fcchat/html/config/php_config.js (or asp_config.js) and set ALLOW_UPLOADS to '1'


Customization.

There are several ways to customize the chat widget.

The recommended way to make changes to the language and style templates is by using the Template Overrides Api.

Another way is to directly edit the style and language templates, found in the styles/ and languages/ folders, respectively. However, you should probably only do this if your intention is to create a brand new template. If you do edit these files, you must be aware that, unless you make backups of the files, your changes will be lost when you upgrade. (And FCChat is updated FREQUENTLY)

Finally, a convenience method for small styling changes is the quickstyling section in the configuration. Visit the Quickstyling Tutorial for more info.



Enabling/Disabling Sounds.

Sounds are enabled by default. To turn them off do the following.

a) Access your FCChat Configuration. (See above for instructions related to accessing your configuration)

b) Set sounds_on to no (or false)



Page level configuration.

When you change the configuration variables in the configuration settings, these changes are applied, globally, to all pages in which the chat widget is installed. If you wish to have a special configuration for a particular page, you need to use page level configuration.

In order to employ page level configuration, find this little excerpt from the code you cut and pasted into your web page:

<script type="text/javascript"> </script>

This is just an empty script tag. Any configuration variable placed here will override the values in the configuration settings.

Let's say, for instance, that you want to disable the split screen mode on a particular page.Simply place the configuration variable 'allow_split_screen_mode' between the script tags, as follows:

<script type="text/javascript">FCChatConfig.allow_split_screen_mode=false;</script>

Because you are referencing width_offset outside the configuration file, you need to preface if with FCChatConfig.



Solution Graphics