Super-charge your web sites with the free Skype web control

Introduction

Not many people know that Skype provides a fairly full-featured web control that you can add to any web page. The control allows visitors to your web site to chat directly with a Skype account owned by you, through an integrated web client. The control is fully customizable – you can change the look and feel of the Skype button and the Skype chat screen. Best of all – it is completely free of charge!

This post will show you how to add a Skype web control to your web site in a few simple steps.

It takes 2 lines of code

Let’s assume that you have the following pre-existing page on your web site:

<html>
  <body>
    <h1>Welcome to my web site!</h1>
    <p>Lovely!</p>

  </body>
</html>

This of course renders as follows in the browser:

Now, we want to add the Skype web control. We do that directly in the <body/> section with 2 simple lines of code:

<html>
  <body>
    <h1>Welcome to my web site!</h1>
    <p>Lovely!</p>


    <div 
        class="skype-button bubble" 
        data-id="3e132711-1e11-4feb-9808-ce57cd872f8f">
    </div>

    <script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>


  </body>
</html>

The <script/> tag above brings in the Skype web control. The <div/> tag configures the control. In this particular case, we are using the bubble style for the button, and have pointed the control to the Your Face bot (using the bot / app ID, which can be extracted from the preceding join link). 

Your Face (which you can also find in the Skype bot directory) is a sample bot, which asks you to send it a photo of a face, complains if you don’t send it a face, or tries to offend you if do send it a face. Good times! 

Congratulations! You just added a Skype web control to your web page. Here are the results:

Tapping on the blue Skype button opens a full-fledged anonymous Skype chat with Your Face, directly embedded in your web page.

Simple customizations of the Skype button and the Skype chat window

In the <div> element above, you can choose one of 3 predefined skype-button styles:

Skype-Button TypeCode
Bubble

...
<div class="skype-button bubble"...></div>
<script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>
...
Rounded

...
<div class="skype-button rounded"...></div>
<script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>
...
Rectangle

...
<div class="skype-button rectangle"...></div>
<script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>
...

Tapping on the button opens the chat screen. You can also decide to have the chat screen open by default. You achieve that by using and configuring the skype-chat class.

Skype-Chat TypeCode
Full screen
...
<div class="skype-chat fullscreen"...></div>
<script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>
...

 

It’s important to note that these elements are independent. i.e. you can have both elements on the same web page.

...
<div class="skype-button ..."></div>
...
<div class="skype-chat ..."></div>
...

If you do that, you will have individualized control over the look of the button and the look of the chat that appears when the button is clicked.

In addition, you can use both data-* attribuites and CSS to manipulate functionality and look and feel. Here’s a list of attributes you can use:

AttributeDescriptionCan use with skype-button?Can use with skype-chat?TypeDefault
data-idSkype name of the contact (e.g. echo123)

OR…
Microsoft account of the contact (e.g. foo@outlook.com)

OR…
App ID of the bot that the chat is connected with
YesYesString-
data-can-collapse
Enables minimization functionality of the control-YesBooleanfalse
data-can-close
Enables the close button in the web chat window.
-YesBooleantrue
data-can-upload-file
Enables the upload file button
YesYesBooleantrue
data-color
Color of the Skype button
Yes-Color#00aff0
data-color-message
Color of the chat incoming messages
-YesColor#80ddff
data-css-url
Link to a custom CSS, overriding the look and feel of the control
YesYesURL-
data-show-header
Enables the conversation header
YesYesBooleantrue
data-text
Label next to the button
Yes-StringContact us
data-theme
Enables a set of pre-defined themes (“light”, “dark”)
-YesStringlight

The first data attribute (data-id) is special – as shown above, it connects your web control to either a Skype bot (using the ID from its join link) or a Skype contact.

Simple customizations – in action

Now, let’s apply a few simple customizations, by using attributes. Let’s say we wanted to apply orange color to the button and to the incoming chat bubbles, apply the dark theme, and remove the header. Here’s how to do it:

<html>
  <body color="gray">
    <h1>Welcome to my web site!</h1>
    <p>Lovely!</p>

    <div 
        class="skype-button bubble" 
        data-id="3e132711-1e11-4feb-9808-ce57cd872f8f"
        data-color="#ff8b02" 
        >
    </div>

    <div 
        class="skype-chat" 
        data-id="3e132711-1e11-4feb-9808-ce57cd872f8f"
        data-color-message="#ffb660"
        data-show-header="false"
        data-theme="dark"
        >
    </div>

    <script src="https://swc.cdn.skype.com/sdk/v1/sdk.min.js"></script>

  </body>
</html>

And here are the results:

Additional considerations

  1. While you can have multiple buttons on a web page, you can only have a single chat control. If you have more than one <div class=”skype-chat …”> element on your web page, the first one you have “wins”. We will be extending support for multiple chats shortly.
  2. Right now there is no way to enforce sign-in for bots. However, if you point the Skype web control to a non-bot Skype account, then the Skype web control will enforce sign-in. This protects non-bot accounts against spammers.

Easy!

As you can see – integrating Skype in your web sites is easy (see terms of use). In the next posts, we will show you how to do advanced customizations using CSS as well as how to enable plugin-less video and audio calls.

Happy Skype coding!