Skip to main content

Webflow

Percept SDK usage with Webflow

Getting started​

Initialize Percept SDK​

We recommend doing a site wide initialisation so that window.percept object is available on all your pages. Go to site setting, scroll down to Custom Code section and paste the following snippet in Footer section:

<script type="module">
  import Percept from "https://unpkg.com/@perceptinsight/percept-js?module";
  Percept.init("Your Project Token");
</script>

Publish your changes. Now you can head to Events section on Percept dashboard and view bunch of events like $pageView, $webVitals, $fetch etc has started flowing in. You can configure which events you want to auto track by passing those in the second argument of init call.

List of available options

List of events auto tracked by sdk

If you don't want to configure Percept sdk site wise, you can head over to individual page Custom Code section and paste the above snippet in Before </body> tag section.

That's it 🎉

For a list of available methods on Percept SDK, head over to Web integration section

Page view event snapshot

Examples​

Capture all click events​

Head over to Custom Code section in site settings. Paste the following snippet in the Footer section:

<script type="module">
    import Percept from "https://unpkg.com/@perceptinsight/percept-js?module";

    Percept.init("Your Project Token");

    document.addEventListener("click", function(e) {
        if(e.target.tagName) {
        	window.percept.capture("Clicked", {
            	clickElement: e.target.tagName,
              	clickElementText: e.target.innerText || e.target.value
            })
        }
 	})
</script>

Publish your changes. Go to Events section on you Percept dashboard. You will see that click events on your site are getting captured with name Clicked.

Clicked event snapshot