How to add javascript <script> tag code to React page-CodePudding

I have the following code below which is generated from Drift for a live chat widget.

<!-- Start of Async Drift Code -->
<script>
"use strict";

!function() {
  var t = window.driftt = window.drift = window.driftt || [];
  if (!t.init) {
    if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
    t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], 
    t.factory = function(e) {
      return function() {
        var n = Array.prototype.slice.call(arguments);
        return n.unshift(e), t.push(n), t;
      };
    }, t.methods.forEach(function(e) {
      t[e] = t.factory(e);
    }), t.load = function(t) {
      var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
      o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/"   n   "/"   t   ".js";
      var i = document.getElementsByTagName("script")[0];
      i.parentNode.insertBefore(o, i);
    };
  }
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('...');
</script>
<!-- End of Async Drift Code -->

And I am trying to add this code into a jsx file.

I have tried to include the above directly into what is returned in the jsx file, but that doesn't work.

I have also tried to put the above code into its own function and call it in what should be displayed on the screen using {{}} but that also didn't work.

The code doesn't have any errors, it only reports this in the console which tells me it's just being called. DRIFT_WIDGET:: widget_core:bootstrap_api finished in 201.60000002384186 ms

Can someone please help in how I can add this widget to my page.

Thank you!

CodePudding user response：

You can try using this package. https://www.npmjs.com/package/react-helmet

import React from "react";
import {Helmet} from "react-helmet";
 
class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
             <!-- your script tag here -->
            </Helmet>
        </div>
    );
  }
};

CodePudding user response：

You can create a component that renders the script tag and then use it in your jsx file.

Example:

import React from 'react';

const DriftScript = () => (
  <script>
    "use strict";

    !function() {
      var t = window.driftt = window.drift = window.driftt || [];
      if (!t.init) {
        if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
        t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], 
        t.factory = function(e) {
          return function() {
            var n = Array.prototype.slice.call(arguments);
            return n.unshift(e), t.push(n), t;
          };
        }, t.methods.forEach(function(e) {
          t[e] = t.factory(e);
        }), t.load = function(t) {
          var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
          o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/"   n   "/"   t   ".js";
          var i = document.getElementsByTagName("script")[0];
          i.parentNode.insertBefore(o, i);
        };
      }
    }();
    drift.SNIPPET_VERSION = '0.3.1';
    drift.load('...');
  </script>
);

export default DriftScript;

Then in your jsx file:

import React from 'react';
import DriftScript from './DriftScript';

const MyComponent = () => (
  <div>
    <DriftScript />
  </div>
);

export default MyComponent;

I hope this helps!