FloatingChatBubble was forked. Continue chatting to ask questions about or make changes to it.
The code that integrates Gladly is located in the CustomerServiceChat.tsx file. This component is responsible for setting up and launching the Gladly chat widget. Here's a breakdown of how it works:
The component is defined in the file:
CustomerServiceChat that handles the Gladly integration.The integration is done using a useEffect hook, which does the following:
Here's the relevant part of the code that sets up Gladly:
useEffect(() => {
// Inject Gladly script
const script = document.createElement('script');
script.innerHTML = `
!function(c,n,r,t){if(!c[r]){var i,d,p=[];d="PROD"!==t&&t?"STAGING"===t?"https://cdn.gladly.qa/gladly/chat-sdk/widget.js":t:"https://cdn.gladly.com/chat-sdk/widget.js",c[r]={init:function(){i=arguments;var e={then:function(t){return p.push({type:"t",next:t}),e},catch:function(t){return p.push({type:"c",next:t}),e}};return e}},c.__onHelpAppHostReady__=function(t){if(delete c.__onHelpAppHostReady__,(c[r]=t).loaderCdn=d,i)for(var e=t.init.apply(t,i),n=0;n<p.length;n++){var a=p[n];e="t"===a.type?e.then(a.next):e.catch(a.next)}},function(){try{var t=n.getElementsByTagName("script")[0],e=n.createElement("script");e.async=!0,e.src=d+"?q="+(new Date).getTime(),t.parentNode.insertBefore(e,t)}catch(t){}}()}}
(window,document,'Gladly','PROD');
window.gladlyConfig = {
appId: 'petcircle.com'
};
`;
document.body.appendChild(script);
// ... (code to hide the default button and launch chat)
return () => {
document.body.removeChild(script);
document.head.removeChild(style);
};
}, []);This component is then used in the FloatingChat.tsx file when the user selects the customer service option:
{chatState === ChatState.CustomerServiceChat && <CustomerServiceChat />}So, when the chat state changes to CustomerServiceChat, the Gladly integration is loaded and initialized.