CODEWITHSUNDEEP
javascriptreactjsnext.jsserver-side-renderingfreshdesk
Nikita Prus
Nikita Prus

Reputation: 351

How to implement FreshworksWidget into next.js project?

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.

Upvotes: 0

Views: 3104

Answers (2)

Mika
Mika

Reputation: 21

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>
  </>)

Upvotes: 2

Kannan
Kannan

Reputation: 194

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

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

Upvotes: 0

Related Questions