Shopify Website Integration
How to integrate WebSDK in Shopify Website?
Process of integrating WebSDK in Shopify Website is very simple.
Copy paste the script at the bottom inside theme.liquid file.
1
<script>
2
const nector = {
3
style: {
4
btn: {
5
desktop: {}, // support props: top, bottom, left, right
6
mobile: {} // support props: top, bottom, left, right
7
},
8
popup: {
9
desktop: {} // support props: top, bottom, left, right
10
}
11
}
12
};
13
14
nector.api_key = "yourapikey"; // paste your api key here
15
nector.identifier = "shopify";
16
{% if customer %}
17
nector.business_customer_id = "{{customer.id}}";
18
{% endif %}
19
// nector.style.btn.desktop.bottom = "28px";
20
// nector.style.btn.desktop.left = "28px";
21
// nector.style.btn.mobile.bottom = "50px";
22
// nector.style.btn.mobile.left = "50px";
23
// nector.style.popup.desktop.bottom = "155px";
24
// nector.style.popup.desktop.left = "30px";
25
// nector.style.popup.desktop.left = "unset";
26
// renders the widgets
27
const randomString = "wSVNjD";
28
let elementId = `nector-rewards-widget-${randomString}`;
29
let rootElement = document.getElementById(elementId);
30
if (!rootElement) {
31
let newNectorElement = document.createElement("div");
32
newNectorElement.id = elementId;
33
document.body.appendChild(newNectorElement);
34
newNectorElement.style.zIndex = 100;
35
} else {
36
rootElement.style.zIndex = 100;
37
}
38
</script>
39
<script src="https://cdn.nector.io/nector-websdk-widget/main.min.js"></script>
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