Cài đặt Chat Zalo trên trang Web AMP bằng SDK sửa đổi

🏠 Các ví dụ Zalo

Trang web mà bạn đang đọc đây là một trang theo chuẩn AMP

Trang web mà bạn đang đọc đây đã được nhúng Zalo OA Chatbox của Công Cụ TỐt, nếu bạn thấy cửa sổ chat thì tức là việc sửa đổi đã thành công.

Nếu không hoạt động(chủ yếu do cơ chế thông điệp của Zalo bị chặn bởi sanbox AMP trong virtual DOM) thì bạn tham khảo phương án biên dịch thông điệp trung gian, phương án này rườm rà hơn, cũng không sử dụng SDK.js của Zalo mà mình đã viết lại cái khác.

Chào các bạn !
Mình là Nguyễn Thái Hà, IT của Công Cụ Tốt. Như các bạn đã biết, Zalo Widget Chat cho phép mọi người dễ dàng cá nhân hóa và nhúng cửa sổ chat với Official Account trên trang web của họ. Khách truy cập của bạn có thể trò chuyện trực tiếp với Official Account.

Mã nhúng của Zalo sửa dụng SDK.js là dạng javascript nên không chạy với trang AMP. Để chạy được, ta dùng amp-script. Tuy nhiên ngay cả khi dùng amp-script để load https://sp.zalo.me/plugins/sdk.js thì vẫn không thể chạy vì bản code này được bên ZALO code không theo chuẩn AMP.

Sau khi mình đọc bản gốc của Zalo SDK cung cấp tại https://sp.zalo.me/plugins/sdk.js thì mình cho rằng giải pháp là sửa đổi nó, thay thế các đoạn mã cho hợp với định dạng AMP thành zaloamp.js, rồi nhúng vào trang AMP như mình sẽ trình bày sau đây. Zalo phát hành SDK để dùng vào nhiều việc, nhưng để cho đơn giản, SDK viết lại sẽ chỉ tập trung vào một vấn đề là có cửa sổ chat góc dưới bên phải màn hình bạn nhé. Các bạn hoàn toàn có thể viết lại SDK theo ý các bạn. Các ý chính của Zalo SDK là:

  1. Tạo một thẻ div để bao bọc tất cả
  2. Trong thẻ div chèn một iframe đến Zalo, các bạn có thể chẳng cần SDK chèn trực tiếp inframe cũng được, mình đã giải thích kỹ ở ví dụ này
  3. Mỗi khi người dùng phóng to thu nhỏ của sổ chat trong iframe, thì nó gửi sự kiện ra ngoài để thay đổi kích thước của thẻ div

Để chạy Zalo Chat Box với website theo chuẩn AMP (như trang web bạn đang đọc đây) thì mình sẽ dùng đến 2 thành phần là <amp-script> để chạy javascript lắng nghe sự kiện từ cửa sổ chat trên trang AMP và <amp-iframe> để nhúng iframe vào trang AMP

Bước 1: Chuẩn bị tài nguyên

  1. Tải về zaloamp.js một thử mục chứa mã web amp của bạn
  2. Tải về zalologo.svg cùng thư mục nói trên. Ảnh này dạng SVG có thể phóng to thu nhỏ tùy ý, nó sẽ hiện trong khi nạp iframe của Zalo. Nếu máy chủ Zalo có chậm thì ta trông web bên ta vẫn bình thường
  3. Coi như bạn đã biết về website AMP, bạn hãy tự tạo một trang AMP kiểu Hello Word nhé, tạm gọi là index.html , các bước tiếp theo mình chỉ nói ngắn gọn mang tính nhắc lại

Bước 2: Thêm thành phần AMP

Đừng quên chèn thành phần <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script> và <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script> vào phần đầu head của trang AMP index.html

Bước 3: Định dạng Style sẵn

Thêm vào phần đầu head định dạng Style cho thẻ div bao bọc bên ngoài thông qua lớp zalo-chat-widget 

<style amp-custom>
	.zalo-chat-widget {
		border: none;
		visibility: visible;
		position: fixed;
		bottom: 45px;
		right: 20px;
		height: 60px;
		width: 60px;
		max-width: 90vw;
		top: auto;
		z-index: 2147483644;
	}
</style>

Bước 4: Chèn mã nhúng

Thêm vào phần cuối cùng của thẻ body, (thẻ <amp-script> mình để kích thước 1x1 nên muốn dấu xuống dưới để tránh lộ). 

<amp-script src="https://you.domain/zaloamp.js" 
width="1" 
height="1" 
layout="fixed" 
class="i-amphtml-hydrated">
	<div class="zalo-chat-widget" > 

	</div> 
</amp-script>

Chúng ta thấy có 4 phần tử bao bọc nhau:

Ngoài cùng là <amp-script> để gọi mã javascript zaloamp.js. Lớp i-amphtml-hydrated - một lớp được định nghĩa sẵn của AMP - được thêm vào cho <amp-script> để cửa sổ Zalo Chat không bị điều chỉnh độ trong suốt (chả hiểu sao dự án AMP lại làm mờ tất cả các Virtual DOM của <amp-script>)

Tiếp theo là thẻ div có lớp zalo-chat-widget mà ta đã định nghĩa ở bước 3 có tác dụng bao bọc iframe và neo nổi nó ở góc dưới bên phải màn hình.

Tiếp trong thẻ div là thẻ <amp-iframe> đã cấu hình layout và sanbox phù hợp.

Trong cùng là thẻ ảnh <amp-img>, để thay thế nội dung cho iframe khi iframe load nội dung

Chúc các bạn thành công và sáng tạo thêm để có cửa sổ Zalo Chat ưng ý trên website AMP nhé !