Difference between revisions of "Widget"

From Mibbit Wiki
Jump to: navigation, search
(Use the Widget in an Iframe)
Line 52: Line 52:
  
 
''Be sure to change the server and channel to your chatroom''
 
''Be sure to change the server and channel to your chatroom''
 +
 +
''See also:'' [[Advanced Iframe]] using PHP to allow users to select a network and channel
  
 
==Use the Widget in a Popup==
 
==Use the Widget in a Popup==

Revision as of 05:14, 4 May 2008

If you'd like to have webchat on your own website, then you could use a Java applet (slow, ugly, and not very accessible), or you could use Mibbit! example

The first step, is to decide where you want your users to go. You can either create a channel on irc.mibbit.com or if you manage your own irc server, please contact Mibbit and ask for it to be authorized.

The basic URL for the Mibbit Widget is

http://embed.mibbit.com/

The parameters you can pass are:

  • nick - If you do not specify this, a random one will be chosen eg mib_6d7s8euf
  • channel - A single channel that the user will be directed to.
  • server - This defaults to irc.mibbit.com. You can avoid the connect-form if you have authorized your server (see blog).
  • settings - Unique settings ID for an account on Mibbit.com. See Widget Configuration

Example URL:

http://embed.mibbit.com/e/index.html?server=irc.mibbit.com&channel=%23chat

Please note you must urlencode all parameters. So #foo becomes %23foo etc.

Widget Configuration

Widget configuration is best done through passing a unique settings ID to the widget. To do this, create an account on Mibbit.com. Then go into the preferences and change the settings to how you want your widget to appear. At the top of the preferences screen there will be a unique ID for your settings (like 7ca12664887d4b6e7a0fa6552f9e0de6). This should be passed to the widget using the &settings= parameter. Example:

http://embed.mibbit.com/e/index.html?server=irc.mibbit.com&channel=%23chat&settings=7ca12664887d4b6e7a0fa6552f9e0de6

Widget parameters

There are many parameters that can be added to the widget by adding them to the URL. For example:

<a href="http://embed.mibbit.com/
?server=irc.freenode.net
&nick=Guest...
&channel=%23mib_chat
&chatOutputShowTimes=true
&needSendButton=true" 
target="_blank">start chat on freenode</a>
 

View the full list here

Use the Widget in an Iframe

Make sure your page has a DTD setup, otherwise IE will not work properly. Place this code at the top of your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Then place this code where you want the chat widget to appear:

<iframe width="600" height="380" scrolling="no" frameborder="0"
 src="http://embed.mibbit.com/?channel=%23my_chat&nick=choose_one">
</iframe>
type /nick to change your Nick name, /help, /cs help,
/ns help, or /ms help for available commands

Be sure to change the server and channel to your chatroom

See also: Advanced Iframe using PHP to allow users to select a network and channel

Use the Widget in a Popup

Place this link in your page to open a popup window for the chat widget

<a href='#freenode/test' onclick='window.open("http://embed.mibbit.com/server=irc.freenode.net&channel=%23test&nick=prefix&chatOutputShowTimes=true","","width=999,height=555")'> Join our chat (popup)</a>

The code must be on one line. Be sure to change the server and channel to your chatroom

Securing your widget

There is also a secure mode of operation, if you wish you channel to be slightly more secure, or do not want anybody able to have a widget pointing at your channel. With this system, you tell us the channel/server, and a password. Then for each url you generate, you must specify a nick (Generate one yourself), and you send over 'key' as a param, equal to md5(nick + ":" + password). This means that unless you know the password, embedding to that channel/server is pretty hard. Additionally you can also specify a channel key if the channel is keyed. Then only people using *your* widget on your site, or people you allow, can enter the channel.