我在Vue SPA上实现了Hubspot。
它按预期工作。但聊天小部件并没有跟踪SPA页面的转换。
文档建议使用window.HubSpotConversations.widget.refresh();来处理SPAs上未跟踪的页面转换。
如果显示欢迎文本的设置延迟尚未结束refresh()会触发错误的聊天流。
但如果它已经结束了，这是有效的
有点
因为如果新的欢迎文本比旧的长，它就会被裁剪。
旧的欢迎文本
新的但裁剪了
正确显示的新文本
另一个问题：已经通过聊天开始的对话不会在refresh()结束，但如果聊天处于打开状态，则会在之后关闭。我不知道如何告诉小部件像你所期望的那样重新打开。
我是Webz.io的前端开发人员，我们一直在努力在Next.js市场网站中实现HubspotChatflow。然而，Next.js中的路由系统不是由页面刷新引起的，因此Chatflow并不总是知道它是否应该在相关页面上呈现。我们的营销运营专家为该网站创建了聊天流，并确定了机器人程序应该出现的URL，但有时它会故障到其他页面，有时它不会出现在相关页面上，因为Next.js的路由不会迫使Hubspot的机器人程序重新检查当前URL。经过一些研究，我找到了一个解决这个问题的方法，我想与社区分享。
解决方案：刷新
为了解决这个问题，我在Next.js路由器上附加了一个简单的代码行，该代码行调用对Hubspot的HTTP请求来重新验证URL并刷新聊天机器人的状态。以下是代码片段：
useEffect(() => {
if (window.HubSpotConversations && window.HubSpotConversations.widget) {
window.HubSpotConversations.widget.refresh();
}
}, [router]);
或者如果你想缩短：
useEffect(() => {
window.HubSpotConversations?.widget?.refresh();
}, [router]);
这个useEffect挂钩被添加到_app.js文件中，并在每次路由更改时触发Hubspot聊天流的刷新，确保聊天机器人出现在正确的页面上。
虽然这个解决方案对我们有效，但如果Hubspot能够将这个片段添加到他们的文档中，或者创建一个NPM包，在一个名为refreshChatFlow或类似的函数中包含这个useEffect钩子，那将是非常有帮助的。这将使其他开发人员更容易在Next.js网站上实现Hubspot Chatflow，而不会遇到这个问题。
如下所述：https://developers.hubspot.com/docs/api/events/tracking-code，您需要在SPA中处理路线更改事件，然后像这样调用trackPageView：
var _hsq = window._hsq = window._hsq || [];
_hsq.push(['trackPageView']);
在某些情况下，您可能还想调用setPath，如文档中所述。