Unexpected Token Error but when adding script to _app _document

[skdigital]

Bug report

Describe the bug

A clear and concise description of what the bug is.

• Unexpected Token Error

To Reproduce

1. add the followings script to either the next/head component in _app.js or _document.js.

 <script type="text/javascript">
var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || 
{widgetcode:"f589f59481ce309ac19d5af4c8559db208871444ed36899ac8a2b22830d6940c", values:{},ready:function(){}};
var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;
s.src="https://salesiq.zoho.eu/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);d.write("<div id='zsiqwidget'></div>");
</script>

Expected behavior

1. I add the script as per the instructions on Zoho.
2. Everything just works as intended as the head/next component is supposed to accept script files.
3. No Unexpected Token Errors in the in the console.
4. The chat box appears at the bottom of my page.

Additional context

I posted this questionon spectrum.chat but no-one replied and I am running out of time and options so I am posting here hoping for a response or solution.

I am using Zoho crm and related services, the script is for a chat app. They have given the following instructions to me.

To start using SalesIQ, you need to add this code in all the pages of your website. Copy and paste this code right before the closing tag of your website's HTML source code. Note: If you wish to add a live chat widget on your website make sure to check the Add Live Chat option below the code.

[ijjk]

Hi, it looks like you need to use dangerouslySetInnerHTML here since React escapes the characters by default

New snippet:

<script dangerouslySetInnerHTML={{ 
  __html: `var $zoho=$zoho || {};$zoho.salesiq = $zoho.salesiq || 
{widgetcode:"f589f59481ce309ac19d5af4c8559db208871444ed36899ac8a2b22830d6940c", values:{},ready:function(){}};
var d=document;s=d.createElement("script");s.type="text/javascript";s.id="zsiqscript";s.defer=true;
s.src="https://salesiq.zoho.eu/widget";t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(s,t);d.write("<div id='zsiqwidget'></div>");` 
}} />

Closing since the above should resolve this. Feel free to reply with additional details if you're still having trouble.

[skdigital]

where do I place this snippet? In the _document.js or _app.js and do I place it in the head component?

[skdigital]

Its working! thank you... however where is best to place such a script, in the _app.js or _document.js?

[jmayergit]

@skdigital you can place wherever you'd like as for what's best that depends on what pages the script is used. Multiple heads all over your project are fine. Thanks for your original question - it solved my issue 👍

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.