![](\"https://github.com/CleverTap/clevertap-ios-sdk/blob/master/docs/images/clevertap-logo.png\"){kind=logo}
\n \n
![](\"https://img.shields.io/github/release/CleverTap/clevertap-web-sdk.svg\")
\n\n[](https://www.npmjs.com/package/clevertap-web-sdk)\n\n## ๐ Introduction\n\nThe CleverTap Web SDK for Customer Engagement and Analytics\n\nCleverTap brings together real-time user insights, an advanced segmentation engine, and easy-to-use marketing tools in one mobile marketing platform โ giving your team the power to create amazing experiences that deepen customer relationships. Our intelligent mobile marketing platform provides the insights you need to keep users engaged and drive long-term retention and growth.\n\nFor more information check out our [website](https://clevertap.com/ \"CleverTap\") and [documentation](https://developer.clevertap.com/docs/ \"CleverTap Technical Documentation\").\n\nTo get started, sign up [here](https://clevertap.com/live-product-demo/)\n\n## ๐ Installation\n\nCleverTap Web SDK is available as an npm package or as a script to manually add to your website.\n\n### Use a package manager\n\n```npm install clevertap-web-sdk --save```\n\nor\n\n```yarn add clevertap-web-sdk```\n\n### Manually add the script\n\n```html\n\n```\n\n## ๐ Basic Initialization\n\n### Add your CleverTap account credentials\n\nOnly in case you are using a package manager\n```javascript\nimport clevertap from 'clevertap-web-sdk'\nclevertap.privacy.push({optOut: false}) // Set the flag to true, if the user of the device opts out of sharing their data\nclevertap.privacy.push({useIP: false}) // Set the flag to true, if the user agrees to share their IP data\nclevertap.init('ACCOUNT_ID', 'REGION', 'TARGET_DOMAIN') // Replace with values applicable to you. Refer below\n```\nHere: \\\n```ACCOUNT_ID``` (mandatory): This value can be got from Projects page on the CleverTap Dashboard.\\\n```REGION``` (optional): This will be same as the region of the CleverTap Dashboard. Possible values: (in1/us1/sg1/aps3/mec1).\\\n```TARGET_DOMAIN``` (optional): domain of the proxy server.\n\nFor SPAs you need to also set the following:\n```javascript\nclevertap.spa = true\n```\n\n### \n\n### Event Push\n\nEvents track what individual actions users perform in your app or website. Some examples of events include a user launching an app, viewing a product, listening to a song, sharing a photo, making a purchase, or favoriting an item.\n\n```javascript\n// event without properties\nclevertap.event.push(\"Product viewed\");\n\n// event with properties\nclevertap.event.push(\"Product viewed\", {\n \"Product name\": \"Casio Chronograph Watch\",\n \"Category\": \"Mens Accessories\",\n \"Price\": 59.99,\n \"Date\": new Date()\n});\n```\n\n### Profile Push\n\nAfter you integrate our SDK, we will create a user profile for each person who launches your app or visits your website.\n\n```javascript\n// each of the below mentioned fields are optional\n// if set, these populate demographic information in the Dashboard\nclevertap.profile.push({\n \"Site\": {\n \"Name\": \"Jack Montana\", // String\n \"Identity\": 61026032, // String or number\n \"Email\": \"jack@gmail.com\", // Email address of the user\n \"Phone\": \"+14155551234\", // Phone (with the country code)\n \"Gender\": \"M\", // Can be either M or F\n \"DOB\": new Date(), // Date of Birth. Javascript Date object\n \"Photo\": 'www.foobar.com/image.jpeg', // URL to the Image\n\n// optional fields. controls whether the user will be sent email, push etc.\n \"MSG-email\": false, // Disable email notifications\n \"MSG-push\": true, // Enable push notifications\n \"MSG-sms\": true // Enable sms notifications\n \"MSG-whatsapp\": true, // Enable whatsapp notifications\n }\n})\n```\n\n### Maintaining Multiple User Profiles on the Same Device using OnUserLogin\n\nIf multiple users on the same device use your app, you can use the `clevertap.onUserLogin` method to assign them each a unique profile to track them separately.\n\nHere is an example showing how to add a name and an email to a userโs profile:\n\n```javascript\n// with the exception of one of Identity, Email, or FBID\n// each of the following fields is optional\n\nclevertap.onUserLogin.push({\n \"Site\": {\n \"Name\": \"Jack Montana\", // String\n \"Identity\": 61026032, // String or number\n \"Email\": \"jack@gmail.com\", // Email address of the user\n \"Phone\": \"+14155551234\", // Phone (with the country code)\n \"Gender\": \"M\", // Can be either M or F\n \"DOB\": new Date(), // Date of Birth. Date object\n// optional fields. controls whether the user will be sent email, push etc.\n \"MSG-email\": false, // Disable email notifications\n \"MSG-push\": true, // Enable push notifications\n \"MSG-sms\": true, // Enable sms notifications\n \"MSG-whatsapp\": true, // Enable WhatsApp notifications\n }\n})\n```\n\n### Web Push\n\nWeb push notifications provide the ability to communicate brief, yet important alerts to your users while CleverTapโs rich segmentation and powerful infrastructure can help send time-sensitive, relevant, and personalized push messages at scale.\n\nTo know more on how to configure web push notifications for Chrome, Firefox and Safari, checkout [CleverTap Web Push guide](https://developer.clevertap.com/docs/web#section-web-push).\n\n\n### Offline Mode\n\nThe offline mode allows setting CleverTap SDK to offline. The `setOffline` method determines the SDK online state. By default the offline state of the sdk is set to `false`.\n\nHowever, once the `setOffline` method is passed with `true` as described below, the CleverTap SDK goes offline. All the events are recorded and queued locally, but they are not sent to the CleverTap server.\n\nWhen the `setOffline` method is passed with `false`, as described below, the CleverTap SDK goes online, and the queued events are sent to the server immediately.\n\n```javascript\n clevertap.setOffline(true) // sets the sdk in offline mode.Events will be queued locally and will be fired only when offline mode is set to false\n clevertap.setOffline(false) // disables the offline mode. Events will now get fired immediately\n\n```\n\n### Debugging\n\nThis section is applicable for all browsers such as, Chrome, Firefox, and Safari. Error messages and warnings are logged to the JS console of the browser.\n\nFor verbose logging, enable verbose logging of all communication with the CleverTap servers by setting the ```WZRK_D``` variable in sessionStorage. In the developer console of your browser type, ```sessionStorage['WZRK_D'] = '';```\n\nAlternatively, you can also set the log levels after calling ```clevertap.init()``` in the following way:\n\n```javascript\nclevertap.setLogLevel(LOG_LEVEL)\n// Here Log Levels is an integer that can be any of the folowing: \n// 0: disable all logs\n// 1: display only errors\n// 2: display errors and info\n// 3: display all logs\n```\n\n\n## ๐ก Example Usage\n* A [React Application](/example-apps/react) showing the integration of our SDK in a create react app project.\n* An [Angular Application](/example-apps/angular) showing the integration of our SDK in an Angular CLI generated project.\n\n\n## ๐ Change Log\n\nRefer to the [CleverTap Web SDK Change Log](/CHANGELOG.md).\n\n## ๐ License\n\nCleverTap Web SDK is released under the MIT license. See [LICENSE](/LICENSE) for details.\n\n","readmeFilename":"README.md"}