Posicionar icone java script na tela

HTML

CSS

JavaScript

07/06/2019

Ola, gostaria de ajuda com este script.
Não tenho muito conhecimento em programação porem tentei algumas coisas sem sucesso:
- Por entre <div> e manipular por css
- Tentei por dentro do script usando position
- Deixando o div class fora e tentando chamar dentro do script

O que preciso seria posicionar o icone do lado direto, um pouco acima do rodapé pois em certo momento uma barra sobe e o icone fica por cima.
Uma coisa mais arrojada seria o icone subir junto com a barra porem acabei desconsiderando por acreditar ser mais dificil, sendo assim o primeiro modo ja fica bom.

O código do script é:
<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            facebook: "facebookid", // Facebook page ID
            whatsapp: "+55XXXXXXXXXXX", // WhatsApp number
            email: "email@contato.com.br", // Email
            sms: "XXXXXXXXXXX", // Sms phone number - Somente Mobile
//          line: "Whatshelp", // Line QR code URL
//          call: "XX-XXXXXXXXX", // Call phone number
//          viber: "Whatshelp", // Call viber - Somente Mobile
//          snapchat: "Whatshelp", // Snapchat
//          telegram: "Whatshelp", // Telegram
//          vkontakte: "Whatshelp", // Vkontakte
            company_logo_url: "https://www.site.com.br/logo.png", // URL of company logo (png, jpg, gif)
            greeting_message: "Bem vindo ...", // Text of greeting message
            call_to_action: "Entre em contato", // Call to action
//          button_color: "#000000", // Preto
            button_color: "#129BF4", // Azul
            position: "right", // Position may be 'right' or 'left'
            order: "facebook,whatsapp,email" // Order of buttons
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>
<!-- /WhatsHelp.io widget -->


Quem puder me ajudar agradeço!
Guilherme

Guilherme

Curtidas 0

Respostas

Julio

Julio

07/06/2019

Amigo, por semântica e padrão, tente sempre customizar essas coisas simples apenas com CSS, isso você consegue facilmente assim:
<div class="footer">
<img src="caminho_icon.png" alt="icon">
</div>

// seu css
.footer {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
GOSTEI 0
Guilherme

Guilherme

07/06/2019

Amigo, por semântica e padrão, tente sempre customizar essas coisas simples apenas com CSS, isso você consegue facilmente assim:
<div class="footer">
<img src="caminho_icon.png" alt="icon">
</div>

// seu css
.footer {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

Então mais o problema é que no exemplo você colocou é uma imagem.
No caso preciso que o codigo java script fique entre <div></div> para tentar manipular a posição dele.
O que esta ocorrendo é que o javascript em seu código já tem a posição definida e tudo que manipulo entre <div></div> , ex: o codigo java script + <h2>Teste</h2>, o que esta no <h2> consigo mover e posicionar na tela porem o script(visivel icone do whatshelp que fica a direita no rodapé) não se move.
GOSTEI 0
POSTAR