WooCommerce Website Integration
How to integrate WebSDK in WooCommerce Website?
Process of integrating WebSDK in WooCommerce Website is very simple.
1
<?php
2
3
add_action('wp_footer', function () {
4
global $current_user;
5
wp_get_current_user();
6
$islogged = is_user_logged_in();
7
$useremail = $current_user->user_email;
8
$userid = $current_user->id;
9
$username = $current_user->user_login;
10
$firstname = $current_user->user_firstname;
11
$lastname = $current_user->user_lastname;
12
?>
13
<script>
14
const nector = {
15
style: {
16
btn: {
17
desktop: {}, // support props: top, bottom, left, right
18
mobile: {} // support props: top, bottom, left, right
19
},
20
popup: {
21
desktop: {} // support props: top, bottom, left, right
22
}
23
}
24
};
25
26
nector.api_key = "your_api_key"; // paste your api key here
27
nector.identifier = "woocommerce";
28
nector.business_customer_id = '<?php echo $islogged == "1" ? $userid : "" ?>'
29
// nector.style.btn.desktop.bottom = "28px";
30
// nector.style.btn.desktop.left = "28px";
31
// nector.style.btn.mobile.bottom = "50px";
32
// nector.style.btn.mobile.left = "50px";
33
// nector.style.popup.desktop.bottom = "155px";
34
// nector.style.popup.desktop.left = "30px";
35
// nector.style.popup.desktop.left = "unset";
36
// renders the widgets
37
const randomString = "wSVNjD";
38
let elementId = `nector-rewards - widget - ${ randomString }`;
39
let rootElement = document.getElementById(elementId);
40
if (!rootElement) {
41
let newNectorElement = document.createElement("div");
42
newNectorElement.id = elementId;
43
document.body.appendChild(newNectorElement);
44
newNectorElement.style.zIndex = 100;
45
} else {
46
rootElement.style.zIndex = 100;
47
}
48
</script>
49
<script src="https://cdn.nector.io/nector-websdk-widget/main.min.js"></script>
50
<?php });
Copied!
Upon successful integration a widget will be rendered at the bottom-left of the screen. Widget popup is your user's rewarding view.
Copy link