I'm adding zendesk chat script to a NextJS 13 application. When the page change, the <iframe> of the chat is gone. Chat box disappears. How can i fix it?
Here is the implementation details:
'use client';
import { useEffect, useState } from 'react';
let zafClient = null;
export function useZafClient() {
const [client, setClient] = useState(zafClient);
console.log(zafClient);
useEffect(() => {
if (!client && typeof window.ZAFClient !== 'undefined') {
zafClient = window.ZAFClient.init();
console.log({ zafClient }, 'init');
setClient(zafClient);
if (zafClient) {
console.log('invoke');
zafClient.invoke('resize', { width: '100%', height: '200px' });
}
}
}, [client]);
return client;
}const ZendeskChat = () => {
const scriptUrl = 'https://static.zdassets.com/ekr/snippet.js?key=xxxxxxx';
const scriptId = 'ze-snippet';
useZafClient();
return <Script src={scriptUrl} id={scriptId} type="text/javascript" />;
};
export default ZendeskChat;export default async function RootLayout({ children, params }: LayoutProps) {
const { locale } = params;
return (
<html lang={locale} className={roboto.variable}>
<body>{children}</body>
<ZendeskChat />
</html>
);
}in Manifest.json
"location": {
"chat": {
"chat_sidebar": "localhost:3000"
}
}Thank you!
Best,
Fandy
Can you let me know the errors you're seeing when attempting to send the data across. Could you also pinpoint the section of your example that handles the request to Zendesk as I'm not seeing any methods being called from the window.zaf object.
Thanks,
Tipene