How to position this button correctly?

Asked

Viewed 234 times

-2

I’m using a script of the Facebook Messenger marketing platform called Whatshelp, this script renders a button on the right next to the footer.

I’m having a hard time manipulating your position on the screen, where I’d like to move the generated button element up a little bit more, how do I do this?

<!-- WhatsHelp.io widget -->
<script type="text/javascript">
    (function () {
        var options = {
            facebook: "facebookid", // Facebook page ID
            whatsapp: "+55XXXXXXXXXXX", // WhatsApp number
            email: "[email protected]", // 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 -->

Illustrative figure

inserir a descrição da imagem aqui

I couldn’t find the field to comment and paste the CSS code so I’m editing the question, please if I’m doing it incorrectly correct me.

I clicked on the icon with right click and clicked on Inspect
This contents opened on the left side 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-9 -10 41 44" class="wh-messenger-svg-close wh-svg-close"><path d=" M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill-rule="evenodd"></path></svg>

This content in Styles 

element.style {
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list.wh-widget-activator-as-close>a.wh-widget-button.wh-widget-button-activator div.wh-widget-button-icon .wh-svg-close {
    display: inline;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon .wh-svg-close {
    display: none;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon svg {
    fill: white;
    width: 41px;
    height: 50px;
}
svg {
    fill: white;
}
* {
    -webkit-tap-highlight-color: transparent !important;
}
user agent stylesheet
svg:not(:root) {
    overflow: hidden;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button div.wh-widget-button-icon {
    float: left;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    font-size: 28px;
    text-align: center;
    line-height: 50px;
    color: white;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list>a.wh-widget-button {
    display: none;
    text-decoration: none;
    font-weight: normal;
    margin-top: 14px;
    position: relative;
    outline: none;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
div.wh-widget-send-button-wrapper div.wh-widget-send-button-wrapper-list {
    margin: 10px;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
    position: relative;
    bottom: 3px;
    text-align: center;
}
div.wh-widget-send-button-wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    position: fixed;
    z-index: 16000160;
    bottom: 0;
    text-align: center;
    overflow: hidden;
}
css

  • See in source code what type of HTML element is generated and do this via CSS.

  • 1

    Only podemost help you if you post at least the html structure that the code generates. css would also be helpful

  • @Sam Panda I’m trying to post the CSS code but I can’t find it, I try to paste the code here in the Comments field but it has character limit. How do I do?

  • @Panda I do not understand this forum very well, how I can post the CSS code?

  • Analyzing the code I arrived at options shift_vertical and shift_horizontal but inserting these options in var options = { do not generate effect. I believe that the script has some protection that clears these options before starting, if anyone can help I’m grateful, I just need to climb the icon a few centimeters up

1 answer

-1

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.