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.
Two prerequisites are necessary:
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_as3.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;
gc.openroom = 'support@demo.think5.de';
The GroupChat colorset can by customized by XML, see more details in GroupChatSkinning
See a sample page showing the GroupChat-API described below and view its html source.
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>
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:
<!-- 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"}
];
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
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" : ""