Bài viết này hướng dẫn bạn cách tích hợp Teeinblue trực tiếp vào bất kỳ website nào.

Tích hợp Teeinblue vào website của bạn

Các bước dưới đây sẽ hướng dẫn bạn cách chèn form cá nhân hóa trực tiếp vào trang sản phẩm, không cần dùng iframe.

Bước 1: Chèn đoạn code HTML sau vào vị trí bạn muốn hiển thị mockup:

<div id="teeinblue-mockup"></div>

Bước 2: Chèn đoạn code HTML sau vào vị trí bạn muốn hiển thị form cá nhân hóa:

<div id="teeinblue-form"></div>

Bước 3: Thêm đoạn code JavaScript sau vào trang sản phẩm của bạn:

<script>
  (function () {
    window.teeinblue = {
      id: 'UUID của sản phẩm',
      shop: 'Domain của store',
      variant: { // variant là bắt buộc; nếu bạn không có, hãy dùng giá trị mặc định này
        id: "variant_id",
        color_hex: "#ffffff",
      },
      onCustomizationCreated: function (personalizedData, lineItemProps) {
        // Xử lý dữ liệu tại đây
        // Ví dụ: thêm vào giỏ hàng, xem trước file thiết kế, ...
      }
    };

    document.addEventListener("DOMContentLoaded", function () {
      const script = document.createElement("script");
      script.src = "https://sdk.teeinblue.com/open/index.js";
      script.id = "teeinblue-app-script";
      script.type = "text/javascript";
      document.body.appendChild(script);
    });
  })();
</script>

Tại đây, khách hàng có thể chọn các tùy chọn cá nhân hóa và gửi form.

Quản lý dữ liệu cá nhân hóa đã được tạo

Bạn có thể quản lý dữ liệu cá nhân hóa do khách hàng tạo trong mục Customizations trên Teeinblue portal.

Cập nhật vào: 18/10/2026