FlowHunt JS API: Tuỳ chỉnh Chatbot Nâng Cao

Khám phá tính năng nâng cao của chatbot FlowHunt: cá nhân hoá với biến luồng, theo dõi bằng hậu tố URL, dùng trình xử lý sự kiện, và kiểm soát kích hoạt chat để tối ưu trải nghiệm người dùng.

Flowhunt được trang bị các tính năng mạnh mẽ cho phép bạn tuỳ chỉnh sâu cách chatbot hoạt động và tích hợp mượt mà với trang web hoặc ứng dụng của bạn. Trên trang này, bạn sẽ học cách thực hiện một số tuỳ chỉnh nâng cao – biến luồng, tham số URL, callback dựa trên sự kiện, và logic kích hoạt chat tùy chỉnh.

Biến Luồng: Cá Nhân Hóa Trải Nghiệm Chat

Biến luồng cung cấp cách truyền dữ liệu động vào chatbot để cá nhân hóa thực sự. Bạn có thể lưu bất kỳ dữ liệu nào vào các biến này, có thể là dữ liệu người dùng, dữ liệu phiên hoặc bất kỳ thông tin liên quan nào.

Cách Sử Dụng flowVariable

flowVariable là một phần của cấu hình FHChatbot.initChatbot(). Đây là một object với mỗi cặp key-value định nghĩa một biến và giá trị của nó. Ví dụ – Truyền địa chỉ IP và user id của người dùng:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "flowVariable": {
        "ip": /* Code to obtain IP Address */ ,
        "userId":  /* Code to obtain User ID */
      }
    });
  }
);
</script>

Lưu ý quan trọng:

  • Thay thế /* Code to obtain IP Address *//* Code to obtain User ID */ bằng logic thực tế để lấy các giá trị này từ hệ thống của bạn. Thường sẽ phải truy xuất biến phía server, local storage hoặc dựa vào các phương pháp xác thực khác.
  • Khi truyền vào, các biến này sẽ có sẵn trong logic của chatbot, cho phép phản hồi động và luồng làm việc cá nhân hóa.
  • Logic chatbot có thể đọc và sử dụng các biến này để cá nhân hóa hội thoại và làm chúng phù hợp với ngữ cảnh hơn.

urlSuffix: Theo Dõi và Phân Tích Tương Tác Chatbot

Tham số urlSuffix cho phép bạn thêm chuỗi truy vấn vào cuối mọi URL mà chatbot gọi. Điều này cực kỳ hữu ích để theo dõi nguồn và hiệu quả của các tương tác chatbot bằng các công cụ phân tích như Google Analytics.

Cách sử dụng urlSuffix

Chỉ cần đặt thuộc tính urlSuffix thành chuỗi truy vấn mong muốn, ví dụ:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=your-custom-source"
    });
  }
);
</script>

Trong ví dụ này, ?utm_source=your-custom-source sẽ được thêm vào tất cả các URL do chatbot tạo, giúp bạn theo dõi lưu lượng chatbot trong nền tảng phân tích.

Lợi ích

  • Theo dõi chuyển đổi: Theo dõi tương tác nào từ chatbot mang lại chuyển đổi nhiều nhất trên website.
  • Phân tích hành vi người dùng: Hiểu cách người dùng điều hướng website sau khi tương tác với chatbot.
  • Gán nguồn chiến dịch: Đo lường hiệu quả các chiến dịch kêu gọi người dùng sử dụng chatbot.

Trình Xử Lý Sự Kiện: Phản Hồi Hành Động Chatbot

Flowhunt cho phép bạn thiết lập các trình xử lý sự kiện để kích hoạt hàm tùy chỉnh khi các sự kiện nhất định xảy ra trong chatbot. Những trình xử lý này giúp bạn kiểm soát trải nghiệm người dùng một cách chính xác. Các trình xử lý sự kiện chính gồm:

  • onSessionCreated: Kích hoạt khi một phiên chatbot mới được tạo (khởi động lại phiên cũng tính!).
  • onWindowOpened: Kích hoạt khi cửa sổ chatbot được mở.
  • onWindowClosed: Kích hoạt khi cửa sổ chatbot được đóng.
  • onError: Kích hoạt khi có lỗi trong chatbot.
  • onMessageReceived: Kích hoạt khi bot gửi tin nhắn hoặc khi người dùng gửi input.
  • onMessageSent: Kích hoạt khi người dùng gửi tin nhắn.

Cách sử dụng trình xử lý sự kiện

Bạn có thể thiết lập trình xử lý bằng biến fhChatbot trả về từ FHChatbot.initChatbot, và thêm listener như fhChatbot.onSessionCreated(). Ví dụ:

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// bắt sự kiện khi chatbot sẵn sàng trên trang của bạn
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot đã sẵn sàng, nút chat nên hiển thị lúc này để có thể nhấn được.");
});

(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg"
    }); 
    
    fhChatbot.onSessionCreated(function () {
      // Logic tùy chỉnh khi phiên được tạo, có thể gọi API hoặc lưu dữ liệu
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // Logic tùy chỉnh khi cửa sổ mở, hoặc hiển thị nội dung phía trên chat
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // Logic tùy chỉnh khi cửa sổ đóng, hoặc hiển thị nội dung phía trên chat
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // Logic tùy chỉnh khi có lỗi, có thể theo dõi lỗi với công cụ tracking
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // Logic tùy chỉnh khi bot phản hồi
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // Logic tùy chỉnh khi người dùng gửi input
      console.log("user sent an input");
    });
  }
);
</script>

Mỗi hàm sự kiện có thể thực hiện logic tùy chỉnh để chatbot phản ứng linh hoạt với hành vi người dùng.

Tình huống sử dụng:

  • Phân tích và báo cáo: Theo dõi thời điểm bắt đầu phiên và sử dụng chatbot bằng các sự kiện như onSessionStart để gửi số liệu giá trị.
  • Cập nhật giao diện động: Thay đổi trang dựa trên sự kiện chatbot (ví dụ: hiển thị thông báo khác khi chat đang hoạt động).
  • Xử lý lỗi: Bắt lỗi và phản hồi, nâng cao trải nghiệm người dùng.
  • Dòng chảy người dùng tùy chỉnh: Thực hiện logic tùy chỉnh dựa trên tương tác người dùng với chat.

Kích Hoạt Chat Tuỳ Chỉnh: Mở và Đóng Theo Ý Bạn

Bằng cách đặt showChatButton: false, bạn có thể ẩn nút chat mặc định. Sau đó, bạn có thể mở hoặc đóng cửa sổ chatbot bằng lập trình dựa trên logic tùy chỉnh. Điều này giúp bạn kiểm soát tối đa giao diện người dùng.

Cách sử dụng kích hoạt tùy chỉnh

  1. Tắt nút mặc định: Trong option của FHChatbot.initChatbot(), thêm: showChatButton: false.
  2. Kiểm soát bằng lập trình: Dùng phương thức fhChatbot.openChat()fhChatbot.closeChat() để điều khiển hiển thị dựa trên sự kiện tùy chỉnh.
<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
(function(d, src, c) { 
  var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');
  s.async=true;s.src=src;s.onload=s.onreadystatechange=function(){
    var rs=this.readyState;
    if(rs&&(rs!='complete')&&(rs!='loaded')){return;}
    c(this);
  };
  t.parentElement.insertBefore(s,t.nextSibling);
})(document,
  'https://app.flowhunt.io/fh-chat-widget.js',
  function(e){ 
    const fhChatbot = FHChatbot.initChatbot({
      chatbotId: '8f1fd880-8e9c-4cb1-a1f2-291c0329612b',
      workspaceId: 'e31db667-893b-4e47-92c3-bb1f93c1b594',
      headerTitle: 'URLsLab FAQ Generator',
      maxWindowWidth: '700px',
      "urlSUffix": "?utm_source=asdfsdfgsdg",
      "showChatButton": false
    }); 
    
    // Ví dụ: khi người dùng nhấn một nút tùy chỉnh
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Ví dụ: khi người dùng đóng bằng nút tùy chỉnh
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

Trong ví dụ này, chúng ta thêm listener vào các nút tùy chỉnh để mở hoặc đóng chat.

Lợi ích:

  • Thiết kế tùy chỉnh: Tích hợp chatbot với phong cách website, dùng nút hoặc trigger riêng để bắt đầu chat.
  • Kiểm soát luồng người dùng: Kích hoạt chatbot ở những điểm cụ thể trong hành trình khách hàng, tăng hỗ trợ theo ngữ cảnh.
  • Đặt vị trí chiến lược: Sử dụng hiệu ứng động hoặc dấu hiệu trực quan để thu hút sự chú ý của người dùng khi phù hợp.

Bằng việc sử dụng biến luồng, hậu tố URL, trình xử lý sự kiện và kích hoạt chat tùy chỉnh, bạn có thể xây dựng trải nghiệm chatbot Flowhunt cực kỳ cá nhân hoá và hấp dẫn. Các tùy chọn nâng cao này cung cấp cho bạn công cụ để tinh chỉnh chatbot phù hợp hoàn hảo với nhu cầu doanh nghiệp và kỳ vọng người dùng.

Câu hỏi thường gặp

Biến luồng trong FlowHunt là gì?

Biến luồng cho phép bạn truyền dữ liệu động—như thông tin người dùng hoặc phiên—vào chatbot FlowHunt. Điều này giúp hội thoại trở nên cá nhân hóa và phù hợp với từng người dùng.

Làm thế nào tôi có thể theo dõi tương tác chatbot bằng FlowHunt?

Sử dụng tham số urlSuffix để thêm chuỗi truy vấn tùy chỉnh vào mọi URL mà chatbot gọi. Điều này giúp dễ dàng theo dõi lưu lượng truy cập và chuyển đổi xuất phát từ chatbot trong các công cụ phân tích như Google Analytics.

Có những trình xử lý sự kiện nào trong FlowHunt JS API?

FlowHunt hỗ trợ các trình xử lý sự kiện như onSessionCreated, onWindowOpened, onWindowClosed, onError, onMessageReceived và onMessageSent, cho phép bạn kiểm soát hoàn toàn các tương tác người dùng do chatbot điều khiển.

Làm thế nào để tôi kích hoạt hoặc kiểm soát chatbot FlowHunt bằng lập trình?

Đặt 'showChatButton' thành false để ẩn nút mặc định, sau đó sử dụng fhChatbot.openChat() và fhChatbot.closeChat() để mở hoặc đóng chatbot theo logic hoặc hành động của người dùng tùy chỉnh.

Lợi ích của tuỳ chỉnh chatbot nâng cao trong FlowHunt là gì?

Tuỳ chỉnh nâng cao giúp bạn cá nhân hóa hành trình người dùng, tích hợp phân tích, kích hoạt hành động động và đồng bộ trải nghiệm chatbot với thiết kế và nhu cầu kinh doanh của website.

Trải nghiệm tuỳ chỉnh chatbot nâng cao với FlowHunt

Nâng cấp chatbot của bạn với các tính năng API JS nâng cao từ FlowHunt. Cá nhân hóa, phân tích và kiểm soát mọi khía cạnh của AI chatbot.

Tìm hiểu thêm

Chatbot HubSpot
Chatbot HubSpot

Chatbot HubSpot

Tăng sức mạnh cho chatbot HubSpot của bạn với FlowHunt. Kiểm soát tốt hơn các phản hồi, nguồn dữ liệu và luồng hội thoại.

11 phút đọc
AI Chatbot +4
Tích hợp
Tích hợp

Tích hợp

FlowHunt tích hợp với các công cụ dịch vụ khách hàng và năng suất bạn yêu thích, giúp bạn tận hưởng chatbot AI và tự động hóa ở bất cứ đâu. Khám phá danh sách t...

2 phút đọc
Integrations AI Chatbot +7
Chatbot
Chatbot

Chatbot

Chatbot là công cụ kỹ thuật số mô phỏng cuộc trò chuyện của con người bằng AI và xử lý ngôn ngữ tự nhiên (NLP), mang lại sự hỗ trợ 24/7, khả năng mở rộng và tiế...

4 phút đọc
AI Chatbot +3