Facebook Chat v5 设计覆盖问题

Question

Facebook 聊天很棒，即插即用。然而，它看起来和定位都很糟糕。

https://i.stack.imgur.com/akFLu.jpg

我正在寻找一种方式来设置它的样式，使其不碍事。事实上，它涵盖了 cookie 协议和产品页面上的购买按钮，这是不可接受的。

最终目标是拥有这样的东西：

https://i.stack.imgur.com/kyJra.jpg

一个可以展开聊天的小按钮，我可以放在他的左下角或右下角。

Facebook 聊天可以实现这样的功能吗？

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            xfbml            : true,
            version          : 'v5.0'
        });
    };

    (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/en_US/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="fb-customerchat"
attribution=setup_tool
page_id="##########"
theme_color="#E34F4B"
logged_in_greeting="Здравейте, с какво може да бъдем полезни?"
logged_out_greeting="Здравейте, с какво може да бъдем полезни?">
</div>

Answer 1

此参数：greeting_dialog_display 必须设置为 'hide' greeting_dialog_display='hide'

FB文档中的矛盾：

默认同时显示网络和移动设备：https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin#customization

默认在网络上显示并在移动设备上隐藏：https://developers.facebook.com/docs/messenger-platform/reference/web-plugins/#attributes

Facebook Chat v5 设计覆盖问题

Facebook Chat v5 design overlay issue

css

facebook

chat