O Microsoft Live Messenger é a principal ferramenta de comunicação instantânea usada no mercado. Aprenda como integrar com o ASP.NET e disponibilizar diretamente em seu site. Com a opção de chat nos site  a comunicação entre cliente e vendedores humaniza-se a permitindo 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.

Referência: http://www.codigofonte.net/dicas/web/439_colocando-o-msn-messenger-...

 

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.

 

 Aprofunde seus conhecimentos sobre esse tema na comunidade ASP.NET

Exibições: 500

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

© 2019   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço