APIs & Integrations

lpansarini
Member

Hubspot chat in Nextjs

I have been trying to use Hubspot chat in company website (https://machinerypartner.com/) and we tried many times, but seems Hubspot cannot work on Nextjs 14. I tried many ways like the others  posts in forum, but without success

I created that hubspot tracker also to try those connections, and seems not working neither

'use client';

import { useEffect, useRef } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

const HubspotTracker = () => {
const pathname = usePathname()
const searchParams = useSearchParams()
const searchParamsDict = Object.fromEntries(searchParams ? searchParams.entries() : [])

var firstLoad = useRef(true);

useEffect(() => {
if (typeof window !== 'undefined') {
var _hsq = (window._hsq = window._hsq || []);

window.hsConversationsSettings = {
loadImmediately: true,
inlineEmbedSelector: "#my-chat-container",
enableWidgetCookieBanner: true,
disableAttachment: true,
};

if (firstLoad.current === true) {
_hsq.push(['setPath', pathname]);
_hsq.push(['trackPageView']);

// I think we only need the trackPageView entry once before the identify.
_hsq.push(['setPath', pathname]);
_hsq.push(['trackPageView']);

window.HubSpotConversations?.widget?.load()
window.HubSpotConversations?.widget?.refresh()

firstLoad.current = false;
} else {
_hsq.push(['setPath', pathname]);
_hsq.push(['trackPageView']);

window.HubSpotConversations?.widget?.load()
window.HubSpotConversations?.widget?.refresh()
}
}
}, [pathname, searchParamsDict]);

return null;
};

export default HubspotTracker;

My script:

<Script
strategy="beforeInteractive"
id="hs-script-loader"
async
defer
/>


Can u guys provide some help?
0 Upvotes
1 Reply 1
Jaycee_Lewis
Community Manager
Community Manager

Hubspot chat in Nextjs

Hi, @lpansarini 👋 I agree with your findings, finding support for NextJS in the community is challenging. I did find a few community members who've helped with these types of questions in the past, and I'd like to invite them to the converstaion — hey @Kevin-C @Teun @tverdokhlib1 do you have any suggestions on next steps or perhaps another way to approach this challenge?

 

Thank you very much for taking a look! — Jaycee





loop


Loop Marketing is a new four-stage approach that combines AI efficiency and human authenticity to drive growth.

Learn More




0 Upvotes