Listeners' chat Back to widgets

Allow your listeners to connect in a group chat or message you directly.

Direct messaging

Embed an IFrame widget in your website in a matter of minutes and enable listeners to send you direct messages.

Monitor and respond to messages through a modern, mobile responsive, browser- based app
Visit onair.radiojar.com , login with your Radiojar account credentials and check it out!

Group Chat

This widget relies on three parts to work:

  1. The Javascript code. The main script needs to be included from radiojar.com. It includes our own version of jQuery that uses the noConflict mechanism to avoid clashing with your own website's jQuery (if present).
  2. The HTML markup. Use the code provided, you can tweak it and add your own elements if you want as long as you keep the basic functioning parts that allow the Javascript code to work.
  3. The CSS. A starter stylesheet file is included inside the plugin. You can overwrite it though by including your own CSS file in the according settings to arrive at a design that matches your website's look & feel.

Check out the live demo below and click to get instructions for using the code on your website.

Show code Live example on JSFiddle

Include the following code at the point in your web page where you want to display the chat: 

<div id="rjp-chat">
</div>

Include the following code just before the closing body tag. Instead of "u0510s7hb", use your station's streamname. You can find it in the management area of your station: select Tools and then Widgets (check out the screenshot to the right for the exact location). The rest of the settings are optional, if you don't include them the defaults will apply. 

<script type="text/javascript" src="//www.radiojar.com/wrappers/api-plugins/v1/radiojar-min.js"></script>
<script>
   rjq('#rjp-chat').radiojar('chatProvider', {
       streamname: "u0510s7hb",
       width: 600,              // width of chat container in pixels (default is 700 pixels)
       height:300,              // height of chat container in pixels (default is 900 pixels)
       frameborder:false,       // show frameborder or not (default is false) 
       scrolling:"auto",        // yes, no, auto (default is no)
       cssfile:""               // your own custom css file url
   });
</script>