調整網站對話插件顯示
以下說明幾種常用的情景如何利用 CSS 調整對話插件
調整對話插件顯示位置
在 Omnichat 安裝代碼中的 </script>
後面 加上 以下代碼 (二選一,依照您的對話插件位置左右去選擇):
若您的對話插件設定在右邊請加入以下代碼:
<style type="text/css">
#easychat-floating-button {
bottom: 15px;
right: 15px;
}
</style>
bottom
後面的數字 15px
代表對話插件與 網頁的最底邊界 的距離 (預設是 15px),若您想要讓您的插件出現在比較上面一點,請改成比 15
更大的數字,實際需要多大的數字可以根據您的網站 UI 配置。
right
後面的數字 15px
代表對話插件與 網頁的最右邊界 的距離 (預設是 15px),若您想要讓您的插件出現在比較左邊一點,請改成比 15
更大的數字,實際需要多大的數字可以根據您的網站 UI 配置。
若您的對話插件設定在左邊請加入以下代碼:
<style type="text/css">
#easychat-floating-button-left {
bottom: 15px;
left: 15px;
}
</style>
bottom
後面的數字 15px
代表對話插件與 網頁的最底邊界 的距離 (預設是 15px),若您想要讓您的插件出現在比較上面一點,請改成比 15
更大的數字,實際需要多大的數字可以根據您的網站 UI 配置。
left
後面的數字 15px
代表對話插件與 網頁的最左邊界 的距離 (預設是 15px),若您想要讓您的插件出現在比較右邊一點,請改成比 15
更大的數字,實際需要多大的數字可以根據您的網站 UI 配置。
範例
若設定的代碼為:
<style type="text/css">
#easychat-floating-button {
bottom: 50px;
right: 50px;
}
</style>
則對話插件距離 右邊邊界 會變成 50px
,距離 下方邊界 也會變成 50px
。
調整對話插件顯示大小
在 Omnichat 安裝代碼中的 </script>
後面 加上 以下代碼:
<style type="text/css">
#easychat-floating-button,
#easychat-floating-button-left,
#easychat-floating-button.omnichat-icon-wrapper.plugin-animation,
#easychat-floating-button-left.omnichat-icon-wrapper.plugin-animation {
width: 80px !important;
height: 80px !important;
}
</style>
width:
以及 height:
後面的 80px
代表插件顯示的大小,您可以依照需求去調整。
<style type="text/css">
#easychat-floating-button,
#easychat-floating-button-left,
#easychat-floating-button.omnichat-icon-wrapper.plugin-animation,
#easychat-floating-button-left.omnichat-icon-wrapper.plugin-animation {
width: 80px !important;
height: 80px !important;
}
#easychat-floating-button #custom-icon-img,
#easychat-floating-button-left #custom-icon-img {
width: 80px !important;
height: 80px !important;
}
</style>
隱藏對話插件
若您希望在網站上不要顯示網站對話插件,也可以利用 CSS 來達成。
在 Omnichat 安裝代碼中的 </script>
後面 加上 以下代碼:
<style type="text/css">
#easychat-floating-button,
#easychat-floating-button-left {
display: none !important;
}
</style>
在手機版網頁調整對話插件顯示
在手機版網頁,由於顯示區域相較桌機的瀏覽器小很多,所以對話插件會有機會擋到您網站上的 加入購物車 或是 結帳按鈕,您可以依照下列方式去小整插件高度以及大小。
在 Omnichat 安裝代碼中的 </script>
後面 加上 以下代碼:
若您的對話插件設定在右邊,又希望在手機版把插件縮小到 40px,並將插件顯示位置提高到 50px,請這樣設定:
<style type="text/css">
@media (max-width: 575px) {
#easychat-floating-button,
#easychat-floating-button-left {
width: 40px !important;
height: 40px !important;
}
#easychat-floating-button {
bottom: 50px;
}
}
</style>
調整社群身份綁定插件位置 (手機簡易版)
如果手機簡易版的社群身份綁定插件會擋到您頁面上的某些區塊,若想要調整綁定插件位置,可以依照以下方式調整:
在 Omnichat 安裝代碼中的 </script>
後面 加上 以下代碼:
<style type="text/css">
@media (max-width: 575px) {
#social-subscriber-position-right,
#social-subscriber-position-left {
bottom: 60px !important;
}
}
</style>
bottom 後面的 px 數字越大代表插件距離底部越遠,您可以自行調整數字大小以符合您的手機版官網的排版。
在 Omnichat 安裝代碼中的 </script>
後面 加上 以下代碼:
<style type="text/css">
@media (max-width: 575px) {
#social-subscriber-position-right,
#social-subscriber-position-left {
bottom: 60px !important;
}
.easychat-chat {
bottom: calc(95px + 60px) !important;
}
}
</style>
在 calc(95px + 60px)
這段裡的 60px
要跟上面的 bottom: 60px
的 px 數值要相同,這樣歡迎訊息 / 官網顧客行銷訊息的彈窗位置才不會跟社群身份綁定插件重疊。