Install Code
Technical Steps for Seamless Userback Deployment
We offer multiple methods to fit various development environments and project requirements.
Prerequisites
- Userback Workspace 14-Day Free Userback Trial
- Project-specific Widget Access Token
Method 1: JavaScript Snippet
- Retrieve: Access your JavaScript snippet from the Userback dashboard
- Insert: Place it before the closing
</body>
tag in your HTML.
<script>
window.Userback = window.Userback || {};
Userback.access_token = '**Widget Access Token**';
// identify your logged-in users (optional)
Userback.user_data = {
id: "123456", // example data
info: {
name: "someone", // example data
email: "[email protected]" // example data
}
};
(function(d) {
var s = d.createElement('script');s.async = true;
s.src = 'https://static.userback.io/widget/v1.js';
(d.head || d.body).appendChild(s);
})(document);
</script>
- Plug & Play: Ideal for static websites or web apps.
- Limitations: Asynchronous load of the script can miss capturing early console logs and errors.
Method 2: Script Tag
- Embed: Insert the script as early as possible in the
<head>
of your HTML. - Initialize: Initialize with
Userback.init()
.
<head>
<script src="https://static.userback.io/widget/v1.js"></script>
</head>
<body>
<script>
Userback.init('**Widget Access Token**', {
user_data: {
id: "123456", // example data
info: {
name: "someone", // example data
email: "[email protected]" // example data
}
}
});
</script>
</body>
Userback.init("your_widget_access_token");
- Console Log Synchronization: Captures all console logs and errors.
Method 3: Using NPM
- Package Installation: Utilize your package manager of choice.
npm i @userback/widget
npm i @userback/react
# or
yarn add @userback/react
npm i @userback/vue
# or
yarn add @userback/vue
- Initialize as soon as possible during your page load:
import Userback from '@userback/widget';
Userback('**Widget Access Token**').then((ub) => {
// identify your logged-in users (optional)
ub.identify("123456", { // example data
name: "someone", // example data
email: "[email protected]" // example data
});
});
npm i @userback/react
# or
yarn add @userback/react
npm i @userback/vue
# or
yarn add @userback/vue
If you need help at any point, send a message to our support team.
Updated 8 months ago
What’s Next