Custom Code Script Not Executing Correctly

Design help Custom code
1

So, I am trying to add a new script to the custom code in project settings. When I add the script I should see a small widget that floats on the bottom right of the screen. When clicked it brings up a live chat box (kayako).

The current iteration works… but their beta version does not. I have tried to add it after stripping away all the current custom code on the site… still does not work.

I have added it, via wordpress, to the blog that is integrated with the site here https://fxpig.com/blog, and it loads correctly.

Here is the code snippet;

<script type="text/javascript">!function(a,b){function c(){var b=a.createElement("iframe");return b.id="kayako-messenger-frame",b.style.border="none",b.style.width="100%",b.style.height="100%",b}function d(){var c=a.createElement("script");return c.async=!0,c.type="text/javascript",c.src=b._settings.messengerUrl,c}function e(){var b=a.createElement("div");return b.id="kayako-messenger",b.style.position="fixed",b.style.right=0,b.style.bottom=0,b.style.width=0,b.style.height=0,b}window.kayako=b,b.readyQueue=[],b.ready=function(a){b.readyQueue.push(a)},b._settings={messengerUrl:"https://fxpig.kayakocdn.com/messenger",apiUrl:"https://fxpig.kayako.com/api/v1",socketInstance:"fxpig.kayako.com",teamName:"FXPIG",homeTitle:"Hi... Need some Help",homeSubtitle:"Welcome to FXPIG. Let's chat - start a new conversation below.",widgets:{presence:{enabled:true},twitter:{enabled:true,twitterHandle:"134279494"},articles:{enabled:false,sectionId:undefined}},styles:{primaryColor:"#9557c1",homeBackground:"#9557c1",homePattern:"",homeTextColor:"#FFFFFF"}};var f=a.body.getElementsByTagName("script")[0],g=c(),h=e();f.parentNode.insertBefore(h,f),g.onload=function(a){a.target.loaded||(a.target.loaded=!0,g.contentWindow.document.body.appendChild(d()))},h.appendChild(g,f),g.contentWindow.document.open(),g.contentWindow.document.write("<!DOCTYPE html>"),g.contentWindow.document.write("<html>"),g.contentWindow.document.write("<head></head>"),g.contentWindow.document.write("<body></body>"),g.contentWindow.document.write("</html>"),g.contentWindow.document.close()}(document,window.kayako||{});</script>

I am trying to add this to https://fxpig.com. Currently, the site displays the non-beta widget, using this code;

<script type="text/javascript">!function(a,e){window.kayako=e,e.readyQueue=[],e._config={apiUrl:"https://fxpig.kayako.com/api/v1",cdnUrl:"https://fxpig.kayako.com/__apps/widget/assets/visitor",defaultName:"FXPIG",themeColor:"#9557c1",themeAvatar:"https://fxpig.com/images/genie-43.png",welcomeMessage: "How can we help? We’d love to know what brought you to FXPIG"},e.ready=function(a){e.readyQueue.push(a)};var t=a.createElement("div");t.id="Kykw__app",t["class"]="k-widget",a.body.appendChild(t);var o=a.createElement("script");o.type="text/javascript",o.async=!0;var i="https://fxpig.kayako.com/__apps/widget/assets/visitor/javascript/production.min.js";o.src=i;var s=a.getElementsByTagName("script");s=s[s.length-1],s.parentNode.insertBefore(o,s)}(document,window.kayako||[]);</script>

And you can see what the new code does here: http://fxpig-v4-current.webflow.io/

(To load the site you need to inspect and then remove the display:block)

There has to be some conflict within webflow that is stopping this script from running, but I have no idea what it might be.

Any ideas? REALLY appreciate the help

2

New code site doesn’t load for me

1920×967 106 KB

3

You need to right click, inspect and uncheck the display:hidden element

Not sure why this is, but for some reason the webflow published version never seems to do this on its own

4

The script is blocked in Google Chrome due to terrible coding practices. Please contact the author of the script.

1919×526 127 KB

5

Will do… But that has nothing to do with the problem at hand…

The specified code causes errors in webflow only, on our actual website at fxpig.com there are no such errors and the underlying element, the ticker at the top of the page, loads and works as expected.

6

Wait… that code is ONLY on the index page, and when checking other pages via the webflow sub domain the kayako widget does show up as intended… so I guess you are correct samliew :slight_smile:

Thank you.

Any idea on how this specific snippet could be cleaned up?

7

Yeah, I copied the new code onto a test page and it worked

http://sandbox-903b9c.webflow.io/kayako-test-chat

Possibly a script conflict now due to the document.write, which I mentioned is terrible practice.

8

Yeah actually seems this is garbage code anyway, it is not in use. I believe we may have used it as a hack to test the ticker initially… and someone forgot to erase it…

Anyway, problem solved.

Thanks again.

9

Hmm… so I removed the garbage code and via the webflow sub domain everything worked… but after downloading the code and uploading to our server the display:block will not automatically disengage anymore and the widget does not appear…

Could there be some conflict with this

<style>
    .loader-container{
        display: block;
    }
</style>
10

Down to one issue, Syntax Error…

“Uncaught Syntax Error: missing ) after argument list”

Can someone help to spot the issue in the below code snippet:

<script type="text/javascript">!function(a,b){function c(){var b=a.createElement("iframe");return b.id="kayako-messenger-frame",b.style.border="none",b.style.width="100%",b.style.height="100%",b}function d(){var c=a.createElement("script");return c.async=!0,c.type="text/javascript",c.src=b._settings.messengerUrl,c.crossOrigin="anonymous",c}function e(){var b=a.createElement("div");return b.id="kayako-messenger",b.style.position="fixed",b.style.right=0,b.style.bottom=0,b.style.width=0,b.style.height=0,b}window.kayako=b,b.readyQueue=[],b.ready=function(a){b.readyQueue.push(a)},b._settings={apiUrl:"https://fxpig.kayako.com/api/v1",teamName:"FXPIG",homeTitle:"Hi... Need some Help?",homeSubtitle:"Welcome to FXPIG. Let's chat - start a new conversation below.",messengerUrl:"https://fxpig.kayakocdn.com/messenger",realtimeUrl:"wss://kre.kayako.net/socket",widgets:{presence:{enabled:true},twitter:{enabled:false,twitterHandle:"134279494"},articles:{enabled:false,sectionId:undefined}},styles:{primaryColor:"#9557c1",homeBackground:"-192deg, #9557c1 37%, #532574 100%",homePattern:"",homeTextColor:"#FFFFFF"}};var f=a.body.getElementsByTagName("script")[0],g=c(),h=e();f.parentNode.insertBefore(h,f),h.appendChild(g,f),g.contentWindow.document.open(),g.contentWindow.document.write("<!DOCTYPE html>"),g.contentWindow.document.write("<html>"),g.contentWindow.document.write("<head></head>"),g.contentWindow.document.write("<body></body>"),g.contentWindow.document.write("</html>"),g.contentWindow.document.body.appendChild(d()),g.contentWindow.document.close()}(document,window.kayako||{});</script>

11

Still digging here… and i have to believe this syntax error is not the issue… as I have checked the code a million times. I can get this to work in DW, in WP, etc… so maybe its something in the CSS? Its the only thing I can think of…

12

https://preview.webflow.com/preview/fxpig-v4-current?preview=cf6b6c492d23d76abbce91a7a9f62006

Currently, the old kayako code is live, with no errors… substituting the code from previous posts causes the loader to remain in place and the kayako chat widget never appears