@contactlab/sdk-browser
Advanced tools
Browser SDK for the Contacthub API.
The easiest way to send pageviews, events and customer information from your website to the Contacthub API.
Insert this snippet in your website (preferably in the <HEAD> section):
<script>
window.ch=function(){(ch.q=ch.q||[]).push(arguments)};
ch('config', {/* see below */});
ch('customer', {/* see below */});
ch('event', {/* see below */});
</script>
<script async src='https://assets.contactlab.it/contacthub/sdk-browser/latest/contacthub.min.js'></script>
Compressed and uncompressed copies of Contacthub SDK files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.
Use CDNs can offer a performance benefit by hosting Contacthub SDK on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of Contacthub SDK from the same CDN, it won't have to be re-downloaded.
To load a hosted library, copy and paste the HTML snippet for that library (shown below) in your web page.
<script async src="https://assets.contactlab.it/contacthub/sdk-browser/latest/contacthub.min.js"></script>
<script async src="https://assets.contactlab.it/contacthub/sdk-browser/latest/contacthub.js"></script>
<script async src="https://assets.contactlab.it/contacthub/sdk-browser/{version}/contacthub.min.js"></script>
<script async src="https://assets.contactlab.it/contacthub/sdk-browser/{version}/contacthub.js"></script>
We recommend that you load libraries from the CDN via HTTPS, even if your own website only uses HTTP
ch('config', {
workspaceId: 'w_id', // required, found in the Contacthub admin area
nodeId: 'node_id', // required, found in the Contacthub admin area
token: 'UYTF546FUTF636JH', // required, found in the Contacthub admin area
context: 'CTX', // optional, defaults to 'WEB'
contextInfo: {}, // optional, defaults to an empty object,
debug: true // optional, defaults to false
});
The JSON schemas for the contextInfo property can be found here.
If the debug property is set to true, the Contacthub SDK will log errors to the browser's console.
Include this call only if you have details about the current user (e.g. the user is logged in). All properties are optional.
The JSON schemas for all Customer properties can be found here.
ch('customer', {
externalId: '456',
base: {
firstName: 'John',
lastName: 'Smith',
contacts: {
email: 'john.smith@example.com'
}
},
consents: {
},
extended: {},
extra: '',
tags: {
auto: [],
manual: []
}
});
If you have defined a "matching policy" in your workspace (using the Contacthub web interface), and the data you're providing matches the data of an existing customer, the existing customer will be updated instead.
If you have defined required properties in your workspace (using the Contacthub web interface), and they are not present in the javascript object, the call will fail.
It's safe to call this function multiple times with the same data (e.g. in the HEAD section of all of your pages) as an encrypted hash of this data is stored in a cookie and won't be resent to the API if no value has changed.
You can also call this function the moment a user succesfully logs in, if the login action doesn't involve a page refresh.
If a user adds some personal information to his/her profile, you don't need to send his full profile again, as the new data you send will be automatically merged with the data that is already available on the Contacthub database.
// Add the mobile phone to the existing customer data
ch('customer', {
base: {
contacts: {
mobilePhone: '+393331234567'
}
}
});
Because properties are always merged, if you want to actually remove a property that was previously set on a Customer, you have to explictly assign a null value to it, for example:
ch('customer', {
base: {
contacts: {
email: 'something@example.com',
mobilePhone: null
}
}
});
If you omit the property, or set it to undefined, Contacthub will assume you want to keep the current value for that property.
If a user logs out, you might want to stop linking events to his/her session. You can call ch('customer') without the second parameter and a new Contacthub session id will be generated.
All the events from this point will be associated to the new session id and will not be linked to the previous user.
ch('event', {
type: '<eventType>', // a valid event type, e.g. 'viewedPage'
properties: {} // optional Properties object (eventType dependent)
});
Please note we will infer some standard properties automatically (url, title, referrer, path).
If you want, you can override those in your custom properties object.
Since v1.0.0 of this library, utm_ tags from Google Analytics are also automatically detected from the query string, stored in the ContactHub cookie and attached automatically to all Contacthub Events.
This script will register a global variable in your window object called ch.
This is similar for example to the ga global variable used by Google Analytics.
If for any reason you already have a global variable called ch in your website, you can ask Contacthub to use a different name.
Simply add this line before the standard Contacthub snippet:
window.ContactHubObject = 'chub';
You also have to replace all occurrences of ch in the snippet:
<script>
window.chub=function(){(chub.q=chub.q||[]).push(arguments)};
chub('config', { ... });
chub('customer', { ... });
chub('event', { ... });
</script>
<script async src='https://www.contactlab.com/contacthub.js'></script>
In the same way, you can set a custom name for the Contacthub cookie using:
window.ContactHubCookie = '__chub';
For testing or debugging purposes, you might want to use a different API server:
window.ContactHubAPI = 'https://test-api/hub/v2';
Every Customer is assigned an id in Contacthub. In general, you don't have to think about it as the library will take care of it and avoid generating multiple IDs for the same Customer.
If you store Contacthub ids on your database and you want to make sure that events sent via the library are associated to the same id, you can specify the ID when you use the ch('customer', {...}) method:
ch('customer', {
id: 'A_VALID_CONTACTHUB_ID',
// ... other customer properties
});
You can also send a Contacthub id using the clabId parameter in the query string (?clabId=A_VALID_CONTACTHUB_ID). This is transformed by the library in the following call:
ch('customer', { id: clabId });
An example use case is if you send a newsletter to your customers and you want to make sure that if they reach your website from a link contained in the email, they are immediately recognised even if they are not logged in.
Please note that if a different user is logged in, the Contacthub id for the currently logged in user is stored in the Contacthub cookie. The id contained in the Contacthub cookie always takes precedence over an id specified using the
clabId query string parameter.
npm run build will generate dist/contactlab.js and dist/contactlab.min.js.
npm test will run all tests once using Chrome in headless mode.
npm test-watch will automatically re-run tests using Chrome in headless mode on every change.
BROWSERSTACK_USER=<user> BROWSERSTACK_KEY=<key> npm run test-bs will run tests on real browsers using BrowserStack. The list of browsers is statically defined in package.json and karma.conf.js
npm run example will start a local HTTP server and open the example page in your local browser. Replace the placeholders in the query string with your authorization token and ids. Remember also to add http://127.0.0.1.xip.io to the allowed URLs for your Source in the Contacthub web interface (under Settings > Sources > {source name} > Settings).
FAQs
Contactlab Browser SDK
The npm package @contactlab/sdk-browser receives a total of 109 weekly downloads. As such, @contactlab/sdk-browser popularity was classified as not popular.
We found that @contactlab/sdk-browser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.