Get started

How it works

Our web SDK is a JavaScript snippet that helps you identify, send events for, and send in-app messages to people who visit your website(s) or use your web app(s). Simply drop the snippet into your site and it exposes functions you can call to take advantage of Customer.io.

Install the snippet

Go to Data & Integrations > Integrations > Customer.io API to find and copy our JavaScript snippet with all the values specific to your region and workspace. Include this snippet on every page in your app, immediately before the closing </body> tag.

That’s it! Now you’re ready to use our web SDK. Below is an example snippet for the US region.

<script type="text/javascript">
    var _cio = _cio || [];
    (function() {
        var a,b,c;a=function(f){return function(){_cio.push([f].
        concat(Array.prototype.slice.call(arguments,0)))}};b=["load","identify",
        "sidentify","track","page","on","off"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
        var t = document.createElement('script'),
            s = document.getElementsByTagName('script')[0];
        t.async = true;
        t.id    = 'cio-tracker';
        t.setAttribute('data-site-id', 'YOUR_SITE_ID');
        t.setAttribute('data-use-array-params', 'true');
        t.src = 'https://assets.customer.io/assets/track.js';
        //If your account is in the EU, use:
        //t.src = 'https://assets.customer.io/assets/track-eu.js'
        s.parentNode.insertBefore(t, s);
    })();
</script>

Configure the SDK

For the most part, copying the JavaScript snippet from any page in your workspace includes all the necessary parameters to use our web SDK. But there are a few parameters you can add or set to change the SDK’s behaviors:

ParameterDefaultDescription
data-use-array-paramstrueWhen true, arrays in identify and track calls keep their shape as passed to Customer.io. Set to false to pass arrays as objects containing keys representing the index/order of items in the request. See handling arrays in track calls for more information.
data-auto-track-pagetrueWhen true, the SDK automatically sends page view events when it loads.
data-use-in-appfalseIf you want to send in-app messages to your website, you must set this to true. See In-App Messages to ensure in-app is enabled in your workspace.

 You no longer need your Organization ID

If you enabled in-app support before January 26, 2023, you used your organization-id when configuring our SDKs so that you could send in-app messages. You can leave this code in your SDK configuration, but it’s no longer necessary; you can send in-app messages without it.

Function reference

The web SDK exposes the following functions.

Functionautomaticanonymousdescription
_cio.identifyIdentifies a person and updates their attributes. Future calls reference this person.
_cio.pageSends a page event, representing a “pageview”.
_cio.trackSends a custom event, representing a person’s activity on your website.
_cio.resetStop identifying a person. You might send this call when someone logs out or refuses tracking consent.
_cio.onListen for an in-app message event.
_cio.offStop listening for an in-app message event.
Copied to clipboard!
  Contents
Is this page helpful?