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:
| Parameter | Default | Description |
|---|---|---|
data-use-array-params | true | When 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-page | true | When true, the SDK automatically sends page view events when it loads. |
data-use-in-app | false | If 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.
| Function | automatic | anonymous | description |
|---|---|---|---|
_cio.identify | Identifies a person and updates their attributes. Future calls reference this person. | ||
_cio.page | Sends a page event, representing a “pageview”. | ||
_cio.track | Sends a custom event, representing a person’s activity on your website. | ||
_cio.reset | Stop identifying a person. You might send this call when someone logs out or refuses tracking consent. | ||
_cio.on | Listen for an in-app message event. | ||
_cio.off | Stop listening for an in-app message event. |
