About

GroupChat is designed to get simply embedded into existing websites, no matter which technology the website is using, wheter on Linux, Mac or Windows platforms, PHP, .Net, Ruby, Java or plain HTML/JS languages. These steps describe code snippets (text blocks based on a couple of HTML / JavaScript lines) you may add to your site to expose certain chat functionalities.

Technical Details

Two prerequisites are necessary:

A dedicated, hosted GroupChat backend for each chat instance - for own rooms and user namespace.
An individual script include URL (called GC-ScriptInclude), configured for the own GroupChat instance. Think5 offers these hosted services and will hand out this information with the GroupChat instance. This GC-ScriptInclude is responsible for the GroupChat behaviour and features. Most settings can be changed by the customer on the GroupChat adminstration page at www.think5.de

Embed snippet

The quickest way to get started is to add these 6 lines to your own website. This and the following samples use a shared demo server, so you can right copy the snippets to check things out.

<a href="javascript:gcShowHideChat()">Chat Show/Hide</a>

<script language="JavaScript">
        var gc = new Object();
        gc.uid = 'demo';
</script>
<script src="http://www.think5.de/saas/config/demo.js" type="text/javascript"></script>

The <script> sections should be placed in front of the closing </body> tag of your HTML page. The last line is the GC-ScriptInclude pointing to your own GroupChat Server configuration.

You can open this mini embedding sample here.

For non guest users, the login credentials are passed to the gc object. Also the language for the chat user interface can be set here (en OR de).

        gc.user = 'myusername';
        gc.pass = 'mypassword';
        
        // additional config settings
        gc.language = 'en';
        gc.bgcolor = '0x000000';
        gc.bgtransparency = '20';

Customizing the skin

The GroupChat colorset can by customized by XML, see more details in GroupChatSkinning

Using API functionality

See a sampe page showing the GroupChat-API described below and view its html source.

GroupChat exposes several methods to trigger certain functionality, the following samples give an overview:

Open the main userlist panel - named roster.

        <a href="javascript:gcShowHideChat()">Chat Show/Hide</a>

Open the GroupChat video recorder, related to a certain chatroom (room must exist)

        <a href="javascript:openRecorder('techsupport@jabber.deltamind.de')">Open Recorder</a>

Open the video player and start playing a specified video

        <a href="javascript:openPlayer('video_161066.flv')">Open Player</a>

Open a chatroom by its name.

        <a href="javascript:openRoom('techsupport@jabber.deltamind.de')">Open Room</a>

GroupChat events

Events are fired from the GroupChat system to allow custom actions in the embedding website. When the chat is loaded and the own user is logged in, the following status notifications are made to show an online/offline image and the own username:

Chat online status: Elements with CSS id '''gcChatOnlineImage''' are set to display style block, the element with id '''gcChatOfflineImage''' is set to display style none. This behaviour can be used to switch between custom images placed inside corporate website layouts, indicating wheter logged in or not.
Chat online status: Additionaly, the inner HTML of an element with id gcChatUsername id changed to the current logged in chat/guest username after a successfull online status.
Chat offline status: HTML element with the CSS id '''gcChatOfflineImage''' is searched and set to display style block, element with CSS id '''gcChatOnlineImage''' is set to display style none.

        <!-- Show chat status image and the username when logged in-->
        <span>
            <div style="float: left;">
                <img id="gcChatOnlineImage" src="http://www.think5.de/saas/img/chaticon_on.gif" style="border-width: 0px; display: none;"/>
                <img id="gcChatOfflineImage" src="http://www.think5.de/saas/img/chaticon_off.gif" style="border-width: 0px; display: block;"/>
            </div>
        </span>
                
        <div id="gcChatUsername" style="float: none;">
            [ loading ...  ]
        </div>

To show the online status of a certain chat user inside the html page, e.g. support user or site moderator, you may register a callback method for a specific user to get notified when the presence state changes, let´s say from away to online.

        <!-- This user defined function is registered with gc.notifications later -->
        <script language="javascript">
           function handleMyPresence(user,presence,status) {
              //window.alert("received presence :" + user + " is " + presence + " : " + unescape(status));
              if (user == "mark.sch") document.getElementById('markstatus').innerHTML = "user " + user + " is " + presence;
              if (user == "support") document.getElementById('supportstatus').innerHTML = "user " + user + " is " + presence;
           }
        </script>

        ...

        gc.notifications = [
                {user:"support", callback:"handleMyPresence"} ,
                {user:"mark.sch" , callback:"handleMyPresence"}
        ];

Deep Linking

Any website containing (at least) the GroupChat embed snippet from above can be called with URL parameters to trigger certain chat actions:

Open a specific room on page load:

http://www.think5.de/saas/hosted_demo_as3.html?gcroom=playground

Two additional actions can be triggered in combination with gcroom.

Open a room and the video clip recording application:

http://www.think5.de/saas/hosted_demo_as3.html?gcroom=playground&gcrecorder=1

Open a room and start publishing the webcam conference immediately:

http://www.think5.de/saas/hosted_demo_as3.html?gcroom=playground&gcpushcam=1

Play a recorded video on page load with a given video name:

http://www.think5.de/saas/hosted_demo_as3.html?gcvideo=video123.flv

From Think5: Available GC-ScriptInclude configurations

Depending on the use-case, license type, hosting plan and preferences, the following configuration parameters are available to adjust the GroupChat behaviour.

  "strIncludeRootDir" : "http://office.deltamind.de/devcenter/gcembedding/",
  "strUID" : "",
  "strUser" : "guest",
  "strPass" : "guest",
  "strJabberServer" : "demo.think5.de",
  "strJabberPort" : "5224",
  "strHideRoster" : "false", // true = disable 1-to-1 chats = rooms only
  "strLanguage" : "de",
  "bolEnableVideo" : true,
  "bolEnableVideoClip" : true,
  "strRtmpServer" : "rtmp://video.think5.de/groupchat",
  "strRtmpClipServer" : "rtmp://video.think5.de/groupchatclip",
  "strSaveClipUrl" : "saveclip.aspx?uid=" + gc.uid,
  "strGetClipThumbUrl" : "deleteclipitem.aspx?uid=" + gc.uid,
  "bolCleanOfflineRosterUsers" : true, // hide offline users (except operators)
  "bolGCDisableAddContact" : 1, //Enable/Disable adding personal contacts
  "bolGCContactSearch" : 0, // Enable/Disable contact search during add contact
  "bolAnonymous" : true, //Enable/Disable guest user accounts
  "strLCName" : "unique", //new Date().getTime(),
  "strSkin" : "mamily", //Path/Folder to custom groupchat skin
  "strLicenseType" : ""
How to apply a custom skin to the GroupChat user interface.17.09.2009 17:23:30 - Philip.georgiev