0

I got the source code for it but how can I import it and use it in my components?

<script id='_webengage_script_tag' type='text/javascript'>
        var webengage;!function(w,e,b,n,g){function o(e,t){e[t[t.length-1]]=function(){r.__queue.push([t.join("."),
        arguments])}}var i,s,r=w[b],z=" ",l="init options track screen onReady".split(z),a="feedback survey notification".split(z),c="options render clear abort".split(z),p="Open Close Submit Complete View Click".split(z),u="identify login logout setAttribute".split(z);if(!r||!r.__v){for(w[b]=r={__queue:[],__v:"6.0",user:{}},i=0;i < l.length;i++)o(r,[l[i]]);for(i=0;i < a.length;i++){for(r[a[i]]={},s=0;s < c.length;s++)o(r[a[i]],[a[i],c[s]]);for(s=0;s < p.length;s++)o(r[a[i]],[a[i],"on"+p[s]])}for(i=0;i < u.length;i++)o(r.user,["user",u[i]]);setTimeout(function(){var f=e.createElement("script"),d=e.getElementById("_webengage_script_tag");f.type="text/javascript",f.async=!0,f.src=("https:"==e.location.protocol?"https://widgets.in.webengage.com":"http://widgets.in.webengage.com")+"/js/webengage-min-v-6.0.js",d.parentNode.insertBefore(f,d)})}}(window,document,"webengage");webengage.init("your INIT key"); 
</script>
jjeoneun
  • 346
  • 5
  • 16
Divakar Yadav
  • 11
  • 1
  • 3

1 Answers1

1
  • You should create an account to begin with. You can start with a 14 day free trial. This will enable you to get an account ID called licenseCode which needs to be used to initialise the Web SDK script mentioned in the question.
  • Follow the documentation to setup your account.
  • For a ReactJS based frontend, you should add the SDK Integration script inside your index.html file and into the head section.

<head>
  ..
  ..
  ..
  <script id="_webengage_script_tag" type="text/javascript">
    var webengage;
    ! function(w, e, b, n, g) {
      function o(e, t) {
        e[t[t.length - 1]] = function() {
          r.__queue.push([t.join("."), arguments])
        }
      }
      var i, s, r = w[b],
        z = " ",
        l = "init options track screen onReady".split(z),
        a = "feedback survey notification".split(z),
        c = "options render clear abort".split(z),
        p = "Open Close Submit Complete View Click".split(z),
        u = "identify login logout setAttribute".split(z);
      if (!r || !r.__v) {
        for (w[b] = r = {
            __queue: [],
            __v: "6.0",
            user: {}
          }, i = 0; i < l.length; i++) o(r, [l[i]]);
        for (i = 0; i < a.length; i++) {
          for (r[a[i]] = {}, s = 0; s < c.length; s++) o(r[a[i]], [a[i], c[s]]);
          for (s = 0; s < p.length; s++) o(r[a[i]], [a[i], "on" + p[s]])
        }
        for (i = 0; i < u.length; i++) o(r.user, ["user", u[i]]);
        setTimeout(function() {
          var f = e.createElement("script"),
            d = e.getElementById("_webengage_script_tag");
          f.type = "text/javascript",
            f.async = !0,
            f.src = ("https:" == e.location.protocol ? "https://widgets.in.webengage.com" : "http://widgets.in.webengage.com") + "/js/webengage-min-v-6.0.js",
            d.parentNode.insertBefore(f, d);
        })
      }
    }(window, document, "webengage");

    webengage.init('YOUR_WEBENGAGE_LICENSE_CODE');
  </script>
  ..
  ..
  ..
</head>
  • Now you can access the webengage object inside any of your components and further make use of the various SDK methods mentioned in the documentation.

import React, {
  Component
} from "react";

class App extends Component {
  componentDidMount() {
    webengage.track('CustomEvent', {
      'firstName': 'Alex'
    }); // version 1
    
    window.webengage.track('CustomEvent', {
      'firstName': 'Alex'
    }); // version 2
  }

  render() {
    return (
    <div className = "App" >
      <header className = "App-header" >
        <img src={logo} className = "App-logo" alt = "logo" />
        <a className = "App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" >Learn React 
        </a> 
      </header> 
    </div>
    );
  }
}

ReactDOM.render( <App/> , document.getElementById("root"));

  • If you are using some syntax linter like (eslint) in your project, using the first version of code will throw errors. Please refer to this detailed explanation for more on referencing unimported libraries.

  • Thus, you can try using the second version with the window keyword.

  • Further, if you are building a single page application, do checkout the SPA version of the WebEngage's WebSDK.

Hope these steps help you integrate without hassle.

Farhan Ali
  • 26
  • 2