There are several options for integrating FCChat with your site:
1) Default Setup
2) Running the widget box only
An example of the default (out of the box) setup is shown below. Both the widget box and the toolbar are present.
3) Running the toolbar only
To remove the toolbar, set show_toolbar
to no (or false) in the FCChat configuration. Here is an example in which only the widget box is displayed:
4) Linking to the Full Page Chat
To remove the widget box, set control_visible
to no (or false) in the FCChat configuration. Below is an example in which only the toolbar is displayed. In this example, the widget has not only been hidden, it has been moved to the page footer as well. This has been done to remove it from the main flow of the page, because, even when hidden, the widget may take up a little space on the page.
If you feel that the toolbar is taking up too much space on your page, you can set it to be minimized by default. In the FCChat Settings, set toolbar_default_display
to minimized (0). If you want the toolbar to stretch across the whole screen, set toolbar_layout
to full_width (1).
5) Embedding the chat window in an iframe
You can link to the Full Page Chat from a menu item, a button, etc., simply by adding the linking code below.
The default URL is
http://<PATH TO YOUR FCCHAT FOLDER>/html/chat/index.html
Of course, you will replace <PATH TO YOUR FCCHAT FOLDER>
with your site specific path.
In the case of this site, the Full Page Chat URL is:
Here is an example of a simple text link:
target=_blank>CLICK HERE TO CHAT</a>
It is also possible to change the default chat URL to something a bit more user friendly. To do this, see Changing the location (URL) of the Full Page Chat
In the example below, the we have decided not to run the widget box or the toolbar, but simply to provide a link to the Full Page Chat. This was achieved by removing the widget from the page, setting noshow
to yes (or true) in the FCChat Configuration, and then adding the linking code above.
6) Using the compact toolbar vs the full width toolbar
In order to embed the chat window in your site, insert the following code into your page where you want the window to appear.
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)">
<iframe frameborder="0" height="530px" width="700px"
src="<PATH TO CHAT>?embed=true&toolbar;=false&width;=700&room;_offset=60"
align="center" scrolling="none"; bgcolor="#fff"> </iframe>
Replace <PATH TO CHAT>
with the path to your full page chat file (fcchat/html/chat/index.html), for example:
or, in a typical WordPress setup:
There are a few options in the code above that you may want to change when embedding:
If true, the toolbar will be displayed in the iframe window, along with the chat. If you want to display the toolbar, you will need to make the embedded frame wide enough to accomodate it.
This is the width, in pixels, of the chat window. There are 3 different width parameters in the code above, so make sure you set all of them.
This is the height, in pixels, of the chat window.
This is the height of the chat room window, relative to the messages window. A bigger number means more space for the chat room window.
(Room ID) You can add this parameter to the querystring of the iframe’s url. Doing so will enable the chat to open automatically into a particular room. The id of the first room is 5. Subsequent rooms are 6,7,8,etc.
You cannot run the widget box/toolbar and embed the chat in the page at the same time. In fact, the embed code above automatically suppressed the display of the widget and toolbar on the page. In the example below, we have embedded the chat window in the page, using the code above:
The compact toolbar is set by default. To use the full width toolbar, set toolbar_layout to full width (or 1) in the FCChat configuration.