Cài Zalo Widget Chat bằng iframe, không dùng Zalo SDK có sẵn

🏠 Các ví dụ Zalo

Để thao tác tốt nhất với các kịch bản mainh họa trong bài viết này, hãy xem nó bằng trình duyệt trên máy tính để bàn. Zalo Wigget mà bạn đang thấy ở trang này được code bằng đúng những gì sẽ trình bày

Zalo SDK được cung cấp sẵn khá là nặng nề và làm nhiều việc, nếu bạn chỉ cần cửa sổ chat thì có thể sẽ đơn giản hơn. Về bản chất, mã javascript của zalosdk sẽ chèn vào trong body của trang web một thẻ iframe là cửa số chat của Zalo. Bạn có thể copy iframe này bằng cách chạy Zalo Widget chuẩn đã được cung cấp tại ví dụ này webchat.html, rồi dùng tính năng "kiểm tra" của trình duyệt để copy mã sinh ra. Mã có dạng như sau:

		
<div class="zalo-chat-widget" 
	data-oaid="24667240278009508" 
	data-welcome-message="Rất vui khi được hỗ trợ bạn!" 
	data-autopopup="0" 
	data-width="" 
	data-height="" 
	style="border: none; visibility: visible; bottom: 52px; right: 52px; position: fixed; z-index: 2147483644 !important;">
	<iframe id="chatiframe"
		frameborder="0" 
		allowfullscreen="" 
		scrolling="no" 
		width="440" 
		height="813" 
		src="https://page.widget.zalo.me/?
			position=null
			&oaid=24667240278009508
			&welcomemessage=R%E1%...%BA%A1n!
			&autopopup=0
			&leftside=false
			&width=440
			&height=813
			&style=2
			&id=01e9420a-5e61-4364-8bda-e0f8caffc26e
			&domain=shopkimkhi.ntha.com
			&android=false
			&ios=false" 
		style="width:440px; max-width: 90vw; height:85vh; max-height: 90vh; position: absolute; bottom: 0px; right: 0px;">
	</iframe>
</div>

Các thuộc tính của thẻ Zalo Chat Iframe

frameborder : mặc định là "0" để không có border.
allowfullscreen : mặc định là trắng "" để không cho fullscreen.
scrolling : mặc định là "no"
width : mặc định là "440"
height : mặc định là "813"
src : Nguồn cấp của sổ chat của Zalo, được mã hóa URL encode, có dạng https://page.widget.zalo.me/? và các thông số cụ thể như phần sau
style : Kiểu CSS của iframe mặc định là "max-height: 90vh; position: absolute; bottom: 0px; right: 0px; min-height: 80vh; min-width: 400px;"

Các tham số của URL src

Đường dẫn URL gắn cho thuộc tính src phải được mã hóa URL_ENCODE, các thông số cũng thế.

position : mặc định là "null". Bỏ đi được
oaid : ID của tài khoản Zalo OA. Không bỏ đi được
welcomemessage : Thông điệp chào, mặc định welcomemessage=R%E1%BA%A5t%20 vui %20 khi %20% C4%91%C6%B0%E1%BB%A3c %20 h%E1%BB%97 %20 tr%E1%BB%A3 %20 b%E1%BA%A1n! nghĩa là "Rất vui khi được gặp bạn!". Có thể bỏ đi, khi ấy vẫn có tin xin chào mặc định bình thường
autopopup : Số giây chờ tự bung lên của sổ chat, mặc định là "0" hiện tại không có tác dụng
leftside : Icon chat ở bên phải hay bên trái. Nếu bỏ đi , mặc định là "false" cửa sổ chat bên phải màn hình . Thường đặt là false
width và height: Mặc định sẽ giống với width 440 và height 813 như của thẻ iframe. Nếu bỏ đi thì của sổ chat lấy kích thước bằng iframe
style : mặc định là "2". Chưa hiểu làm gì, bỏ đi được
id : là một chuỗi dạng như afc6177d-2bf5-4f4f-a48d-0e0f98ddc83e Có vẻ như là làm id cho một phiên chat. Bỏ đi vẫn chat được
position : Domain cài đặt cửa sổ chat, ví dụ shopkimkhi.ntha.com.
android và ios : Có vẻ là truyền hệ điều hành, nếu cả 2 là false thì khi bấm nút "chat với Zalo" nó sẽ gọi phần mềm zalo trên máy tính, nếu android=true thì chạy trên android sẽ gọi app android

Kết luận

Phần lớn các thông số đều có thể bỏ đi trừ oaid. Nếu không cần iframe thì chat full màn hình tại địa chỉ https://page.widget.zalo.me/?oaid=OAID_cua_ban, ví dụ của Công Cụ Tốt là https://page.widget.zalo.me/?oaid=24667240278009508

Vấn đề tương tác chuột khi cài widget Zalochat dạng iframe

Vấn đề iframe che mất chuột

Khi thu nhỏ cửa sổ chat, thì thẻ iframe vẫn giữ nguyên kích thước với nền trong suốt trừ chỗ nút bấm biểu tượng của Zalo khiến cho không thao tác với chuột như click hay bôi đen ở phía sau được. Bạn đánh dấu hộp kiểm "Hiện nền của iframe để dễ quan sát" dưới đây sẽ rõ.

Muốn khắc phụ ta cần hiểu cơ chế của Zalo Chat IFRAME. Mỗi khi trong Frame có sự kiện thì nó gửi message ra ngoài cho window crua DOM. Bạn có thể theo dõi quá trình này bằng cách đánh dấu kiểm dưới đây rồi bật tắt của sổ chat, đồng thời theo dõi tên thông điệp được gửi ra

Thông điệp của Zalo Iframe

Hiện nền của iframe để dễ quan sát

Theo dõi

Tự đồng bộ kích thước iframe với Zalo Chat

Khắc phục bằng javascript

Giải pháp là ta sẽ bắt sự kiện của cửa sổ chat zalo rồi thay đổi kích thước iframe theo các bước sau

Đảm bảo thẻ <iframe> được đặt id là id="chatiframe"
Lúc đầu, chỉ đặt kích thước iframe là 60x60 trong style
Thêm đoạn mã javascript dưới đây vào tệp html của bạn

			
window.addEventListener("message", function(t) {
	if (t.data && t.data.cmd == "zchat_widget_toggle_sticker") {
		const f = document.getElementById("chatiframe");
		if (t.data.width) {
			f.style.width = t.data.width;
			f.style.height = t.data.height;
		} else {
			f.style.width = "440px";
			f.style.height = "85vh";
		}
	}
});

Chúc các bạn thành công