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>