Hubspot chat in Nextjs

lpansarini — Mon, 28 Oct 2024 21:41:51 GMT

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

src="https://js.hs-scripts.com/MY_CODE_HERE.js"

strategy="beforeInteractive"

id="hs-script-loader"

async

defer

Can u guys provide some help?

Re: Hubspot chat in Nextjs

Jaycee_Lewis — Tue, 29 Oct 2024 20:02:03 GMT

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

topic Hubspot chat in Nextjs in APIs & Integrations

Hubspot chat in Nextjs

Re: Hubspot chat in Nextjs