Difference between revisions of "Widget"

From Mibbit Wiki
Jump to: navigation, search
(Use the Widget in an Object Tag)
m (Widget Configuration)
 
(96 intermediate revisions by 15 users not shown)
Line 1: Line 1:
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! [http://embed.mibbit.com/example.html example]
+
{{articles}}
 +
{{widget}}
 +
{{RightTOC|<span class="plainlinks">'''[http://mibbit.com/widget.html Widget Wizard]'''</span>}}
 +
If you'd like to have webchat on your own website, you could use a Java applet that requires a 3rd-party download or you could use Mibbit, which requires no special download at all!  
  
The first step, is to decide where you want your users to go.
+
The first step, is to decide where you want your users to go. You can either create a channel on irc.mibbit.net or if you manage your own irc server, please contact Mibbit and ask for it to be [[Enable Mibbit on Your IRC Server|enabled]].
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
+
The basic URL for the Mibbit Widget is https://widget.mibbit.com/
  
http://embed.mibbit.com/
+
Some of the parameters you can pass are:
  
The parameters you can pass are:
+
* nick - If you do not specify this, a random one will be chosen, e.g., mib_6d7s8euf (which may mean you are blocked from networks or channels). You can use your own unique name, plus optional random ciphers like: myChat_%3F%3F ( which results in myChat_56 or similar).
 +
* channel - The channel(s) that the user will be directed to.
 +
* server - This defaults to irc.mibbit.net 
 +
* [[Autoconnect|autoConnect]]=true - avoids the connect-form. Don't use this feature on your start-page or at least add, e.g., &delay=10 to the URI, otherwise it can create many unused sessions from people who just drop in and leave the page after some seconds. Autoconnect is useful on dedicated chat pages though (you shouldn't put an widget on every page the visitor might go to).
 +
* settings - Unique "Prefs" ID (created using the Widget [[Manager]]). See also [[Widget#Widget_Configuration|Widget Configuration]] and [[Skins]].
  
* nick - If you do not specify this, a random one will be chosen eg mib_6d7s8euf
+
* [[Autoconnect|autoConnect]]=true - avoids the connect-form. Additionally an op (using the mibbit '''widget''') must set "/autoconnect on" in your channel. Don't use this feature on your start-page  because it can create many unsued sessions from people who just drop in and leave the page after some seconds. But it's useful on dedicated chat pages.
* channel - A '''single''' channel that the user will be directed to.
+
* settings - Unique "Prefs" ID (created using the Widget [[Manager]]). See also [[Widget#Widget_Configuration|Widget Configuration]] and [[Skins]].
* server - This defaults to irc.mibbit.com. You can avoid the connect-form if you have authorized your server (see [http://mibbit.blogspot.com/2008/03/widget-connects-to-any-server.html blog]).
 
* settings - Unique settings ID for an account on Mibbit.com. See [[Widget#Widget_Configuration|Widget Configuration]]
 
  
Example URL:
+
Full list of defaults: [[Uri parameters]], example URL:
  
  <nowiki>http://embed.mibbit.com/?server=irc.freenode.net&channel=%23defocus</nowiki>
+
  <nowiki>https://widget.mibbit.com/?server=irc.synirc.net&nick=quodlibet%3F%3F%3F&channel=%23defocus&settings=c76462e5055bace06e32d325963b39f2</nowiki>
  
 
''Please note you must urlencode all parameters. So #foo becomes %23foo etc.''
 
''Please note you must urlencode all parameters. So #foo becomes %23foo etc.''
  
You can use the [http://mibbit.com/widget.html Widget-Creator] to create a link or an iframe code snippet now.
+
You can use the [http://widgetmanager.mibbit.com/] to create a link for an [[#Linking_Through_Iframe|iframe]] or for a [[#Linking_Through_Popup|popup]].  If you need to test your widget, see [http://tools.mibbit.com/widget-uri-creator/].
  
  
 
==Widget Configuration==
 
==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 <code>&settings=</code> parameter. Example:
+
Widget configuration is best done through passing a unique settings ID to the widget. To do this, create an account at the [http://widgetmanager.mibbit.com/ Widget-Manager]. 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 <code>&settings=theID</code>. Example:
  <nowiki>http://embed.mibbit.com/?settings=7ca12664887d4b6e7a0fa6552f9e0de6&server=irc.blah.com&channel=%23myChan</nowiki>
+
  <nowiki>https://widget.mibbit.com/?settings=7ca12664887d4b6e7a0fa6552f9e0de6&server=irc.blah.com&channel=%23myChan</nowiki>
 
 
Please note there is currently a bug that means it will not be shown right after a register. So if you register a new account, click reload, *then* go into prefs.
 
  
 
===Widget parameters===
 
===Widget parameters===
Line 34: Line 36:
 
    
 
    
 
  <nowiki>
 
  <nowiki>
<a href="http://embed.mibbit.com/
+
<a href="//widget.mibbit.com/
?server=irc.freenode.net
+
?server=irc.synirc.net
&nick=Guest
+
&nick=wdg_user_%3F%3F%3F
 
&channel=%23MibChat
 
&channel=%23MibChat
 
&customprompt=Welcome%20To%20MibChat
 
&customprompt=Welcome%20To%20MibChat
 
&customloading=maybe%20you%20need%20to%20close%20other%20Mibbit%20windows%20first...
 
&customloading=maybe%20you%20need%20to%20close%20other%20Mibbit%20windows%20first...
 
&settings=22041f31cac0adf2d1959cdc21aed853"  
 
&settings=22041f31cac0adf2d1959cdc21aed853"  
target="_blank">start MibChat on irc.freenode.net (new window)</a>
+
target="_blank">start MibChat on irc.synirc.net (new window)</a>
 
  </nowiki>
 
  </nowiki>
  
View the full parameter lists: [[Dset]] and [[Uri_parameters]]
+
(all in one line)
 +
 
 +
'''Note:''' "& amp ;" (w/o spaces) instead of "&" is not valid (although it works atm).
 +
 
 +
<span style="padding-left:25px;>''See all: [[Uri parameters|Full parameter list]]''</span>
 +
 
 +
=== Enable Autoconnect For Widget ===
 +
 
 +
<span style="text-indent:25px;">''Main Article: [[Autoconnect]]''
 +
 
 +
Make sure that if you are doing this, make sure you are '''using the Mibbit widget''', and have operator status or higher (if you use the main client it takes fifteen minutes to take effect).  This works for any server.
 +
 
 +
# Send the command '''/autoconnect on''' (only '''once''') in your channel
 +
# Add &autoConnect=true to the widget's URI
 +
# If necessary, remove the old &forcePrompt=xxx from the URI
 +
 
 +
Please note that autoconnect is set '''per channel'''. If you use a widget for multiple channels, you need to send the "/autoconnect on" command to each of them.
 +
 
 +
==Linking to Widgets==
 +
There are two main ways to link to the Mibbit Widget, and one fringe way.
 +
 
 +
===Linking Through Iframe===
 +
 
 +
Use the [https://widgetmanager.mibbit.com/index.php?view=connection Widget-Manager] to generate your own iFrame code.
 +
 
 +
The basic format simple though:
  
==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:
 
Make sure your page has a DTD setup, otherwise IE will not work properly. Place this code at the top of your page:
 
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></nowiki>
 
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></nowiki>
 +
<nowiki><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></nowiki> seems to work as well.
 +
 
Then place this code where you want the chat widget to appear:
 
Then place this code where you want the chat widget to appear:
  <nowiki><iframe width="600" height="380" scrolling="no" frameborder="0"
+
 
src="http://embed.mibbit.com/?channel=%23my_chat&nick=choose_one">
+
  <iframe <nowiki>width="600" height="380" scrolling="no" frameborder="0"
</iframe>
+
  src="//widget.mibbit.com/?server=irc.blah.net&channel=%23my_chat">
type /nick to change your Nick name,</nowiki> /help, /cs help,
+
  </iframe></nowiki>
/ns help, or /ms help for available commands
 
  
 
''Be sure to change the server and channel to your chatroom''
 
''Be sure to change the server and channel to your chatroom''
Line 60: Line 87:
 
''See also:'' [[Advanced iframe]] using PHP to pre-fill a nick like "prefix_<randompart>"
 
''See also:'' [[Advanced iframe]] using PHP to pre-fill a nick like "prefix_<randompart>"
  
==Use the Widget in a Popup==
+
===Linking Through Popup===
 
Copy and place this link in your page to open a popup window for the chat widget
 
Copy and place this link in your page to open a popup window for the chat widget
  
  <code><a href='#freenode/test'  
+
  <code><nowiki><a href='#synirc/test'  
  onclick='window.open("http://embed.mibbit.com/?server=irc.freenode.net&channel=%23test&settings=7ca12664887d4b6e7a0fa6552f9e0de6","","width=999,height=555")'>
+
  onclick='window.open("https://widget.mibbit.com/?server=irc.blah.net&channel=%23test&settings=7ca12664887d4b6e7a0fa6552f9e0de6","","width=999,height=555")'>
  Join our "#test" chat on Freenode (popup)</a></code>
+
  Join our "#test" chat on synirc (popup)</a></nowiki></code>
 
 
''The javascript must be on one line. Be sure to change the server, channel and settings to your chatroom/preferences''
 
 
 
==Use the Widget in an Object Tag==
 
 
 
'''Does not work in Internet Explorer.'''  Use as a last resort.
 
 
 
Copy and place this into your HTML for it to work:
 
  
<object id="chat" type="text/html" data=" http://embed.mibbit.com/index.html?server=irc.mibbit.com"></object>
+
===Open in a new browser window===
 +
a conventional link for your web page (if you don't like popups):
 +
<nowiki><a target="_mychat"  
 +
href="//widget.mibbit.com/?server=irc.blah.net&channel=%23test&settings=7ca12664887d4b6e7a0fa6552f9e0de6"
 +
>
 +
Open our "#test" chat on synirc in a new window/tab (depends on your browser settings)</a></nowiki>
  
To degrade correctly in IE, place text between the object tags, and that will be shown instead of a blank spot.
+
==Widget Statistics==
  
== Securing your widget ==
+
For some easy to use statistics about your widget, and to add them to your website, see [[API]]
  
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 server, channel 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 send us the channel key if the channel is keyed, which then is sent from the mibbit backend to the irc server. Then only people using *your* widget on your site, or people you allow, can enter the channel.
+
[[Category:Widget]][[Category:How To]][[Category:Code]][[Category:Client types]]

Latest revision as of 06:51, 20 April 2020

Wiki Home | FAQ | Features | IRC Commands | IRC Modes | Widget Information | Widget: WebIRC Server Setup | URI Parameters | Wish List | Registration Information | Mibbit Staff

Home | Quick Start Guide | Live Mibbit Help


API | URI Parameters | Auto Connect


If you'd like to have webchat on your own website, you could use a Java applet that requires a 3rd-party download or you could use Mibbit, which requires no special download at all!

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

The basic URL for the Mibbit Widget is https://widget.mibbit.com/

Some of the parameters you can pass are:

  • nick - If you do not specify this, a random one will be chosen, e.g., mib_6d7s8euf (which may mean you are blocked from networks or channels). You can use your own unique name, plus optional random ciphers like: myChat_%3F%3F ( which results in myChat_56 or similar).
  • channel - The channel(s) that the user will be directed to.
  • server - This defaults to irc.mibbit.net
  • autoConnect=true - avoids the connect-form. Don't use this feature on your start-page or at least add, e.g., &delay=10 to the URI, otherwise it can create many unused sessions from people who just drop in and leave the page after some seconds. Autoconnect is useful on dedicated chat pages though (you shouldn't put an widget on every page the visitor might go to).
  • settings - Unique "Prefs" ID (created using the Widget Manager). See also Widget Configuration and Skins.
  • autoConnect=true - avoids the connect-form. Additionally an op (using the mibbit widget) must set "/autoconnect on" in your channel. Don't use this feature on your start-page because it can create many unsued sessions from people who just drop in and leave the page after some seconds. But it's useful on dedicated chat pages.
  • settings - Unique "Prefs" ID (created using the Widget Manager). See also Widget Configuration and Skins.

Full list of defaults: Uri parameters, example URL:

https://widget.mibbit.com/?server=irc.synirc.net&nick=quodlibet%3F%3F%3F&channel=%23defocus&settings=c76462e5055bace06e32d325963b39f2

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

You can use the [1] to create a link for an iframe or for a popup. If you need to test your widget, see [2].


Widget Configuration

Widget configuration is best done through passing a unique settings ID to the widget. To do this, create an account at the Widget-Manager. 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=theID. Example:

https://widget.mibbit.com/?settings=7ca12664887d4b6e7a0fa6552f9e0de6&server=irc.blah.com&channel=%23myChan

Widget parameters

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

<a href="//widget.mibbit.com/
?server=irc.synirc.net
&nick=wdg_user_%3F%3F%3F
&channel=%23MibChat
&customprompt=Welcome%20To%20MibChat
&customloading=maybe%20you%20need%20to%20close%20other%20Mibbit%20windows%20first...
&settings=22041f31cac0adf2d1959cdc21aed853" 
target="_blank">start MibChat on irc.synirc.net (new window)</a>
 

(all in one line)

Note: "& amp ;" (w/o spaces) instead of "&" is not valid (although it works atm).

See all: Full parameter list

Enable Autoconnect For Widget

Main Article: Autoconnect

Make sure that if you are doing this, make sure you are using the Mibbit widget, and have operator status or higher (if you use the main client it takes fifteen minutes to take effect). This works for any server.

  1. Send the command /autoconnect on (only once) in your channel
  2. Add &autoConnect=true to the widget's URI
  3. If necessary, remove the old &forcePrompt=xxx from the URI

Please note that autoconnect is set per channel. If you use a widget for multiple channels, you need to send the "/autoconnect on" command to each of them.

Linking to Widgets

There are two main ways to link to the Mibbit Widget, and one fringe way.

Linking Through Iframe

Use the Widget-Manager to generate your own iFrame code.

The basic format simple though:

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">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> seems to work as well.

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

<iframe width="600" height="380" scrolling="no" frameborder="0"
  src="//widget.mibbit.com/?server=irc.blah.net&channel=%23my_chat">
  </iframe>

Be sure to change the server and channel to your chatroom

See also: Advanced iframe using PHP to pre-fill a nick like "prefix_<randompart>"

Linking Through Popup

Copy and place this link in your page to open a popup window for the chat widget

<a href='#synirc/test' 
 onclick='window.open("https://widget.mibbit.com/?server=irc.blah.net&channel=%23test&settings=7ca12664887d4b6e7a0fa6552f9e0de6","","width=999,height=555")'>
 Join our "#test" chat on synirc (popup)</a>

Open in a new browser window

a conventional link for your web page (if you don't like popups):

<a target="_mychat" 
 href="//widget.mibbit.com/?server=irc.blah.net&channel=%23test&settings=7ca12664887d4b6e7a0fa6552f9e0de6" 
 >
Open our "#test" chat on synirc in a new window/tab (depends on your browser settings)</a>

Widget Statistics

For some easy to use statistics about your widget, and to add them to your website, see API