Cách tạo widget

Tổng quan

Widget đặt vé TicketingHub là một công cụ JavaScript tích hợp vào website, cho phép khách hàng đặt trực tiếp các sản phẩm. Bạn tạo widget trong bảng điều khiển, cấu hình từng phần, rồi dán một đoạn mã ngắn vào website của mình.

Trình duyệt được hỗ trợ

Safari 16.4 trở lên, Chrome 111 trở lên, Firefox 128 trở lên.

Trong bảng điều khiển, đi đến Widgets
Nhấp vào Widget mới
Đặt tên cho widget, chọn các sản phẩm mà widget sẽ bán, rồi nhấp vào Tạo widget

Bạn sẽ được chuyển đến trang cài đặt của widget, nơi bạn cấu hình mọi nội dung còn lại. Phía bên trái là các cài đặt được nhóm theo từng phần; phía bên phải hiển thị bản xem trước trực tiếp của widget và làm mới mỗi khi bạn thay đổi cài đặt.

Sản phẩm được bán

Chọn các sản phẩm, gói và thẻ quà tặng mà widget cung cấp, thêm các sản phẩm bổ sung (tất cả hoặc chỉ những sản phẩm bạn chọn), đồng thời quyết định liệu khách hàng có thể mua sản phẩm dưới dạng phiếu quà tặng hoặc đổi phiếu quà tặng trong widget hay không.

Quy trình đặt vé

Chọn cách khách hàng di chuyển qua widget: Vé trước (chọn vé, sau đó chọn ngày và giờ), Sự kiện trước (duyệt lịch, sau đó chọn nội dung cần đặt), hoặc Chỉ đổi phiếu quà tặng. Bạn cũng có thể đặt chế độ xem lịch mặc định và yêu cầu khách hàng nhập địa chỉ email hai lần để tránh lỗi chính tả.

Quy tắc bán hàng

Kiểm soát thời điểm và nội dung widget bán: ngày và giờ bắt đầu bán, ngày lịch hiển thị khi mở, thời điểm hiển thị số chỗ còn lại của một khung giờ và các loại tiền tệ khách hàng có thể dùng để thanh toán. Nếu tuần hoặc tháng đầu tiên mà lịch hiển thị không có gì để đặt, lịch sẽ tự động xem tiếp và mở tại ngày đầu tiên có thể đặt.

Giao diện

Thêm CSS tùy chỉnh để tinh chỉnh giao diện của widget sao cho phù hợp với thương hiệu của bạn.

Phân tích

Kết nối Google Analytics hoặc Google Tag Manager để theo dõi cách khách truy cập sử dụng widget.

Nâng cao

Đưa khách hàng đến một trang tùy chọn sau khi mua, đồng thời thiết lập tham số URL mà các đại lý bán lại sử dụng để các lượt đặt vé của họ được ghi nhận cho đúng đại lý.

Xem trước, xuất bản và triển khai

Các thay đổi bạn thực hiện được lưu dưới dạng bản nháp so với bản xem trước trực tiếp — nhấp vào Cập nhật bản xem trước để xem chúng ở bên phải mà không ảnh hưởng đến widget đang hoạt động. Khi đã hài lòng, nhấp vào Xuất bản để áp dụng các thay đổi, hoặc Hủy để loại bỏ bản nháp.

Để đưa widget lên website, mở Hướng dẫn cài đặt: sao chép thẻ script vào trang của bạn, sau đó chọn widget Nhúng (hiển thị trực tiếp trong nội dung trang) hoặc widget Modal/Cửa sổ bật lên (mở lớp phủ từ một nút), rồi dán đoạn mã tương ứng.

Khi khách hàng chuyển sang bước tiếp theo, widget sẽ cuộn về đầu biểu mẫu đặt vé để khách hàng đã cuộn xuống một danh sách vé dài không bị đưa đến giữa bước tiếp theo. Nếu bạn đặt widget bên trong một bảng điều khiển riêng có thể cuộn, bảng điều khiển đó sẽ là phần được di chuyển; trang của bạn chỉ di chuyển khi chính bảng điều khiển đã bị cuộn ra khỏi tầm nhìn. Widget thực hiện việc này khi phần đầu biểu mẫu đã bị cuộn ra khỏi tầm nhìn, hoặc khi biểu mẫu tràn xuống dưới màn hình trong khi phía trên vẫn còn nhiều khoảng trống. Biểu mẫu vốn đã vừa với màn hình sẽ được giữ nguyên vị trí, và widget chừa khoảng trống cho phần đầu trang được cố định ở đầu trang của bạn.

Nếu cách này không phù hợp với bố cục của bạn, hãy ngăn trang di chuyển bằng cách thêm "scrollOnStepChange": false vào mã widget mà bạn đã dán:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOnStepChange":false}'></div>

Nếu phần đầu trang của bạn ẩn đi khi khách truy cập cuộn xuống và xuất hiện lại khi họ cuộn lên, widget không thể đo được phần này, khiến đầu biểu mẫu có thể bị che khuất phía sau. Thay vì tắt tính năng cuộn, hãy cung cấp cho widget chiều cao phần đầu trang của bạn tính bằng pixel:

<div id="embed_widget" data-th-embed data-th-config='{"widgetId":"YOUR-WIDGET-ID","scrollOffset":80}'></div>

Nếu sử dụng trình chỉnh sửa widget cổ điển, bạn có thể nhân bản một widget thay vì tạo lại từ đầu:

Đi đến Widgets
Chọn một widget hiện có
Nhấp vào Nhân bản
Chọn kênh đích và xác nhận lựa chọn

Tùy chỉnh widget đã nhân bản, sau đó xuất bản và sao chép mã vào website của bạn.