Script Tag for 3rd Party

Answered

Highlander posted this in #help-forum

HighlanderOP

2023-11-24T04:38:19.000Z

I am using Next.js 14 and would like to add a 3rd party script tag to add a chat bot to my website. Here is the script tag that the 3rd party says I should add:

<script type="text/javascript">
  (function(d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function() {
        window.voiceflow.chat.load({
          verify: { projectID: '655e9a9073f76b00076ed256' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production'
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>

I get errors when trying to add it to my RootLayout. Any guidance would be appreciated.

Answered by Ray

use import Script from "next/script";

View full answer

7 Replies

Ray

2023-11-24T04:40:23.000Z

<script
        type="text/javascript"
        dangerouslySetInnerHTML={{
          __html: `
            (function(d, t) {
              var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
              v.onload = function() {
                window.voiceflow.chat.load({
                  verify: { projectID: '655e9a9073f76b00076ed256' },
                  url: 'https://general-runtime.voiceflow.com',
                  versionID: 'production'
                });
              }
              v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
          })(document, 'script');
        `,
        }}
      ></script>

HighlanderOP

2023-11-24T05:07:10.000Z

works but then get this error @Ray Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <script> in <html>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Ray

2023-11-24T05:11:21.000Z

use import Script from "next/script";

Answer

Ray

2023-11-24T05:12:18.000Z

 const id = useId();
 ....
 return (
   ...
    <Script
        id={id}
        type="text/javascript"
        dangerouslySetInnerHTML={{
          __html: `
            (function(d, t) {
              var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
              v.onload = function() {
                window.voiceflow.chat.load({
                  verify: { projectID: '655e9a9073f76b00076ed256' },
                  url: 'https://general-runtime.voiceflow.com',
                  versionID: 'production'
                });
              }
              v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
          })(document, 'script');
        `,
        }}
      ></script>
)

HighlanderOP

2023-11-24T05:18:10.000Z

is that in the root layout under html tag?

Ray

2023-11-24T05:22:34.000Z

inside body

HighlanderOP

2023-11-24T05:40:35.000Z

thank you so much got it working!