Tiếng Việt

TÙY CHỈNH CỬA SỔ CHAT VỚI MÃ CSS

Bên cạnh việc sử dụng những cài đặt Subiz cung cấp trong phần Cài đặt > Cửa sổ chat. Bạn có thể dễ dàng tùy chỉnh những thành phần khác trên cửa sổ chat bằng cách sử dụng mã CSS.

CSS là viết tắt của cụm từ “Cascading Style Sheet” , nó là một ngôn ngữ quy định cách trình bày của các thẻ html trên trang web. Với việc sử dụng CSS bạn có thể tùy chỉnh một số thành phần của cửa sổ chat Subiz theo ý muốn một cách dễ dàng và đơn giản.

01
Tùy chỉnh CSS ở đâu?

B1: Đăng nhập vào Dashboard
B2: Vào phần Cài đặt > Cửa sổ chat > Giao diện
B3: Click vào mục Tùy chỉnh phía dưới phần chọn màu sắc

Tùy chỉnh CSS ở đâu?
Ngoài những tùy chỉnh này nếu bạn có bất ý tưởng nào với cửa sổ chat bạn có thể liên hệ trực tiếp với Subiz qua email [email protected] hoặc số điện thoại 043 792 5120
02
Tùy chỉnh kích cỡ và màu sắc của nội dung chat trong cửa sổ chat
Font size
#subiz_desktop .supporter_content_chat, .visitor_content_chat {
color:red;font-size: 12px;
}
            

Với dòng css này bạn đang để màu sắc của chữ là Màu đỏ. Kích cỡ 12px.
Bạn có thể thay đổi con số và màu sắc để phù hợp hơn với cửa sổ chat.

03
Thay đổi chiều rộng cửa sổ chat
Thay đổi chiều rộng cửa sổ chat
#subiz_desktop .widget_body{width:400px;}

Phần 400px bạn có thể điều chỉnh con số cho phù hợp với website.

04
Thay đổi chiều cao cửa sổ chat
#subiz_desktop .subiz_conversionin {height:300px!important;}

Thay đổi giá trị 300px để có được chiều cao như bạn muốn.

05

Trước khi tùy chỉnh vị trí ảnh logo bằng CSS thì bạn lưu ý những thông số để có 1 bức ảnh phù hợp và đẹp nhất trên cửa sổ chat

Cách upload ảnh logo

Logo
#subiz_desktop .logo_company {top:10px; right:10px;}
06
Tạo ra màu sắc kiểu gradient cho cửa sổ chat
Gradient

Một số người cảm thấy quá nhàm chán với những màu sắc cơ bảncủa cửa sổ chat và bạn muốn sáng tạo hoặc để màu theo kiểu gradient để hòa hợp với màu sắc của logo.

Bạn có thể làm theo cách sau:

#subiz_desktop .color_theme_default {
background-image:linear-gradient( to top right, #5d7dff, #3376ff);
}
            

Trong đó bạn có thể tùy chỉnh 2 màu sắc bạn muốn sử dụng cho kiểu gradient và thay thế vào phần #5d7dff, #3376ff

07
Bo tròn avatar
Gradient

Bạn đã quá quen thuộc với hình ảnh avatar được đặt trong khung hình vuông. Giờ bạn muốn thay đổi để tạo sự mới lạ cho cửa sổ chat.

Bạn có thể bo tròn lại bằng cách đặt code CSS như sau:

#subiz_desktop .avatar_supporter {
border:0px;
}
#subiz_desktop .avatar_supporter img {
border-radius:27px;
}
#subiz_desktop .avatar_small {
border:0px;
border-radius:12px;
}
        

Trong đó:
avatar_supporter: là ảnh đại diện lớn ở trên góc trái của cửa sổ chat
avatar_small: là ảnh đại diện nhỏ sẽ xuất hiện ở trong phần hiển thị nội dung cuộc chat.

08
Ẩn cửa sổ chat
Ẩn cửa sổ chat
#subiz_desktop .button_chat_offline, .button_chat_online {opacity:0;}

Lưu ý: Bạn có thể chỉ ẩn chế độ offline hoặc online.

09
Thêm ảnh nền cho cửa sổ chat
Thêm ảnh nền cho cửa sổ chat
#subiz_desktop .subiz_conversionin {
background: url(".../img/picture.png") no-repeat center center;
}
            
Đường dẫn ảnh (.../img/picture.png) cần chính xác