Overlay Integration Code

Owned by David Argüello Sánchez
Last updated: Feb 14, 2019 by Noelia Vigil Suárez
2 min read

Overview

This page contains a guide to integrate the Overlay on your site.

Note: if the version is not in the list, you probably are using or a new one or a deprecated one. Please, contact EB Team.

Step-by-step guide

Integration code for version 1.4

The client side integration for the Overlay consists in inserting and configuring a little code snippet in all pages where the search box is present. Ideally, CSS resources should be placed at the end of the head, and scripts should be placed as close as possible to the end of the body for optimal site performance.

Staging Integration Snippet
<!-- Place at the end of the head -->
<link rel="stylesheet" href="https://preassets.empathybroker.com/overlay/1.4/css/eb.base.min.css" />
<link rel="stylesheet" href="https://preassets.empathybroker.com/clients/{CLIENT_NAME}/css/eb.custom.min.css" />

<!-- Place as close as possible to the end of the body for optimal site performance -->
<script src="https://preassets.empathybroker.com/overlay/1.4/js/eb.base.js"></script>
<script src="https://preassets.empathybroker.com/clients/{CLIENT_NAME}/js/eb.custom.js"></script>
<script>
	EmpathyOverlay.config({
		endpoints: {
			instance: '{EB_INSTANCE_NAME}',
			env: 'staging'
		},
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'USD',
		scope: 'desktop',
		debug: true
	});
</script>


Live Integration Snippet
<!-- Place at the end of the head -->
<link rel="stylesheet" href="https://assets.empathybroker.com/overlay/1.4/css/eb.base.min.css" />
<link rel="stylesheet" href="https://assets.empathybroker.com/clients/{CLIENT_NAME}/css/eb.custom.min.css" />

<!-- Place as close as possible to the end of the body for optimal site performance -->
<script src="https://assets.empathybroker.com/overlay/1.4/js/eb.base.min.js"></script>
<script src="https://assets.empathybroker.com/clients/{CLIENT_NAME}/js/eb.custom.min.js"></script>
<script>
	EmpathyOverlay.config({
		endpoints: {
			instance: '{EB_INSTANCE_NAME}',
		},
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'USD',
		scope: 'desktop'
	});
</script>

Note: The EmpathyOverlay.config object accepts a few more parameters that you can check on this page.

Integration code for version 1.3

This piece of code should be inserted at the bottom of the page.

Staging Integration Snippet
<link href="https://preassets.empathybroker.com/overlay/1.3/css/eb.resources.css" type="text/css" />
<script src="https://preassets.empathybroker.com/overlay/1.3/js/eb.libs.js" type="text/javascript" />
<script src="https://preassets.empathybroker.com/overlay/1.3/js/eb.resources.js" type="text/javascript"/>
 
<script type="text/javascript">
	EmpathyOverlay.config('https://{EB_URL}/{EB_INSTANCE_NAME}', {
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'EUR',
		scope: 'default',
		pageRows: 20
	});
</script>

Note: If you have jQuery in your page, you must use this version of libs:  

STAGING: https://preassets.empathybroker.com/overlay/1.3/js/eb.libs.nojq.js

LIVE: https://assets.empathybroker.com/overlay/1.3/js/eb.libs.nojq.min.js

Integration code for version 1.2

This piece of code should be inserted at the bottom of the page.

Staging Integration Snippet
<link href="https://preassets.empathybroker.com/overlay/1.2/css/eb.resources.css" type="text/css"/>
<script src="https://preassets.empathybroker.com/overlay/1.2/js/eb.libs.js" type="text/javascript"/>
<script src="https://preassets.empathybroker.com/overlay/1.2/js/eb.resources.js" type="text/javascript"/>

<script type="text/javascript">
	EmpathyOverlay.config('https://{EB_URL}/{EB_INSTANCE_NAME}', {
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'EUR',
		scope: 'default',
		pageRows: 12
	}, document.getElementById('eb-root'));
</script>


Live Integration Snippet
<link href="https://assets.empathybroker.com/overlay/1.2/css/eb.resources.min.css" type="text/css" />
<script src="https://assets.empathybroker.com/overlay/1.2/js/eb.libs.min.js" type="text/javascript"/>
<script src="https://assets.empathybroker.com/overlay/1.2/js/eb.resources.min.js" type="text/javascript"/>
 
<script type="text/javascript">
	EmpathyOverlay.config('https://{EB_URL}/{EB_INSTANCE_NAME}', {
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'EUR',
		scope: 'default',
		pageRows: 12
	}, document.getElementById('eb-root'));
</script>

Make sure you are using https://assets.empathybroker.com  in your LIVE environment.

Note : If you have jQuery in your page, you must use this version of libs: 

STAGING: https://preassets.empathybroker.com/overlay/1.2/js/eb.libs.nojq.js

LIVE: https://assets.empathybroker.com/overlay/1.2/js/eb.libs.nojq.min.js

Integration code for version 1.1

This piece of code should be inserted at the bottom of the page.

EmpathyOverlay Container
<div id="eb-root" class="eb-root" ng-jq="jQueryEB"></div>


Staging Integration Snippet
<link href="https://preassets.empathybroker.com/overlay/{VERSION}/css/eb.resources.css" type="text/css"/>
<script src="https://preassets.empathybroker.com/overlay/{VERSION}/js/eb.libs.js" type="text/javascript"/>
<script src="https://preassets.empathybroker.com/overlay/{VERSION}/js/eb.resources.js" type="text/javascript"/>
 
<script type="text/javascript">
    EmpathyOverlay.config('https://{EB_URL}/{EB_INSTANCE_NAME}', {
        lang: 'en',
        displayLang: 'en',
        defaultCurrency: 'EUR',
        scope: 'default',
        pageRows: 12
    }, document.getElementById('eb-root'));
</script>


Live Integration Snippet
<link href="https://assets.empathybroker.com/overlay/{VERSION}/css/eb.resources.min.css" type="text/css"/>
<script src="https://assets.empathybroker.com/overlay/{VERSION}/js/eb.libs.min.js" type="text/javascript"/>
<script src="https://assets.empathybroker.com/overlay/{VERSION}/js/eb.resources.min.js" type="text/javascript"/>
  
<script type="text/javascript">
    EmpathyOverlay.config('https://{EB_URL}/{EB_INSTANCE_NAME}', {
        lang: 'en',
        displayLang: 'en',
        defaultCurrency: 'EUR',
        scope: 'default',
        pageRows: 12
    }, document.getElementById('eb-root'));
</script>

Make sure you are using https://assets.empathybroker.com  in your LIVE environment.

Note: It would not be necessary to add ng-jq="jQueryEB" if you have jQuery in your page.  

You must use this version of libs: 

https://preassets.empathybroker.com/overlay/{VERSION}/js/eb.libs.nojq.js / https://assets.empathybroker.com/overlay/{VERSION}/js/eb.libs.nojq.min.js