Skip to main content

Examples

HTML​

Simply copy-paste the Produktly script to the HTML, either in the <head> or <body>, either one works.

e.g. in the head element

<html>
  <head>
    <!-- Copy-paste script from Produktly. Make sure to copy-paste from the dashboard, so that your token is included -->
    <script>
      (function (w, d, f) {
        var a = d.getElementsByTagName("head")[0];
        var s = d.createElement("script");
        s.async = 1;
        s.src = f;
        s.setAttribute("id", "produktlyScript");
        s.dataset.clientToken = "your_token";
        a.appendChild(s);
      })(window, document, "https://public.produktly.com/js/main.js");
    </script>
  </head>
  <body></body>
</html>

e.g. in the body element

<html>
  <head> </head>
  <body>
    <!-- Copy-paste script from Produktly. Make sure to copy-paste from the dashboard, so that your token is included -->
    <script>
      (function (w, d, f) {
        var a = d.getElementsByTagName("head")[0];
        var s = d.createElement("script");
        s.async = 1;
        s.src = f;
        s.setAttribute("id", "produktlyScript");
        s.dataset.clientToken = "your_token";
        a.appendChild(s);
      })(window, document, "https://public.produktly.com/js/main.js");
    </script>
  </body>
</html>

React Application​

Usually, you will have a file like index.html where you add all of your external scripts, so that's where you would add Produktly script too.

If you don't for some reason have any html files in your source code. You can also call the Produktly script from your application code. In that case, just remove the <script> tags from around the Produktly script.

You could call the script, e.g. from outside the React code, in some index.js file.

// index.js

// Produktly script, make sure to copy-paste from the dashboard, so that your token is included
(function (w, d, f) {
  var a = d.getElementsByTagName("head")[0];
  var s = d.createElement("script");
  s.async = 1;
  s.src = f;
  s.setAttribute("id", "produktlyScript");
  s.dataset.clientToken = "your_token";
  a.appendChild(s);
})(window, document, "https://public.produktly.com/js/main.js");

// Your other code
// ...

Or in React code, e.g. in a useEffect hook so that it runs just once / when you want.

// App.jsx

const App = () => {
  useEffect(() => {
    // Produktly script, make sure to copy-paste from the dashboard, so that your token is included
    (function (w, d, f) {
      var a = d.getElementsByTagName("head")[0];
      var s = d.createElement("script");
      s.async = 1;
      s.src = f;
      s.setAttribute("id", "produktlyScript");
      s.dataset.clientToken = "your_token";
      a.appendChild(s);
    })(window, document, "https://public.produktly.com/js/main.js");
  }, []);

  // Your other code
  // ...

  return <div>...</div>;
};

Website builder / Third-party site​

Every builder and third-party site is slightly different, so we can't give exact instructions. But in general you should look for sections where:

In general, you should look for sections where:

  • You can edit HTML directly
  • Edit <head> or <body> directly, or append scripts to them
  • Add third-party scripts
  • Add "analytics" scripts

In any of those, you should be able to add the Produktly script and get it integrated to your site.