Trang chủ / Widget / Hướng dẫn

Hướng dẫn nhúng widget HODL.VN vào website

Nhúng widget gồm ba bước: chọn loại và tuỳ chọn, chép mã, dán vào trang. Phần dưới hướng dẫn theo từng nền tảng và liệt kê mọi thuộc tính tuỳ chọn của từng loại widget.

Ba bước

1. Mở hodl.vn/widget, chọn loại widget (báo cáo COT, bảng giá, thẻ giá), thị trường và các tuỳ chọn; xem trước ngay bên phải.
2. Bấm Chép mã. Mã gồm một thẻ div mang tuỳ chọn, dòng ghi nguồn và một dòng script.
3. Dán nguyên mã vào chỗ muốn hiện widget trên trang của bạn. Dùng widget là đồng ý Điều khoản widget.

Dán theo nền tảng

• HTML thường: dán mã vào thân trang, đúng chỗ widget cần hiện. Nhiều widget trên một trang chỉ cần một dòng script.
• WordPress: trong trình soạn thảo khối, thêm khối HTML tuỳ chỉnh (Custom HTML) rồi dán mã. Theme cổ điển: dùng widget HTML tuỳ chỉnh ở sidebar.
• Blogger: chuyển bài sang chế độ Xem HTML rồi dán; hoặc thêm tiện ích HTML/JavaScript ở bố cục.
• EmDash / Astro / site tĩnh: dán vào template hoặc khối HTML của bài; script tải async, không chặn trang.
• Google Sites và nơi không cho chèn script: trên trang /widget chọn tab Chỉ iframe rồi dùng chức năng nhúng mã (Embed). Mã iframe cố định chiều cao và vẫn kèm dòng ghi nguồn.

Tuỳ chọn

Ví dụ

Biểu đồ nâng cao FPT, khung tuần, EMA 50 + RSI, giao diện tối

<div class="hodl-widget" data-kind="chart" data-symbol="FPT" data-interval="W" data-studies="ema50,rsi" data-theme="dark">
  <a class="hodl-widget-source" href="https://hodl.vn/chart/FPT" target="_blank">Biểu đồ FPT</a> · dữ liệu từ <a href="https://hodl.vn/" target="_blank">HODL.VN</a>
</div>
<script async src="https://hodl.vn/widget.js"></script>

Tổng quan thị trường: chỉ số và crypto

<div class="hodl-widget" data-kind="market-overview" data-tabs="indices,crypto">
  <a class="hodl-widget-source" href="https://hodl.vn/" target="_blank">Tổng quan thị trường</a> · dữ liệu từ <a href="https://hodl.vn/" target="_blank">HODL.VN</a>
</div>
<script async src="https://hodl.vn/widget.js"></script>

Báo cáo COT vàng, 5 năm, kiểu vùng

<div class="hodl-widget" data-kind="cot" data-symbol="GOLD" data-period="5y" data-chart="area">
  <a class="hodl-widget-source" href="https://hodl.vn/cot" target="_blank">Báo cáo COT vàng</a> · dữ liệu từ <a href="https://hodl.vn/" target="_blank">HODL.VN</a>
</div>
<script async src="https://hodl.vn/widget.js"></script>

Biểu đồ mini Bitcoin, tiếng Anh

<div class="hodl-widget" data-kind="mini-chart" data-symbol="BTCUSD" data-lang="en">
  <a class="hodl-widget-source" href="https://hodl.vn/crypto/bitcoin" target="_blank">Bitcoin price</a> · data by <a href="https://hodl.vn/" target="_blank">HODL.VN</a>
</div>
<script async src="https://hodl.vn/widget.js"></script>

Chỉ iframe (thẻ giá vàng)

<iframe src="https://hodl.vn/embed/mini-chart/GOLD" title="Giá vàng" width="100%" height="340" style="border:0;max-width:100%" loading="lazy"></iframe>
<div><a class="hodl-widget-source" href="https://hodl.vn/commodities/gold" target="_blank">Giá vàng</a> · dữ liệu từ <a href="https://hodl.vn/" target="_blank">HODL.VN</a></div>

Sự cố thường gặp

• Không thấy widget: kiểm tra đã dán cả dòng script; trang đặt Content-Security-Policy thì thêm https://hodl.vn vào script-src và frame-src.
• Widget bị cắt / thừa khoảng trống: bỏ data-height để widget tự co; mã chỉ iframe thì chỉnh height.
• Màu lệch nền trang: đặt data-theme (light / dark) cho khớp, hoặc data-transparent="true".
• Widget báo "đã ngừng phục vụ": tên miền vi phạm Điều khoản widget (thường do xoá / ẩn dòng ghi nguồn). Sửa lại rồi gửi email [email protected] để gỡ chặn.