Connecting Clarity with the Clai chat widget

Updates to Clarity index.html

Clai requires an edit to the Clarity index.html for the Modern UI.

The index.html file is located in the %NIKU_HOME%\tomcat-app-deploy\webapps\pm directory. For testing purposes we advise on copying the directory %NIKU_HOME%\tomcat-app-deploy\webapps\pm to %NIKU_HOME%\tomcat-app-deploy\webapps\pmb then editing the file index.html in the folder pmb. This enables users testing the bot to use /pmb in their url rather than /pm.

Change directory to the location of the Clarity tomcat web applications

cd %NIKU_HOME%\tomcat-app-deploy\webapps

Copy the pm folder to pmb

xcopy /E /I pm pmb

Now edit the pmb\index.html file adding the following highlighted script code to close to the end of the file after the endinject but before the closing body element. Note you MUST change the connection information for the Clai Server. The example below assumes Clai is available on port CLAIPORT at host CLAIHOST with no SSL (http). The default when installing Clai free would be http://localhost:8888 but you should use an IP Address or server name rather than localhost when connecting with Clarity.

<!-- endinject -->
<script>!function(){
	let e=document.createElement("script"),t=document.head||document.getElementsByTagName("head")[0];
	e.src="http://CLAIHOST:CLAIPORT/webchat/index.js",e.async=!0,e.onload=(()=>{
	  window.WebChat.default({customData:{"language":"en", "display": "clarity"},
          socketUrl:"http://CLAIHOST:CLAIPORT",
          socketPath: "/development/socket.io/",
          params: {storage: "session"},
	      withRules: true}, null)
	  }),t.insertBefore(e,t.firstChild)}();
</script>
</body></html>

Enable Cross Site access in Clarity to Clai

Now it is necessary to add the Clai server to Clarity to enable Cross Site access to the java script as well as the websocket used by the bot. On the Clarity server add the following, assuming Clai is listening on CLAIPORT at host CLAISERVER with no SSL.

admin system-options -add CONTENT_SECURITY_DOMAINS CLAIHOST:CLAIPORT -multi

admin system-options -add CONTENT_SECURITY_DOMAINS ws://CLAIHOST:CLAIPORT -multi

Note: if ssl is used then change ws to wss

It is now necessary to restart the Clarity app service

service stop app

service start app