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.
Trang web mà bạn đang đọc đây chính là một trang website theo chuẩn AMP đã được cài Zalochat Widget. Nếu bạn nhìn thấy nút chat của Zalo thì tức là các vấn đề đagn trình bày vấn đúng
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. Ngay kể cả khi ta 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. 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.
Trong phần phân tích thẻ iframe của cửa sổ chat zalo chúng ta đã biết rằng chỉ cần giữ lại thuộc tính src đường dẫn đến của số chat zalo OA là có thể chat được. Bạn hãy đọc thật kỹ cơ chế thông điệp của zalo trong mục ví dụ iframe.html vừa nêu nhé, để hiểu các phần sau. Ta chỉ cần duy nhất một thông số là ID của Zalo OA mà thôi. Trong bài viết này không đề cập đến việc xác thực và lấy ID của tài khoản OA mà coi như đã có. Đường dẫn sẽ là https://page.widget.zalo.me/?oaid=OAID_cua_ban. Ngoài ta coi như bạn đã có kiến thức về website AMP.
Giải pháp của ta là dùng <amp-iframe> trong định dạng website AMP để nhúng trang cửa sổ chat với đường dẫn nói trên. Trang web bạn đang đọc đây có định dạng AMP. Nếu bạn thấy cửa sổ chat là việc nhúng thành công.
Khó khăn lớn nhất của chúng ta là mỗi khi nút bấm phóng to thu nhỏ cửa sổ chat được bấm, iframe của zalo sẽ gửi thông điệp zchat_widget_toggle_sticker, thông điệp này không theo chuẩn của AMP nên không thể vượt qua được cơ chế bảo mật sandbox của AMP và cũng không tuân thủ định dạng resize của <amp-iframe>
Vậy giải thuật đặt ra là
Thêm đoạn mã sau vào phần head của website AMP định nhúng
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Ta sẽ neo amp-iframe ở góc dưới bên phải với kích thước bằng nút bấm của zalo là 60 x 60. Thêm style sau vào phần đầu head của website AMP định nhúng
<style amp-custom>
.zalo-chat-widget {
position: fixed;
bottom: 45px;
right: 20px;
max-height: 80vh;
max-width: 90vw;
z-index: 20171108;
}
</style>
Tải về tệp này ampzalochat.html rồi host lên một domain thứ 3 có https. Không được là domain của bạn nhé, nếu không sẽ không chạy.
Trong bài viết này, phần tử amp-iframe mình để nền có mầu chứ không phải trong suốt để dễ quan sát xem amp-iframe có kích thước đúng như zalochat hay không. Chèn vào phần body của website AMP định nhúng đoạn mã dưới đây
<amp-iframe
src="https://vidu.com/ampzalochat.html?oaid=your_zalo_oa_id"
sandbox="allow-scripts
allow-modals
allow-popups
allow-same-origin
allow-forms"
frameborder="0"
scrolling="no"
resizable
width="60"
height="60"
class="zalo-chat-widget">
<div role="button"
aria-label="Show more"
placeholder
overflow>
</div>
</amp-iframe>