FlowHunt JS API：高级聊天机器人自定义

解锁 FlowHunt 聊天机器人的高级功能：通过流变量个性化、通过 URL 后缀追踪、使用事件处理器，以及控制聊天激活，打造定制化用户体验。

预约演示 立即试用

Flowhunt 拥有强大的功能，可让您深度定制聊天机器人的行为，并与您的网站或应用实现无缝集成。在本页中，您将学习如何进行一些高级自定义——流变量、URL 参数、事件驱动回调以及自定义聊天激活逻辑。

流变量：个性化聊天体验

流变量为聊天机器人传递动态数据提供了方式，从而实现真正的个性化。您可以在这些变量中存储任何内容，比如用户数据、会话数据或者任何相关信息。

如何使用 flowVariable

flowVariable 是 FHChatbot.initChatbot() 配置的一部分。它是一个对象，每个键值对定义了一个变量及其值。例如——传递用户的 IP 地址和用户 id：

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

重要提示：

  • 请将 /* Code to obtain IP Address */ 和 /* Code to obtain User ID */ 替换为您实际获取这些值的逻辑，通常涉及访问服务端变量、本地存储，或依赖其他身份认证方式。
  • 传递后，这些变量会在您的聊天机器人逻辑中可用，从而实现动态响应和个性化工作流。
  • 聊天机器人逻辑可读取并使用这些变量，个性化对话，让其更具情境感知。

urlSuffix：追踪与分析聊天机器人互动

urlSuffix 参数允许您为聊天机器人发起的每个 URL 追加查询字符串。这对于使用 Google Analytics 等分析工具追踪聊天机器人互动的来源和效果非常有价值。

如何使用 urlSuffix

只需将 urlSuffix 属性设置为您期望的查询字符串，如下所示：

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

在此示例中，?utm_source=your-custom-source 将被追加到所有由聊天机器人发起的 URL，方便您在分析平台中追踪聊天机器人的流量。

优势

  • 追踪转化： 监控哪些聊天机器人互动带来了最多转化。
  • 分析用户行为： 理解用户在与聊天机器人互动后的站内行为。
  • 归因营销活动： 衡量激励用户与聊天机器人互动的活动效果。

事件处理器：响应聊天机器人动作

Flowhunt 允许您设置事件处理器，在聊天机器人发生特定事件时触发自定义函数。这些处理器为用户体验提供了精细化的控制。主要的事件处理器包括：

  • onSessionCreated：当新会话启动时触发（重启会话也算）。
  • onWindowOpened：当聊天窗口打开时触发。
  • onWindowClosed：当聊天窗口关闭时触发。
  • onError：当聊天机器人发生错误时触发。
  • onMessageReceived：当机器人发送信息或用户发送输入时触发。
  • onMessageSent：当用户发送消息时触发。

如何使用事件处理器

可以通过 FHChatbot.initChatbot 返回的 fhChatbot 变量设置处理器，并添加如 fhChatbot.onSessionCreated() 的监听器。示例：

<script type="text/javascript" id="fh-chatbot-script-8f1fd880-8e9c-4cb1-a1f2-291c0329612b">
// catch event when chatbot is ready on your page
window.addEventListener("onFHChatbotReady", (e) => {
  console.log("Chatbot is ready, chat button should be visible at this time ready to be clicked.");
});

(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 () {
      // Custom logic when the session is created, could fire API calls, or store data
      console.log("session started");
    });
    
    fhChatbot.onWindowOpened(function () {
      // custom logic when the window opens, or show some content above the chat
      console.log("window opened");
    });
    
    fhChatbot.onWindowClosed(function () {
      // custom logic when the window is closed, or show some content above the chat
      console.log("window closed");
    });
    
    fhChatbot.onError(function (e) {
      // custom logic when an error is fired, could track it on error tracking tool.
      console.log(e.metadata);
      console.log("window error");
    });
    
    fhChatbot.onMessageReceived(function (e) {
      // custom logic when the bot answered.
      console.log("chatbot answered");
    });
    
    fhChatbot.onMessageSent(function (e) {
      // custom logic when the user sent an input.
      console.log("user sent an input");
    });
  }
);
</script>

每个事件处理函数都可以执行自定义逻辑，让您的聊天机器人根据用户行为实现动态响应。

应用场景：

  • 数据分析与报告： 利用 onSessionStart 等事件追踪会话启动和机器人使用情况，发送有价值的指标数据。
  • 动态 UI 更新： 根据聊天机器人事件更新页面（如聊天激活时显示不同内容）。
  • 错误处理： 捕获并响应聊天机器人错误，提升用户体验。
  • 自定义用户流程： 根据用户与聊天机器人的互动实现自定义逻辑。

自定义聊天激活：完全掌控打开与关闭

通过设置 showChatButton: false，您可以隐藏默认的聊天按钮。然后，您可以根据自己的自定义逻辑以编程方式打开或关闭聊天窗口。这为界面控制提供了最大自由度。

如何实现自定义激活

  1. 禁用默认按钮： 在 FHChatbot.initChatbot() 配置中添加：showChatButton: false。
  2. 编程控制： 使用 fhChatbot.openChat() 和 fhChatbot.closeChat() 方法，根据您的自定义事件控制可见性。
<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
    }); 
    
    // Example: if user clicks on a button 
    const customChatButton = document.getElementById("myCustomChatButton")
    customChatButton.addEventListener("click", () => {
      fhChatbot.openChat();
    });

    // Example: if user closes by using a custom close button
    const customCloseChatButton = document.getElementById("myCustomCloseChatButton")
    customCloseChatButton.addEventListener("click", () => {
      fhChatbot.closeChat();
    });
  }
);
</script>

在此示例中，我们为自定义按钮添加了监听器，以打开或关闭聊天窗口。

优势：

  • 自定义设计： 结合您的网站风格，使用自定义按钮或其他触发器激活聊天机器人。
  • 用户流程控制： 在用户旅程的关键节点启动聊天机器人，增强情境化支持。
  • 战略性展示： 可以用动画或视觉提示，在合适的时机吸引用户注意聊天机器人。

通过流变量、URL 后缀、事件处理器和自定义聊天激活，您能用 Flowhunt 打造高度定制且富有吸引力的聊天机器人体验。这些高级选项为您微调机器人以完美匹配您的业务需求和用户期望提供了强大工具。

常见问题

FlowHunt 中的流变量是什么？

流变量允许您将动态数据（如用户或会话信息）传递到 FlowHunt 聊天机器人中。这使得对每个用户的对话都能实现个性化和情境感知。

如何使用 FlowHunt 追踪聊天机器人互动？

使用 urlSuffix 参数为聊天机器人调用的每个 URL 添加自定义查询字符串。这样您就可以在 Google Analytics 等分析工具中轻松追踪由聊天机器人带来的流量和转化。

FlowHunt JS API 支持哪些事件处理器？

FlowHunt 支持事件处理器，例如 onSessionCreated、onWindowOpened、onWindowClosed、onError、onMessageReceived 和 onMessageSent，让您能够全面掌控聊天机器人驱动的用户互动。

如何以编程方式激活或控制 FlowHunt 聊天机器人？

将 'showChatButton' 设置为 false 以隐藏默认按钮，然后使用 fhChatbot.openChat() 和 fhChatbot.closeChat() 根据您的自定义逻辑或用户操作打开或关闭聊天机器人。

在 FlowHunt 中进行高级聊天机器人自定义有哪些好处？

高级自定义让您能够个性化用户旅程、集成分析、触发动态操作，并且让聊天机器人体验无缝匹配您的网站设计和业务需求。

试用 FlowHunt 的高级聊天机器人自定义

借助 FlowHunt 的高级 JS API 功能，将您的聊天机器人提升到新高度。实现个性化、分析和全面掌控 AI 聊天机器人的每个细节。

预约演示 立即试用

了解更多

HubSpot 聊天机器人
HubSpot 聊天机器人

HubSpot 聊天机器人

用 FlowHunt 为您的 HubSpot 聊天机器人赋能。更好地控制回复、数据源和对话流程。

2 分钟阅读
AI Chatbot +4
Freshchat 集成
Freshchat 集成

Freshchat 集成

FlowHunt 可与所有主流客户服务解决方案集成，包括 Freshchat！通过轻松的 Freshchat 集成，实现从 AI 聊天机器人到人工支持的无缝切换。...

1 分钟阅读
Freshchat AI Integration +4