Widget:Advanced iframe

From Mibbit Wiki
Revision as of 23:06, 5 June 2011 by Havvy (Talk | contribs) (moved Advanced iframe to Widget:Advanced iframe: Widget namespace)

Jump to: navigation, search

Here an example how to integrate the Mibbit widget into your site

<?PHP // stored as, e.g., "myMibbit.php"; this is just an example! 
// Please DON'T use this code if you don't fully understand it!
 session_start(); // and similar stuff  
 $nick   = empty($_SESSION['user_name']) ? 'Wdg' : $_SESSION['user_name'];
 $server = "irc.synirc.net"; // default: irc.mibbit.net
 $room   = "MibChat"; // w/o # or %23 !
//(^- above vars only for this example) 
 $uri = "https://widget.mibbit.com/" .
 "?nick=$nick_%3F%3F" . // each %3F(=?) will be replaced by a random digit 
 "&customprompt=Welcome%20to%20$server/$room" .
 "&customloading=maybe%20you%20need%20to%20close%20other%20Mibbit%20windows%20first..." .
 "&settings=c76462e5055bace06e32d325963b39f2"; // etc.
 if (!empty($room))    {$uri .= '&channel=%23' . $room;}  
 if (!empty($server )) {$uri .= '&server='     . $server;}  
 // IE needs a proper header:
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>my chat on 
<?php echo empty($server)  ? 'irc.mibbit.net' : $server; ?></title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<style>
body {font:93% verdana,sans-serif; background:#999; color:#fff;}
iframe {
  width: 97%;
  height: 400px /* "%" doesn't work for height in strict mode! */;
}
</style>
</head>
<body><center>
<h3>advanced embedded mibbit widget example</h3>
<iframe  src="<?PHP echo $uri; ?>" frameborder="0">
 [Your user agent does not support frames or is currently configured
 not to display frames. However, you may want to open the
 <A href="<?PHP echo $uri; ?>"
 target="_blank"> chat in a new browser window ...</A>]
</iframe>
<br>(no spaces, interpunctuation or leading ciphers in your /nick name)
<h4>type /help to learn about special commands</h4>
</center></body></html>
 

if you link/open this in a new window you avoid unintentional leaving the chat when hitting the back button/key:

<a href="myMibbit.php" target="_blank">myMibbit</a>

Here's a safe and easy way to integrate the Mibbit widget with your PHP enabled website

Just copy and paste the following code, into any one of your PHP scripts, where you would like the Mibbit widget to be shown - Provided by URChat - OzJD 21:55, 6 November 2009 (UTC)

<?php
 //- Begin config of Mibbit widget - Edit below as required.
 $mibbitframe['widgeturi']="http://widget.mibbit.com/"; #Only change this if Mibbit Widget URL changes (Unlikely) - Do not add a "?".
 $mibbitframe['height']="600px"; #Set this to the desired height of Mibbit widget
 $mibbitframe['width']="800px"; #Set this to the desired width of Mibbit widget
 $mibbit['authmethod']="nickserv"; #Set this to the nickname authentication method (as per Mibbit widget specs)
 $mibbit['autoConnect']="false"; #Set this to true if you would like Mibbit to automatically connect (Not recommended)
 $mibbit['channel']="#Main"; #Set this to the room(s) you would like the user to join, if more than one, separate by comma ie. #Main,#Test
 $mibbit['charset']="UTF-8"; #Set this to the default character set (Recommended: UTF-8)
 $mibbit['customloading']="Connecting to a random URChat server"; #Set this to a custom message displayed to user whilst attempting to connect
 $mibbit['customprompt']="Welcome to URChat"; #Set this to a custom message displayed on the initial Mibbit widget screen
 $mibbit['debug']="false"; #Set to true to show debug window (not recommended for live websites)
 $mibbit['nick']="Guest_?????"; #Set this to the default nickname, a "?" generates a random number
 $mibbit['noServerMotd']="false"; #Set to true to hide the server MOTD file
 $mibbit['noServerNotices']="false"; #Set to true to hide server notices
 $mibbit['noServerTab']="false"; #Set to false to show the server tab in Mibbit widget
 $mibbit['promptChannelKey']="false"; #Set to true to ask user for channel key
 $mibbit['promptPass']="true"; #Set to true to ask user to enter nickname password
 $mibbit['server']="irc.urchat.net"; #Set this to your server
 $mibbit['settings']=""; #Set this to your Mibbit widget preferences settings key (if you have one)
 //- End config of Mibbit widget - YOU SHOULD NOT THE SECTION BELOW BELOW UNLESS YOU KNOW WHAT YOU ARE DOING!!!
 foreach ($mibbit as $key => $value) {
  $mibbitframe['widgetparams']=$mibbitframe['widgetparams'].$key."=".rawurlencode($value)."&";
 }
 echo "<iframe name=\"chatFrame\" style=\"height:".$mibbitframe['height'].";width:".$mibbitframe['width'].";\" frameborder=\"0\" src=\"".$mibbitframe['widgeturi']."?".$mibbitframe['widgetparams']."\"></iframe>";
?>

Resizing an iframe to fill the available window space

Add the onload and id attributes as shown below to your iframe tag.

<iframe id="chat" onload="resizeIframe();" frameborder="0" style="width: 100%; margin: 0px; padding: 0px; border: none;" src="http://widget.mibbit.com?channel=%23chat"></iframe>

Add the following javascript in the <head> section of your webpage:

<script type="text/javascript">
  function resizeIframe() {
        var fheight = document.documentElement.clientHeight;
        document.getElementById('chat').style.height = fheight +"px";
  }
  window.onresize=resizeIframe;
</script>

If you have questions, ask molkmin in the #help channel on the Mibbit.net IRC. --Molkmin 17:41, 25 February 2009 (UTC)