Tích hợp website với WifiBiz

Hướng dẫn biến mọi trang web thành trang đăng nhập Wi-Fi

Sử dụng Wifi Marketing của SmartWifi bạn có thể tích hợp với trang web của mình.

Đây là tính năng mới nhất của SmartWifi cung cấp tới các khách hàng của mình. (Đây là tính năng phải trả phí mới sử dụng được).

Với tính năng này, bạn có thể biến mọi trang web mà mình sở hữu thành trang đăng nhập Wi-Fi. Với các nhà cung cấp khác thì điều này là không thể, tuy nhiên với SmartWifi bạn chỉ cần nhúng một đoạn mã đơn giản vào trang web là đã có thể hoạt động.

Bạn sẽ không còn bị giới hạn về khả năng thiết kế trang web, nó xấu hay đẹp là do bạn thực hiện.

Các bước thực hiện.

1. Tạo các bước đăng nhập và tạo NASID trong admin.wifibiz.net như bình thường.

2. Chèn đoạn mã dưới đây vào trang web.

3. Cài đặt thiết bị để chuyển hướng tới trang web đã chèn mã.

Đoạn mã cần chèn

<div id="root-wifibiz"></div>
<script>
  var _wb_settings = {
    nasId: 'NASID_CUA_BAN',
    mode: 'chatbox',
    /* mode can be 'chatbox' or 'inline' */
    width: '320px',
  };
  (function() {
    var u="//wifibiz.net/embed/";
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.src=u+'main.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

Lưu ý: Nhớ thay NASID_CUA_BAN thành NASID mà bạn lấy từ admin.wifibiz.net. Phần width chỉ có ý nghĩa khi bạn chọn chế độ inline.

Mô tả đoạn mã:

Với đoạn mã này phần khu đăng nhập có thể được hiển thị theo 2 cách (mode) là: chatbox hoặc inline

• chatbox: Phần đăng nhập wifi hiển thị dưới dạng một nút bấm có logo wifi ở góc dưới bên phải của màn hình. Khu user bấm lên nút đó, một cửa sổ với các hình thức đăng nhập hiện sẽ ra như là một cửa sổ chat.

• inline: Phần đăng nhập wifi sẽ hiển thị ngay tại vị trí bạn chèn đoạn mã trên.

Đoạn mã này có thể chèn vào đâu?

• Nếu bạn dùng mode inline bạn có thể chèn vào vị trí mà bạn mong muốn khung đăng nhập wifi sẽ hiển thị

• Nếu dùng mode chatbox thì bạn có thể chèn vào bất kỳ vị trí nào trong trang web, miễn là năm trong thẻ body của trang web

Làm thế nào để chèn đoạn mã?

Nếu bạn có thể chỉnh sửa html của trang web thì chỉ cần paste vào vị trí tương ứng.

Đối với wordpress, bạn có thể dùng Custom Html widget.

Cài đặt chuyển hướng trang web

Việc cài đặt thiết bị để chuyển hướng tới trang web của bạn có nhiều cách làm, và còn tùy thuộc vào thiết bị mà bạn sử dụng. Ví dụ:

• Mikrotik

Sau khi cài đặt theo như hướng dẫn thành công, bạn dùng Winboz truy cập menu IP > Hotspot. Tại Tab Server bạn sẽ tìm thấy dòng có chữ bridge-wifibiz, bấm đúp chuột vào dòng này và thay phần Name bằng link địa chỉ trang web của bạn.

Như ví dụ dưới đây, mục name đã được cài đặt sử dụng link https://zealmall.com/chinh-sach-bao-hanh để làm trang đăng nhập:

• Aruba

Đối với Aruba, bạn vào menu Security ở góc trên bên phải của cửa sổ cài đặt thiết bị, đi tới tab External Captive Portal và edit sửa profile tương ứng (thường là wifibiz). Sau khi bấm edit bạn điền domain của bạn vào IP or hostname, điền phần còn lại của link trang web vào mục URL như hình dưới đây:

Lưu ý quan trọng:

• Khi cài đặt thiết bị, bạn cần whitelist tất cả các domain liên quan tới trang web của bạn. Do khi chưa đăng nhập user sẽ không thể truy cập web của bạn nếu các domain liên quan chưa được mở bằng cách đưa vào whitelist của dịch vụ hotspot trong thiết bị.

• Một trang web thường được dựng nên bởi rất nhiều nguồn tài nguyên đến từ nhiều domain khác nhau, bao gồm:

  • Domain chính của trang web, chính là domain của bạn.

  • Domain liên quan tới font chữ, hiệu ứng và trang trí (javascrypt và css), ví dụ: fonts.googleapis.com, fontawesome...

  • Domain liên quan tới các dịch vụ thứ 3 như: Google Analytics, Facebook Pixel,...

Khi dùng với wifi marketing thì bạn cần whitelist các domain liên quan để trang web hiển thị đẹp và hoàn chỉnh. Đối với Mikrotik thì bạn điền các domain cần whitelist vào mục Walled Garden của hotspot. Đối với Aruba bạn cần khai báo whitelist ở cả 2 mục: Walled Garden và cả trong Preauth Roles