Hướng dẫn Tích hợp Nhúng Form vào SmaxAi

Tích hợp Nhúng Form là tính năng cho phép bạn đưa các biểu mẫu (form) tùy chỉnh từ hệ thống bên ngoài vào trực tiếp trong module Nhắn tin của SmaxAi. Thay vì phải hỏi khách hàng từng thông tin một cách thủ công, bạn có thể gửi một form chuyên nghiệp để khách hàng tự điền, sau đó dữ liệu sẽ tự động đồng bộ về CRM hoặc phần mềm quản lý bán hàng của bạn.

---

🌟 Lợi ích và Ứng dụng thực tế

Việc nhúng form giúp doanh nghiệp tối ưu hóa quy trình vận hành và nâng cao trải nghiệm khách hàng:

• Ví dụ 1: Thu thập thông tin vận chuyển: Thay vì chat hỏi "Anh/chị tên gì?", "Địa chỉ nhận hàng ở đâu?", bạn gửi một Form đặt hàng. Khi khách điền xong, thông tin tự động đổ về đơn hàng trên Smax → Giảm sai sót do nhập liệu thủ công.
• Ví dụ 2: Đăng ký tư vấn/Đặt lịch hẹn: Khách hàng điền form yêu cầu tư vấn ngay trong khung chat → Dữ liệu tự động chuyển về CRM để nhân viên Sale tiếp nhận và xử lý → Tăng tỷ lệ chuyển đổi.
• Ví dụ 3: Khảo sát mức độ hài lòng: Gửi form đánh giá sau khi kết thúc phiên hỗ trợ để thu thập phản hồi khách hàng một cách nhanh chóng.

---

🛠 1. Hướng dẫn cài đặt (Dành cho Quản trị viên)

Để nhúng Form vào SmaxAi, bạn thực hiện theo các bước sau:

Bước 1: Truy cập vào module Cài đặt, sau đó chọn mục Tích hợp.

Bước 2: Tại cửa sổ tích hợp, bạn thiết lập các thông tin sau:

1. Tên Form: Đặt tên để dễ dàng quản lý (Ví dụ: Form Đặt Hàng, Form Tư Vấn).
2. Nền tảng: Chọn tùy chọn Nhúng form.
3. URL của form: Nhập đường dẫn (link) của form bạn muốn nhúng.
4. Lưu: Nhấn nút Lưu để hoàn tất thiết lập.

💡 Lưu ý: URL của form phải sử dụng giao thức HTTPS và cho phép nhúng trong iframe (không chặn X-Frame-Options) để có thể hiển thị chính xác trong SmaxAi.

---

💻 2. Hướng dẫn kỹ thuật (Dành cho Lập trình viên)

Nếu bạn không phải là lập trình viên, hãy gửi phần này cho bộ phận IT hoặc đối tác phát triển phần mềm của bạn.

Để Form nhúng có thể tương tác hai chiều với SmaxAi (như tự động lấy thông tin khách hàng hoặc yêu cầu mở popup), bạn cần sử dụng phương thức postMessage của JavaScript.

2.1. Nhận dữ liệu từ SmaxAi

SmaxAi sẽ gửi thông tin khách hàng hiện tại sang Form thông qua một event. Bạn hãy sử dụng đoạn code sau để bắt event này:

javascript
// Nhận event từ SmaxAi Livechat để lấy thông tin khách hàng
window.addEventListener('message', function (event) {
    if (typeof event.data == 'object' && event.data.name === '__SM_FORM_CUSTOMER') {
        console.log('Thông tin khách hàng:', event.data?.data?.customer);
        // Xử lý dữ liệu khách hàng tại đây (ví dụ: tự động điền vào các ô input)
    }
}, false);

2.2. Gửi yêu cầu từ Form tới SmaxAi

Bạn có thể yêu cầu SmaxAi cung cấp dữ liệu khách hàng hoặc điều khiển giao diện (như bật popup) bằng cách gửi message ngược lại cho window.parent.

Hàm hỗ trợ lấy Integration ID:

javascript
const getIntegrationId = () => {
  return window.location.href.split('=')[1]
}

Yêu cầu SmaxAi trả dữ liệu khách hàng:

javascript
if (window.parent) {
    window.parent.postMessage({
        name: '__SM_FORM_CUSTOMER',
        data: {
            integration_id: getIntegrationId(),
        }
    }, '*')
} else {
    console.error('window.parent is undefined')
}

Yêu cầu SmaxAi hiển thị Popup:

javascript
if (window.parent) {
    window.parent.postMessage({
        name: '__SM_FORM_POPUP',
        action: 'SHOW',  // Sử dụng 'HIDE' để đóng popup
        data: {
            integration_id: getIntegrationId(),
            url: 'https://crm.com/orders?id=xxx', // URL muốn hiển thị trong popup
            title: 'Tiêu đề Popup',
            height: '80vh' // Chiều cao của popup
        }
    }, '*')
} else {
    console.error('window.parent is undefined')
}

⚠️ Cảnh báo bảo mật: Để đảm bảo an toàn, lập trình viên nên kiểm tra event.origin trong hàm addEventListener để chỉ chấp nhận message từ domain chính thức của SmaxAi, tránh các cuộc tấn công XSS.