> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Tích hợp Teeinblue vào bất kỳ website nào

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>
```

![Mockup và form cá nhân hóa](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/monosnap-staging-sdkteeinbluec_39zlvl.png)

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**.

![Teeinblue portal -> Customizations](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/monosnap-teeinblue-portal-2024_yb0efc.png)