Bạn muốn tích hợp Voice AI vào website chuẩn SEO mà không rườm rà? SDK mã nguồn mở Iqra AI Web Middleware JS Widget sẽ giúp bạn làm điều đó chỉ trong vài dòng code. Công cụ này hỗ trợ inline form sẵn sàng dùng ngay và headless mode cho ai muốn toàn quyền kiểm soát giao diện. Cùng mình khám phá nghen!
Thank you for reading this post, don't forget to subscribe!Tổng quan về Voice AI Widget SDK
Đây là một SDK widget nhẹ, không phụ thuộc framework, cho phép bạn nhúng khả năng Voice AI vào bất kỳ website nào. Nó kết nối với backend middleware C# ASP.NET Core để bảo vệ API keys và xử lý hàng đợi khi có nhiều người dùng cùng lúc. Bạn có thể dùng giao diện có sẵn hoặc tự build UI riêng – tất cả đều linh hoạt. Repo gốc trên GitHub: IqraAIWebMiddlewareJSWidget.
Các tính năng nổi bật
Universal Compatibility
SDK chạy được trên Vanilla JS, React, Vue, WordPress… miễn là trình duyệt web. Không cần cài đặt phức tạp, chỉ cần một thẻ script là xong.
Real-time Queueing
Khi website có lượng truy cập lớn, widget tự động xếp hàng đợi và thông báo vị trí cho người dùng. Không sập, không lag, rất chuyên nghiệp.
Customizable Form Fields
Bạn có thể định nghĩa các trường nhập liệu như tên, email, số điện thoại… và gửi dữ liệu đó dưới dạng dynamic variables hoặc metadata đến AI. Linh hoạt tối đa nhen.
Headless Mode
Nếu muốn tự thiết kế button, form theo phong cách riêng, chỉ cần bỏ qua tham số container. SDK trả về client instance để bạn gọi startSession, hangUp, lắng nghe sự kiện stateChange – tha hồ sáng tạo.
Hướng dẫn cài đặt & sử dụng chi tiết
Cài đặt qua CDN
Chỉ cần chèn script vào thẻ <head> hoặc cuối body:
<script src="https://cdn.your-domain.com/voice-ai-widget.umd.js"></script>
Biến global VoiceAiWidget sẽ xuất hiện ngay.
Sử dụng Inline Form
Tạo một container trong HTML:
<div id="voice-widget-container"></div>
Sau đó gọi init:
VoiceAiWidget.init({ middlewareUrl: 'https://api.your-middleware.com', container: '#voice-widget-container', campaignId: 'IqraWebsiteCampaign', regionId: 'EU-DE', formFields: [ { name: 'firstName', label: 'First Name', type: 'text', target: 'dynamicVariable', required: true } ] });
Thế là có ngay một widget Voice AI hoàn chỉnh.
Headless Mode với Custom UI
Bỏ qua container, bạn nhận được client:
const client = VoiceAiWidget.init({ middlewareUrl: 'https://api.your-middleware.com', campaignId: 'IqraWebsiteCampaign', regionId: 'us-east-1' });
Lắng nghe sự kiện stateChange để cập nhật giao diện custom:
client.on('stateChange', ({ state, data }) => { if (state === 'QUEUED') alert(`Bạn đang ở vị trí ${data.queuePosition} trong hàng đợi.`); });
Gọi client.startSession({ dynamicVariables: { firstName: 'An' }, metadata: { source: 'custom-ui' } }) khi người dùng bấm nút của bạn. Kết thúc cuộc gọi bằng client.hangUp().
Đánh giá: Ai nên trải nghiệm công cụ này?
Nếu bạn là lập trình viên web muốn tích hợp Voice AI vào website mà không mất công xây dựng từ đầu, đây là lựa chọn số một. Đặc biệt phù hợp với team dùng C# backend, muốn xử lý hàng đợi và bảo mật API keys. Cả những ai làm landing page, WordPress, hay ứng dụng React đều có thể dùng ngay. Công cụ này dành cho bạn – dễ thương, mạnh mẽ, lại free nhen.
Kết luận
Iqra AI Web Middleware JS Widget là giải pháp mở cho bài toán tích hợp Voice AI trên website. Với kiến trúc thông minh, hỗ trợ inline form và headless mode, SDK này giúp bạn tiết kiệm thời gian, chi phí mà vẫn đảm bảo hiệu năng khi kết hợp với dịch vụ SEO chuyên nghiệp. Hãy ghé qua GitHub, thử ngay và trải nghiệm sự khác biệt!
