Create a WordPress Live Chat widget using Windows Live

Create a WordPress Live Chat widget using Windows Live

Anyone can create a website for any needs, but there are some functionalities needed that many persons not be able to afford. In this tutorial, we will discuss how to create and an Online Live Chat to your WordPress site without having to pay for a hosted service. Whether you are providing Online Support, Sales Chat or just would like your visitors to be in touch with you, this tutorial will help you.

Notes

For this tutorial, you will need a MSN ID. You can retrieve from logging in here Windows Live ID site

Step 1: Set Up

In this step, we will create a file called msnchat.php. This file will contain the following code.

/*
Plugin Name: Your Plugin Name Here
Plugin URI: http://yourpluginsite.com
Description: Description of the Plugin
Author: The Author Name Here
Version: 1.0.0
Author URI: http://theauthoraddress.com
*/

These comments will inform WordPress about the Widget we are trying to install. It will explain the Version, Name, Author etc…Next, we begin our Widget API structure, add the following to your file.

class MsnChat_Widget extends WP_Widget {

    public function __construct() {
        // widget actual processes
    }

    public function form( $instance ) {
        // outputs the options form on admin
    }

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
    }

    public function widget( $args, $instance ) {
        // outputs the content of the widget
    }
}
add_action( 'widgets_init',
create_function( '', 'register_widget( "msnchat_widget" );' )
);

We create our class MsnChat_Widget which extends the WordPress Widget Class. After that class has been established, we use the add_action and widgets_init to register our Widget.

Step 2: Adding Information to the Widget

The first thing that we are going to do is add some information about our widget. This information will be shown on the Widget list page.

// Registering Widget with WordPress
public function __construct() {
// widget actual processes
parent::__construct(
'msnchat_widget', // Widget ID
'MsnChat_Widget', // Name of Widget
array(
'description' => __( 'Speak to your site visitors using your MSN Live Account',
'text_domain' )
)
);
}

Step 3: Building our form

The MSN Live box will have some features that we would like to make configurable in our widget. We would like to make options to change: Width, Height, Live ID and Theme. Add the following code.

public function form( $instance ) {
  //Create an error of themes for Select list
  $themes = array('Default','Blue','Green','Orange','Pink','Purple','Grey');
  ?>
  <p>
  <label for="<?php echo $this->get_field_id('invitee'); ?>">
  <?php _e( 'Msn ID:' ); ?>
  </label>
  <input
  class="widefat" id="<?php echo $this->get_field_id( 'invitee'); ?>"
  name="<?php echo $this->get_field_name( 'invitee'); ?>"
  type="text" value="<?php echo  esc_attr( $instance[ 'invitee' ]); ?>"
  />
  </p>
  <p>
  <label for="<?php echo $this->get_field_id( 'theme' ); ?>">
  <?php _e( 'Theme:' ); ?>
  </label>
  <select
  name="<?php echo $this->get_field_name( 'theme'); ?>"
  id="<?php echo $this->get_field_id('theme'); ?>">
  <?php foreach($themes as $key=>$value)
  if($key == $instance['theme']){ $selected = 'selected="selected"'; }
  { ?>
  <option  value="<?php echo $key; ?>"  <?php echo $selected; ?>
  ><?php echo $value; ?>
  </option>
  <?php } ?>
  </select>
  </p>
  <label for="<?php echo $this->get_field_id('width'); ?>">
  <?php _e( 'Width:' ); ?>
  </label>
  <input class="widefat"
  id="<?php echo $this->get_field_id( 'width'); ?>"
  name="<?php echo $this->get_field_name( 'width'); ?>"
  type="text"
  value="<?php echo esc_attr( $instance[ 'width' ]); ?>"
  />
  </p>
  <p>
  <label for="<?php echo $this->get_field_id('height'); ?>">
  <?php _e( 'Height:' ); ?>
  </label>
  <input class="widefat"
  id="<?php echo $this->get_field_id( 'height'); ?>"
  name="<?php echo $this->get_field_name( 'height'); ?>"
  type="text" value="<?php echo esc_attr( $instance[ 'height' ]); ?>"
  />
  </p>
  <?php
  }

The first few lines of the function is an array of the available to choose from. In the code we have some textfields which we use for the Height, Width and Live ID. We’ve also looped through each Theme, turning each of them into a selectable option

Take note of the WordPress Core Functions used

  • get_field_id
  • esc_attr

Step 4: Saving our Options

If only, our options were automatically saved without code but they’re not, so we have to build a function to save them. This is done using a public function called update. This function will take the old options “$old_instance” and swap them with the new ones. Any new options will be added. As simple as it sounds is as simple it is to be done. Copy the following

public function update( $new_instance, $old_instance ) {
// processes widget options to be saved
$instance = $old_instance;
$instance['invitee'] = strip_tags( $new_instance['invitee'] );
$instance['theme'] = $new_instance['theme'];
$instance['width'] = $new_instance['width'];
$instance['height'] = $new_instance['height'];
return $instance;
}

Step 4: Displaying the Widget

Phew! We are finally here. Time to unveil our widget but in order to do this, we must write our final function widget. This function will simply out all our data into HTML. At this step, we will use the Options created and output them with our MSN Embed script. Take a look the following

public function widget( $args, $instance ) {
//Define Widget Options as Variables for easier use
$invitee    = $instance[ 'invitee' ];
$width      = $instance[ 'width' ];
$height     = $instance[ 'height' ];
$theme      = $instance[ 'theme' ];

The snippet above, defines the Widget Options into variables. These variables will be used later in our code. Let’s continue…

//Create an Array of Themes to Choose From
$themes     = array();  

$themes['0'] = '';

$themes['1'] = '&useTheme=true&themeName=blue&foreColor=333333&backColor=E8F1F8';
$themes['1'] .='&linkColor=333333&borderColor=AFD3EB&buttonForeColor=333333&';
$themes['1'] .='buttonBackColor=EEF7FE&buttonBorderColor=AFD3EB&buttonDisabledColor=EEF7FE&';
$themes['1'] .='headerForeColor=0066A7&headerBackColor=8EBBD8&menuForeColor=333333&';
$themes['1'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['1'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['2'] = '&useTheme=true&themeName=green&foreColor=333333&backColor=DCF2E5';
$themes['2'] .='&linkColor=333333&borderColor=8ED4AB&buttonForeColor=2C0034&';
$themes['2'] .='buttonBackColor=CFE9D9&buttonBorderColor=8ED4AB&buttonDisabledColor=CFE9D9&';
$themes['2'] .='headerForeColor=006629&headerBackColor=92D6AE&menuForeColor=006629&';
$themes['2'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=F4FBF7';
$themes['2'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C'; 

$themes['3'] = '&useTheme=true&themeName=orange&foreColor=333333&backColor=FDC098';
$themes['3'] .='&linkColor=333333&borderColor=FB8233&buttonForeColor=333333&';
$themes['3'] .='buttonBackColor=FFC9A5&buttonBorderColor=FB8233&buttonDisabledColor=FFC9A5&';
$themes['3'] .='headerForeColor=333333&headerBackColor=FC9E60&menuForeColor=333333&';
$themes['3'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['3'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['4'] = '&useTheme=true&themeName=pink&foreColor=444444&backColor=FFD5D5';
$themes['4'] .='&linkColor=444444&borderColor=ED7B7B&buttonForeColor=AA3636&';
$themes['4'] .='buttonBackColor=FAD6D6&buttonBorderColor=AA3636&buttonDisabledColor=FAD6D6&';
$themes['4'] .='headerForeColor=444444&headerBackColor=F9A3A3&menuForeColor=E45A5A&';
$themes['4'] .='menuBackColor=FFFFFF&chatForeColor=444444&chatBackColor=FEF6F6';
$themes['4'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['5'] = '&useTheme=true&themeName=purple&foreColor=333333&backColor=F1EFF4';
$themes['5'] .='&linkColor=333333&borderColor=AFA9B4&buttonForeColor=333333&amp';
$themes['5'] .=';buttonBackColor=DED6DE&buttonBorderColor=AFA9B4&buttonDisabledColor=DED6DE&';
$themes['5'] .='headerForeColor=513663&headerBackColor=AEA1B9&menuForeColor=333333&';
$themes['5'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['5'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['6'] = '&useTheme=true&themeName=gray&foreColor=676769&backColor=DBDBDB';
$themes['6'] .= '&linkColor=444444&borderColor=8D8D8D&buttonForeColor=99CC33&';
$themes['6'] .= 'buttonBackColor=676769&buttonBorderColor=99CC33&buttonDisabledColor=F1F1F1&';
$themes['6'] .= 'headerForeColor=729527&headerBackColor=B2B2B2&menuForeColor=676769&';
$themes['6'] .= 'menuBackColor=BBBBBB&chatForeColor=99CC33&chatBackColor=EAEAEA';
$themes['6'] .= '&chatDisabledColor=B2B2B2&chatErrorColor=760502&chatLabelColor=6E6C6C';

In this snippet, we took all the available themes for our MSN script and placed them into an array to be used later. This makes our code look a lot cleaner.

//Display Embed Script. Replacing Attributes with Widget Options.
//Options changed : Msn/Windows Live ID, Theme, Width and Height
$html = '<iframe src="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=XXXXXXXXXXXXX';
$html .='@apps.messenger.live.com&mkt=en-US" width="300" height="300" ';
$html .='style="border: solid 1px black; width: 300px; height: 300px;" frameborder="0" scrolling="no"></iframe>';
echo $html;
}

Now, finally we output our Widget. We use the MSN Embed Script (Embed Script) and replaced some of the Attributes using our variables. The original code looked like the following

//Display Embed Script. Replacing Attributes with Widget Options.
        //Options changed : Msn/Windows Live ID, Theme, Width and Height
$html = '<iframe src="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee='.$invitee;
$html .='@apps.messenger.live.com&mkt=en-US'.$themes[$theme].'" width="'.$width.'" height="'.$height.'"';
$html .=' style="border: solid 1px black; width: '.$width.'px; height: '.$height.'px;"';
$html.= ' frameborder="0" scrolling="no"></iframe>';

The entire function

public function widget( $args, $instance ) {
    //Define Widget Options as Variables for easier use
    $invitee    = $instance[ 'invitee' ];
    $width      = $instance[ 'width' ];
    $height     = $instance[ 'height' ];
    $theme      = $instance[ 'theme' ];

    //Create an Array of Themes to Choose From
    $themes     = array();  

$themes['0'] = '';

$themes['1'] = '&useTheme=true&themeName=blue&foreColor=333333&backColor=E8F1F8';
$themes['1'] .='&linkColor=333333&borderColor=AFD3EB&buttonForeColor=333333&';
$themes['1'] .='buttonBackColor=EEF7FE&buttonBorderColor=AFD3EB&buttonDisabledColor=EEF7FE&';
$themes['1'] .='headerForeColor=0066A7&headerBackColor=8EBBD8&menuForeColor=333333&';
$themes['1'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['1'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['2'] = '&useTheme=true&themeName=green&foreColor=333333&backColor=DCF2E5';
$themes['2'] .='&linkColor=333333&borderColor=8ED4AB&buttonForeColor=2C0034&';
$themes['2'] .='buttonBackColor=CFE9D9&buttonBorderColor=8ED4AB&buttonDisabledColor=CFE9D9&';
$themes['2'] .='headerForeColor=006629&headerBackColor=92D6AE&menuForeColor=006629&';
$themes['2'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=F4FBF7';
$themes['2'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C'; 

$themes['3'] = '&useTheme=true&themeName=orange&foreColor=333333&backColor=FDC098';
$themes['3'] .='&linkColor=333333&borderColor=FB8233&buttonForeColor=333333&';
$themes['3'] .='buttonBackColor=FFC9A5&buttonBorderColor=FB8233&buttonDisabledColor=FFC9A5&';
$themes['3'] .='headerForeColor=333333&headerBackColor=FC9E60&menuForeColor=333333&';
$themes['3'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['3'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['4'] = '&useTheme=true&themeName=pink&foreColor=444444&backColor=FFD5D5';
$themes['4'] .='&linkColor=444444&borderColor=ED7B7B&buttonForeColor=AA3636&';
$themes['4'] .='buttonBackColor=FAD6D6&buttonBorderColor=AA3636&buttonDisabledColor=FAD6D6&';
$themes['4'] .='headerForeColor=444444&headerBackColor=F9A3A3&menuForeColor=E45A5A&';
$themes['4'] .='menuBackColor=FFFFFF&chatForeColor=444444&chatBackColor=FEF6F6';
$themes['4'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['5'] = '&useTheme=true&themeName=purple&foreColor=333333&backColor=F1EFF4';
$themes['5'] .='&linkColor=333333&borderColor=AFA9B4&buttonForeColor=333333&amp';
$themes['5'] .=';buttonBackColor=DED6DE&buttonBorderColor=AFA9B4&buttonDisabledColor=DED6DE&';
$themes['5'] .='headerForeColor=513663&headerBackColor=AEA1B9&menuForeColor=333333&';
$themes['5'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['5'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['6'] = '&useTheme=true&themeName=gray&foreColor=676769&backColor=DBDBDB';
$themes['6'] .= '&linkColor=444444&borderColor=8D8D8D&buttonForeColor=99CC33&';
$themes['6'] .= 'buttonBackColor=676769&buttonBorderColor=99CC33&buttonDisabledColor=F1F1F1&';
$themes['6'] .= 'headerForeColor=729527&headerBackColor=B2B2B2&menuForeColor=676769&';
$themes['6'] .= 'menuBackColor=BBBBBB&chatForeColor=99CC33&chatBackColor=EAEAEA';
$themes['6'] .= '&chatDisabledColor=B2B2B2&chatErrorColor=760502&chatLabelColor=6E6C6C';

    //Display Embed Script. Replacing Attributes with Widget Options.
        //Options changed : Msn/Windows Live ID, Theme, Width and Height
$html = '<iframe src="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee='.$invitee;
$html .='@apps.messenger.live.com&mkt=en-US'.$themes[$theme].'" width="'.$width.'" height="'.$height.'"';
$html .=' style="border: solid 1px black; width: '.$width.'px; height: '.$height.'px;"';
$html.= ' frameborder="0" scrolling="no"></iframe>';
echo $html;
    }

Total Code

/*
Plugin Name: Your Plugin Name Here
Plugin URI: http://yourpluginsite.com
Description: Description of the Plugin
Author: The Author Name Here
Version: 1.0.0
Author URI: http://theauthoraddress.com
*/
// Registering Widget with WordPress
public function __construct() {
// widget actual processes
    parent::__construct(
    'msnchat_widget', // Widget ID
    'MsnChat_Widget', // Name of Widget
    array(
    'description' => __( 'Speak to your site visitors using your MSN Live Account',
    'text_domain' )
    )
    );
    }

public function form( $instance ) {
  //Create an error of themes for Select list
  $themes = array('Default','Blue','Green','Orange','Pink','Purple','Grey');
  ?>
  <p>
  <label for="<?php echo $this->get_field_id('invitee'); ?>">
  <?php _e( 'Msn ID:' ); ?>
  </label>
  <input
  class="widefat" id="<?php echo $this->get_field_id( 'invitee'); ?>"
  name="<?php echo $this->get_field_name( 'invitee'); ?>"
  type="text" value="<?php echo  esc_attr( $instance[ 'invitee' ]); ?>"
  />
  </p>
  <p>
  <label for="<?php echo $this->get_field_id( 'theme' ); ?>">
  <?php _e( 'Theme:' ); ?>
  </label>
  <select
  name="<?php echo $this->get_field_name( 'theme'); ?>"
  id="<?php echo $this->get_field_id('theme'); ?>">
  <?php foreach($themes as $key=>$value)
  if($key == $instance['theme']){ $selected = 'selected="selected"'; }
  { ?>
  <option  value="<?php echo $key; ?>"  <?php echo $selected; ?>
  ><?php echo $value; ?>
  </option>
  <?php } ?>
  </select>
  </p>
  <label for="<?php echo $this->get_field_id('width'); ?>">
  <?php _e( 'Width:' ); ?>
  </label>
  <input class="widefat"
  id="<?php echo $this->get_field_id( 'width'); ?>"
  name="<?php echo $this->get_field_name( 'width'); ?>"
  type="text"
  value="<?php echo esc_attr( $instance[ 'width' ]); ?>"
  />
  </p>
  <p>
  <label for="<?php echo $this->get_field_id('height'); ?>">
  <?php _e( 'Height:' ); ?>
  </label>
  <input class="widefat"
  id="<?php echo $this->get_field_id( 'height'); ?>"
  name="<?php echo $this->get_field_name( 'height'); ?>"
  type="text" value="<?php echo esc_attr( $instance[ 'height' ]); ?>"
  />
  </p>
  <?php
  }

public function update( $new_instance, $old_instance ) {
// processes widget options to be saved
$instance = $old_instance;
$instance['invitee'] = strip_tags( $new_instance['invitee'] );
$instance['theme'] = $new_instance['theme'];
$instance['width'] = $new_instance['width'];
$instance['height'] = $new_instance['height'];
return $instance;
}
public function widget( $args, $instance ) {
    //Define Widget Options as Variables for easier use
    $invitee    = $instance[ 'invitee' ];
    $width      = $instance[ 'width' ];
    $height     = $instance[ 'height' ];
    $theme      = $instance[ 'theme' ];
//Create an Array of Themes to Choose From
    $themes     = array();  

$themes['0'] = '';

$themes['1'] = '&useTheme=true&themeName=blue&foreColor=333333&backColor=E8F1F8';
$themes['1'] .='&linkColor=333333&borderColor=AFD3EB&buttonForeColor=333333&';
$themes['1'] .='buttonBackColor=EEF7FE&buttonBorderColor=AFD3EB&buttonDisabledColor=EEF7FE&';
$themes['1'] .='headerForeColor=0066A7&headerBackColor=8EBBD8&menuForeColor=333333&';
$themes['1'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['1'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['2'] = '&useTheme=true&themeName=green&foreColor=333333&backColor=DCF2E5';
$themes['2'] .='&linkColor=333333&borderColor=8ED4AB&buttonForeColor=2C0034&';
$themes['2'] .='buttonBackColor=CFE9D9&buttonBorderColor=8ED4AB&buttonDisabledColor=CFE9D9&';
$themes['2'] .='headerForeColor=006629&headerBackColor=92D6AE&menuForeColor=006629&';
$themes['2'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=F4FBF7';
$themes['2'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C'; 

$themes['3'] = '&useTheme=true&themeName=orange&foreColor=333333&backColor=FDC098';
$themes['3'] .='&linkColor=333333&borderColor=FB8233&buttonForeColor=333333&';
$themes['3'] .='buttonBackColor=FFC9A5&buttonBorderColor=FB8233&buttonDisabledColor=FFC9A5&';
$themes['3'] .='headerForeColor=333333&headerBackColor=FC9E60&menuForeColor=333333&';
$themes['3'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['3'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['4'] = '&useTheme=true&themeName=pink&foreColor=444444&backColor=FFD5D5';
$themes['4'] .='&linkColor=444444&borderColor=ED7B7B&buttonForeColor=AA3636&';
$themes['4'] .='buttonBackColor=FAD6D6&buttonBorderColor=AA3636&buttonDisabledColor=FAD6D6&';
$themes['4'] .='headerForeColor=444444&headerBackColor=F9A3A3&menuForeColor=E45A5A&';
$themes['4'] .='menuBackColor=FFFFFF&chatForeColor=444444&chatBackColor=FEF6F6';
$themes['4'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['5'] = '&useTheme=true&themeName=purple&foreColor=333333&backColor=F1EFF4';
$themes['5'] .='&linkColor=333333&borderColor=AFA9B4&buttonForeColor=333333&amp';
$themes['5'] .=';buttonBackColor=DED6DE&buttonBorderColor=AFA9B4&buttonDisabledColor=DED6DE&';
$themes['5'] .='headerForeColor=513663&headerBackColor=AEA1B9&menuForeColor=333333&';
$themes['5'] .='menuBackColor=FFFFFF&chatForeColor=333333&chatBackColor=FFFFFF';
$themes['5'] .='&chatDisabledColor=F6F6F6&chatErrorColor=760502&chatLabelColor=6E6C6C';

$themes['6'] = '&useTheme=true&themeName=gray&foreColor=676769&backColor=DBDBDB';
$themes['6'] .= '&linkColor=444444&borderColor=8D8D8D&buttonForeColor=99CC33&';
$themes['6'] .= 'buttonBackColor=676769&buttonBorderColor=99CC33&buttonDisabledColor=F1F1F1&';
$themes['6'] .= 'headerForeColor=729527&headerBackColor=B2B2B2&menuForeColor=676769&';
$themes['6'] .= 'menuBackColor=BBBBBB&chatForeColor=99CC33&chatBackColor=EAEAEA';
$themes['6'] .= '&chatDisabledColor=B2B2B2&chatErrorColor=760502&chatLabelColor=6E6C6C';
    //Display Embed Script. Replacing Attributes with Widget Options.
        //Options changed : Msn/Windows Live ID, Theme, Width and Height
$html = '<iframe src="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee='.$invitee;
$html .='@apps.messenger.live.com&mkt=en-US'.$themes[$theme].'" width="'.$width.'" height="'.$height.'"';
$html .=' style="border: solid 1px black; width: '.$width.'px; height: '.$height.'px;"';
$html.= ' frameborder="0" scrolling="no"></iframe>';
    }

add_action( 'widgets_init',
create_function( '', 'register_widget( "msnchat_widget" );' )
);
?>

There you go, a fully configurable WordPress MSN Chat. Now go forth and code. Happy Coding!!!

About the Author