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:
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.
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:
|Attribute||Description||Can use with skype-button?||Can use with skype-chat?||Type||Default|
|data-id||Skype name of the contact (e.g. echo123) |
Microsoft account of the contact (e.g. email@example.com)
App ID of the bot that the chat is connected with
|data-can-collapse||Enables minimization functionality of the control||-||Yes||Boolean||false|
|data-can-close||Enables the close button in the web chat window. ||-||Yes||Boolean||true|
|data-can-upload-file||Enables the upload file button||Yes||Yes||Boolean||true|
|data-color||Color of the Skype button||Yes||-||Color||#00aff0
|data-color-message||Color of the chat incoming messages ||-||Yes||Color||#80ddff
|data-css-url||Link to a custom CSS, overriding the look and feel of the control||Yes||Yes||URL||-|
|data-show-header||Enables the conversation header||Yes||Yes||Boolean||true|
|data-text||Label next to the button||Yes||-||String||Contact us|
|data-theme||Enables a set of pre-defined themes (“light”, “dark”)||-||Yes||String||light|
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:
- 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.
- 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.
Happy Skype coding!