How to implement FreshworksWidget into next.js project?

Question

In Freshdesk docs they provide this script:

<script>
  window.fwSettings={
    'widget_id':12000000025,
    'locale': 'en'
  };
  !function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://widget.freshworks.com/widgets/12000000025.js' async defer />
<script type='text/javascript'>
  //insert API here
</script>

But I have no idea how to implement it into react.js app.

Answer 1

You can directly insert the <script> tags in the index.html file.

Check out this sample react program -> https://playcode.io/708622/

Answer 2

There is a thing called next/scripts that enables you to use scripts inside of next js. See the snippet below:

import Script from 'next/script'

// ... rest of the code here //

return(
  <>
  <Script>{`
    window.fwSettings={
      'widget_id':12000000025,
      'locale': 'en'
    };
    !function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=     [],window.FreshworksWidget=n}}()`}
  </Script>
  <Script type='text/javascript' src='https://widget.freshworks.com/widgets/12000000025.js' async defer />
  <Script type='text/javascript'>
    //insert API here
  </Script>
  </>)