Nesses artigos vamos utilizar o recurso da Microsoft e customizar esse componente para melhores resultados.
Com a opção de chat nos sites facilitou a comunicação entre cliente e vendedores tornando mais humano a interações entre ambos, e com essa modificação você poderá usar e abusar da nossa criatividade.
Desenvolvimento
Primeira mente precisamos configurar esse recurso no site da Microsoft, para acessar basta entrar nessa pagina http://settings.messenger.live.com/applications/WebSettings.aspx
Configuração do Modulo.
Você estará abrindo uma página de configurações do MSN no live.com, preencha seus dados referente ao seu Windows Live ID.
A próxima página irá exibir uma opção chamada " Permitir que qualquer pessoa na Web veja a minha presença e me envie mensagens.". Marque ela e clique em "salvar" na barra acima.
Após salvar suas configurações, clique no menu "Criar HTML" localizado na lateral esquerda.
Nesta página, vamos escolher o controle botão Lembrando que o seu usuário poderá utilizar seu Windows Live ID próprio ou manda uma mensagem como "Visitante".
Logo abaixo aparece um campo onde é exibido um código que você deve copiar e salvar em um bloco de notas.
Vamos iniciar o Visual Studio, criei um novo projeto Web Application ou Web Site nesse exemplo estou utilizando Web Application usando a versão do .NET Framework 3.5
Na página default.aspx entre no source da pagina, e acrescente na teg head o componente jquery,e vamos acrescentar o código Java script que fará o controle se o MSN esta online ou não, abaixo a imagem ilustrativa da estrutura do código.
Explorando o código Java script.
<script type="text/javascript">
<!--< Classe msnStatus ela retorna o status do MSN >-->
function msnStatus(presence) {
var idx = presence.id.indexOf('@');
if (idx >= 0) {
var id = presence.id.substr(0, idx);
var element = document.getElementById('Microsoft_Live_Messenger_PresenceButton_' + id);
if (element) {
element.innerHTML = "";
var conversationUrl = element.attributes['msgr:conversationUrl'].value;
var statusIcon = document.createElement('img');
var Status = statusIcon.title = presence.statusText;
<!--<Recebe o status da variável “Status”, e como valor fazemos as comparações e atribuímos para a variável especifica -->
$(document).ready(function () {
var txtMsnOn = "Clique aqui (Atendente está Online)";
var txtMsnOcupado = "Clique aqui (Atendente está Ocupado)";
var txtMsnAusente = "Clique aqui (Atendente está Ausente)"
var txtMsnOf = "Atendente está Offline";
$("#boxstatusMsn").removeAttr("class");
if (Status == "Offline") {
<!-- < Caso o status da variável seja offline, atribuo para o meu span o texto da variável “txtMsnOf”-->
$("#statusMsg").text(txtMsnOf);
}
else if (Status == "Ocupado") {
$("#statusMsg").text(txtMsnOcupado);
}
else if (Status == "Ausente") {
$("#statusMsg").text(txtMsnAusente);
}
else {
$("#statusMsg").text(txtMsnOn);
}
});
}
} }
</script>
Depois de conhecer a estrutura do java script temos que configurar o corpo de nossa pagina dentro da tag body ,precisamos colocar os seguinte código como no exemplo a baixo.
<div>
Atendimento:<span><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"><label id="statusMsg"></label></a></span>
<div id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"></div>
<script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&mkt=pt-br&cb=msnStatus"></script>
</div>
Agora precisamos usar o código gerado pela Microsoft que provavelmente está como o código abaixo. Nesse código o que vamos aproveitar e apenas o id gerado pela Microsoft localizado na letra vermelha uma vez localizado o id vamos copiar esse código e apagar a estrutura da Microsoft e vamos deixar na nossa body a estrutura que montei
Estrutura Microsoft.
<script type="text/javascript" src="http://settings.messenger.live.com/controls/1.0/PresenceButton.js"></script>
<div
id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca"
msgr:width="100"
msgr:backColor="#D7E8EC"
msgr:altBackColor="#FFFFFF"
msgr:foreColor="#424542"
msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-BR"></div>
<script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&mkt=pt-BR&cb=Microsoft_Live_Messenger_PresenceButton_onPresence"></script>
Estrutura Tutorial
Essa estrutura e que vamos utilizar no corpo da nossa pagina mais antes precisamos alterar o id dessa estrutura pelo id gerado pela Microsoft, para ter uma maior segurança podemos localizar e substituir usando o Visual Studio apertanto a tecla ctrl+f
<div>
Atendimento:<span><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"><label id="statusMsg"></label></a></span>
<div id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"></div>
<script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&mkt=pt-br&cb=msnStatus"></script>
</div>
Exemplo do código do body da pagina.
<body>
<form id="form1" runat="server">
<div>
Atendimento:<span><a href="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"><label id="statusMsg"></label></a></span>
<div id="Microsoft_Live_Messenger_PresenceButton_e709ab67aad5cfca" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=e709ab67aad5cfca@apps.messenger.live.com&mkt=pt-br"></div>
<script type="text/javascript" src="http://messenger.services.live.com/users/e709ab67aad5cfca@apps.messenger.live.com/presence?dt=&mkt=pt-br&cb=msnStatus"></script>
</div>
</form>
</body>
Resultado Final.
Com essa funcionalidade na sua pagina você poderá colocar imagem ou personalizar o status de acordo com a mensagem recebida pela Microsoft.