i'm using chat widget in react app , here is my setting:
import React, { useEffect } from 'react';
import { useAuthContext } from 'app/components/Auth/authContext';
import useGetZendeskToken from 'app/hooks/useGetZendeskToken';
import config from 'config';
declare global {
interface Window {
zE: any;
}
}
const zendeskKey = config.APP_ZENDESK_KEY;
const ZendeskWidget: React.FC = () => {
const { currentUser } = useAuthContext();
const { zendeskToken } = useGetZendeskToken();
/**
* Function to load the Zendesk Web SDK script and initialize it.
*/
const loadZendesk = async () => {
try {
if (!currentUser || !zendeskToken) {
console.error('Current user or Zendesk token is not available.');
return;
}
// Create a script element to load the Zendesk Web SDK script
const script = document.createElement('script');
script.src = `https://static.zdassets.com/ekr/snippet.js?key=${zendeskKey}`;
script.id = 'ze-snippet';
script.async = true;
// On script load, initialize the Zendesk Web SDK
script.onload = () => {
if (!window.zE) {
console.error('Zendesk Web SDK failed to load.');
return;
}
// Authenticate the user with JWT token
window.zE('messenger', 'loginUser', (callback: (token: string) => void) => {
if (!zendeskToken.token) {
console.error('Zendesk token is not available.');
return;
}
callback(zendeskToken.token);
});
// Show the Zendesk widget
window.zE('messenger', 'show');
};
// Log an error if the script fails to load
script.onerror = () => {
console.error('Error loading Zendesk widget script.');
};
// Append the script to the document body
document.body.appendChild(script);
} catch (error) {
console.error('Error loading Zendesk widget:', error);
console.log('loi roi`!!!');
}
};
/**
* Function to clean up the Zendesk Web SDK script and elements.
*/
const cleanupZendesk = () => {
// Remove the Zendesk script element
const script = document.getElementById('ze-snippet');
if (script) {
console.log('remove script');
document.body.removeChild(script);
}
// Hide the Zendesk widget
if (window.zE) {
window.zE('messenger', 'hide');
window.zE('messenger', 'logoutUser');
}
};
useEffect(() => {
// Load or clean up the Zendesk widget based on the current user and token
if (currentUser && zendeskToken?.token) {
loadZendesk();
}
// Clean up the Zendesk widget when the component unmounts or dependencies change
return () => {
cleanupZendesk();
};
}, [currentUser, zendeskToken]);
return null;
};
export default ZendeskWidget;
with the accout has already chat registed on zendesk the chat widget work perfectly but with accounts that haven't been registed it show couldn’t load messages zendesk.
How can i load the message on the fisrt launch ?