Javascript client

When your E-Commerce platform is not supported yet, you can use the following steps to install Belco using our Javascript client.

1. Installing the Javascript client code

Basic installation

The basic installation will add our widget to your shop, without knowledge of your customer data.

<script>
window.belcoConfig = {
  shopId: '[your-shop-id]'
};
</script>
<script>
!function(n,o){var e=window.belcoFunction||"Belco";window[e]||(window[e]=function(n){if(void 0===window[e][n])throw new Error("Unknown method");return window[e][n].apply(window[e],Array.prototype.slice.call(arguments,1))}),window[e]._q=[];for(var i=["init","sync","track","page","open","close","toggle","on","once","off","anonymousId","customer","reset","sendMessage","getConversationId"],t=function(n){return function(){var o=Array.prototype.slice.call(arguments);return o.unshift(n),window[e]._q.push(o),window[e]}},w=0;w<i.length;w++){var r=i[w];window[e][r]=t(r)}window[e].load=function(e){if(!n.getElementById("belco-js")){var i=n.createElement(o);i.async=!0,i.id="belco-js",i.type="text/javascript",i.src="//cdn.belco.io/v2/widget.js",i.onload=function(n){"function"==typeof e&&e(n)};var t=n.getElementsByTagName(o)[0];t.parentNode.insertBefore(i,t)}},window.belcoConfig&&window[e].load(function(){window[e]("init",window.belcoConfig)})}(document,"script");
</script>

Advanced installation

To connect the widget to logged in customers use the following code.

<script>
window.belcoConfig = {
  shopId: '[your-shop-id]',
  hash: '<?php echo
    hash_hmac('sha256', $customer->id, '[your-shop-secret]');
  ?>',
  id: '<?php echo $customer->id; ?>',
  email: '<?php echo $customer->email; ?>',
  firstName: '<?php echo $customer->firstName; ?>',
  lastName: '<?php echo $customer->lastName; ?>',
  phoneNumber: '<?php echo $customer->phoneNumber; ?>',
  signedUp: <?php echo strtotime($customer->signedUp); ?>
};
</script>
<script>
!function(n,o){var e=window.belcoFunction||"Belco";window[e]||(window[e]=function(n){if(void 0===window[e][n])throw new Error("Unknown method");return window[e][n].apply(window[e],Array.prototype.slice.call(arguments,1))}),window[e]._q=[];for(var i=["init","sync","track","page","open","close","toggle","on","once","off","anonymousId","customer","reset","sendMessage"],t=function(n){return function(){var o=Array.prototype.slice.call(arguments);return o.unshift(n),window[e]._q.push(o),window[e]}},w=0;w<i.length;w++){var r=i[w];window[e][r]=t(r)}window[e].load=function(e){if(!n.getElementById("belco-js")){var i=n.createElement(o);i.async=!0,i.id="belco-js",i.type="text/javascript",i.src="//cdn.belco.io/v2/widget.js",i.onload=function(n){"function"==typeof e&&e(n)};var t=n.getElementsByTagName(o)[0];t.parentNode.insertBefore(i,t)}},window.belcoConfig&&window[e].load(function(){window[e]("init",window.belcoConfig)})}(document,"script");
</script>

You can find your Shop ID and Shop secret in your shop settings, under API keys.

An ID or email address is required. If no ID is available we will use the email address internally to identify customers.

For the advanced installation we require you to send a hash of the customer id (or email address), this way we can make sure customers can't be impersonated. The hash is generated on the server using HMAC using SHA256.

Don't forget to update your privacy statement in order to comply with the GDPR.
For example:

Belco

Wij gebruiken Belco om bij te houden hoe bezoekers en klanten onze website gebruiken en om bezoekers en klanten een klantenservice via chat, telefoon en/of email aan te bieden. Hiervoor gebruiken we je naw-gegevens, factuuradres, ip-adres, telefoonnummer, e-mailadres en eventueel profielfoto. Dit doen wij op basis van je toestemming. Wij hebben een verwerkersovereenkomst met Belco gesloten. Daarin staan strikte afspraken te maken over wat zij mogen bijhouden. Belco mag de gegevens niet voor andere doeleinden gebruiken. Wij bewaren deze informatie tot << vul hier periode in >> na het laatste contactmoment en/of na het einde van de dienstverlening aan jou.
Belco

We use Belco to track how visitors and customers use our website and to offer customer service via chat, voice and/or email. For this use we your name and address, billing address, ip-address, phone number(s), email address and possibly your profile picture. We do this on basis of your consent. We have signed a processor agreement with Belco. This includes strict agreements about what data they are allowed to process. Belco may not use the data for other purposes. We store this data untill << fill in period >> after the last contact moment and/or after termination of our service agreement.

Supported fields

Field name

Type

Description

shopId

String

Your shop id

Required

hash

String

SHA256 encoded string of the customer id.

Required for secure mode

id

String/Int

ID of the customer

email

String

Email address

Required

firstName

String

First name

Optional

lastName

String

Last name

Optional

name

String

Full name

Optional

phoneNumber

String

Phone number

Optional

signedUp

Date or Unix timestamp

Sign up date of the customer

Optional

birthday

Date or Unix timestamp

Customer's Birthday

Optional

avatar

String

URL to image of the customer

Optional

orderCount

Int

Amount of orders

Optional

lastOrder

Date

Date of the last order

Optional

totalSpent

Float

Total amount spent (revenue)

Optional

country

String

Country of the user in ISO ALPHA-2 format (NL)

Optional

cart

Object

Cart contents, see below

Optional

Tracking Cart contents

By adding a cart object you can track cart contents of your visitors and existing customers in realtime.

<script>
window.belcoConfig = {
  shopId: '[your-shop-id]',
	...
  cart: {
    currency: "EUR",
    total: 10,
    items: [{
      id: 1,
      name: "Product name",
      price: 10,
      url: "http://shop.com/product/1",
      quantity: 1
    }]
  }
};
</script>

supported fields (Cart)

Field name

Type

Description

currency

String

Currency of the prices in the cart

optional

total

float

The total cost of the cart

optional

items

Array

The items in the cart

optional

items.$

Object

The item in the cart, for example Product X

optional

items.$.id

String

The id of the product X

required

items.$.name

String

The name of the product X

required

items.$.price

float

The price of the product X

optional

items.$.url

String

The url where product X can be found

optional

items.$.quantity

int

The amount of product X in the cart.

required

Custom data

Any additional fields that are added to the config will be parsed as custom data. Fields containing data other then the supported data types (String, Date, Int, Float, Boolean) will be discarded.

<script>
window.belcoConfig = {
  shopId: '[your-shop-id]',
	...
  customField: 'Custom value',
  emailsSent: 10,
  vip: true
};
</script>