Code to Add Support Chat Widget (Alternative to Intercom)

API & Customization
1

Hi everyone,

 

I find crisp chat widget as alternative solution to intercom and its starter plan is free, it has magic browser which allows you to remotely see which pages are being viewed by your visitors. You also get ability to run your own knowledge base of your app.

 

All you need is to paste the following code into your API /  Javascript section of your app. Remember to sign up with here Crisp  in order to obtain your website ID key.

You need to add your own Crisp website ID.

 

// Script to add Crisp Chat widget to Knack Application//

window.$crisp=[];window.CRISP_WEBSITE_ID="YOUR OWN WEBSITE ID";
(function(){d=document;
s=d.createElement("script");
s.src="https://client.crisp.chat/l.js";
s.async=1;d.getElementsByTagName("head")[0]
.appendChild(s);})();

 

Enjoy!

1 Like
2

Thank you very much Julian, and I really appreciate your input herein.

Can anyone perhaps help me out to reveal the logged in users when you using embedded widget which sits inside knack pages and not  the inline widget (which appears at the bottom corner of the page). Here below is my code for the embbeded widget which I was get users names / information:

<div id='tawk_6038a7d2385de407571a4366'></div>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); Tawk_API.embedded='tawk_33333334366';
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/########33/1f32lnvrp';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);})();
</script>
<!--End of Tawk.to Script-->

 

Thank you very much

3

I have one small thing to add to this...

I have a client in Ireland who have a lot of users with a ' in their names and this causes this tawk.to code to fail - to get round this I have added:

var originalName = Knack.getUserAttributes().name;
var cleanName = originalName.replace("'", " ");
TawkData = "var Tawk_API=Tawk_API||{}; Tawk_API.visitor = { name : '" + cleanName + "', email : '" + Knack.getUserAttributes().email + "'};";

4

Thanks Sam & Bruno!

And Bruno your code reveals how to initiate Tawk.to with the logged in user's details which is awesome.

5

Hey Sam,

Nice option there.

You can also use Tawk.to, also free, just set up your account with them, configure a widget with your colors and style, get the code and place this on your JS:

TawkData = "var Tawk_API=Tawk_API||{}; Tawk_API.visitor = { name : '" + Knack.getUserAttributes().name + "', email : '" + Knack.getUserAttributes().email + "'};";

console.log('Loading Tawk.to Via Knack');

var tawk=document.createElement("script");
tawk.type="text/javascript";
tawk.innerHTML = TawkData;
$("head").append(tawk);

var s=document.createElement("script");
s.type="text/javascript";
s.charset='UTF-8';
s.setAttribute('crossorigin','*');
$("head").append(s);
 
![](upload://iLADCs67EUbTrWjVimp8C89c23n.jpeg)
 
![](upload://2tbw6SitoGs1acpJ83atkZxf4zt.jpeg)
2 Likes