Question

因此，我已经在我的网站上安装了facebook客户聊天Messenger插件，并且工作正常，但是我需要将其与网站左侧对齐，并且如果可能的话，还要更改按钮的大小（很大）。 / p>

我的代码是：

<script>(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = 'https://connect.facebook.net/pt_PT/sdk/xfbml.customerchat.js';
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));</script>

<div class="fmessengerBtn">
<script>
    window.fbAsyncInit = function() {
        FB.init({
            xfbml: true,
            version : "v3.2"
        });
    };
    </script>
    <div id="fb-root"></div>
    <div class="fb-customerchat" 
        attribution=setup_tool 
        page_id="372545293082246" 
        theme_color="#0b9bb8" 
        greeting_dialog_display="fade" 
        greeting_dialog_delay="60" 
        ref="home" 
        logged_in_greeting="Fale conosco" 
        logged_out_greeting="Fale conosco">
    </div>
    </div>

我尝试仅使用CSS来对齐容器div，但是聊天窗口将保留在网站的右侧...是否有某种属性或选项将其设置为左侧代替？当然，这是很多其他人需要做的事情

而且，greeting_dialog_delay选项似乎不起作用

Answer 1

以下CSS似乎目前可以正常使用（因为类可能会更改）：

/* ***************
 * FB on left side 
 ******************/
/* this is for the circle position */
.fb_dialog.fb_dialog_advanced {
    left: 18pt;
}

/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
    left: 9pt;
}
iframe.fb_customer_chat_bounce_out_v2 {
    left: 9pt;
}

Answer 2

我稍微调整了代码，以防您想将小部件保留在右下方，而只是将其向左移一些（例如，它阻止了另一个元素）

.fb_dialog.fb_dialog_advanced {
    right: 18pt;
  margin-right: 50px;
}
iframe.fb_customer_chat_bounce_in_v2 {
    right: 9pt;
   margin-right: 50px;
}
iframe.fb_customer_chat_bounce_out_v2 {
    right: 9pt;
   margin-right: 50px;
}

Answer 3

要添加到@Cubakos的答案中，以使弹跳和弹跳动画：

@keyframes fb_bounce_in_v2 {
    0% {
        opacity: 0;
        transform: scale(0, 0);
        transform-origin: bottom left;
    }

    50% {
        transform: scale(1.03, 1.03);
        transform-origin: bottom left;
    }

    100% {
        opacity: 1;
        transform: scale(1, 1);
        transform-origin: bottom left;
    }
}

@keyframes fb_bounce_out_v2 {
    0% {
        opacity: 1;
        transform: scale(1, 1);
        transform-origin: bottom left;
    }

    100% {
        opacity: 0;
        transform: scale(0, 0);
        transform-origin: bottom left;
    }
}

Answer 4

将@Cubakos和@Kuttoosan的答案结合起来+对放置聊天气泡进行了调整，因为此处发布的方法不再适合我。

/* The following is for the chat bubble */
.fb_dialog_content>iframe {
  left: 18pt;
}

/* The following are for the chat box, on display and on hide */
iframe.fb_customer_chat_bounce_in_v2 {
  left: 9pt;
}

iframe.fb_customer_chat_bounce_out_v2 {
  left: 9pt;
}

/* The following are for the bounce in/out animations */
@keyframes fb_bounce_in_v2 {
  0% {
    opacity: 0;
    transform: scale(0, 0);
    transform-origin: bottom left;
  }

  50% {
    transform: scale(1.03, 1.03);
    transform-origin: bottom left;
  }

  100% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: bottom left;
  }
}

@keyframes fb_bounce_out_v2 {
  0% {
    opacity: 1;
    transform: scale(1, 1);
    transform-origin: bottom left;
  }

  100% {
    opacity: 0;
    transform: scale(0, 0);
    transform-origin: bottom left;
  }
}

Answer 5

尝试以下代码

.fb_dialog {
position: -webkit-sticky !important;
position: fixed !important;
bottom: 95px !important;
right: 30px !important;
}

Answer 6

过了一会儿，我意识到我们无法通过 CSS 自定义此插件，因为

<块引用>

"不可能将 iframe 中包含的元素的样式设置为由于 HTML，您会在您的网站上使用普通的 HTML 元素限制” https://wordpress.org/support/topic/resize-messenger-icon/

您可以从 Facebook 业务页面自定义您的聊天插件，只有 3 件事：

对齐
颜色
底部间距（适用于移动设备和桌面设备）

在右侧页面中，有预览页面供您了解您的定制将是什么样子。

自定义后，不要忘记点击按钮发布以保存您的更改。

无法更轻松地调整徽标大小或样式是一种痛苦，我希望未来的 Facebook 可以给我们更多的力量来做我们想做的事情。

Facebook客户聊天Messenger定位

6 个答案: