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.
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.
<!-- 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> |
<!-- 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.
This piece of code should be inserted at the bottom of the page.
<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
This piece of code should be inserted at the bottom of the page.
<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> |
<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
This piece of code should be inserted at the bottom of the page.
<div id="eb-root" class="eb-root" ng-jq="jQueryEB"></div> |
<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> |
<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
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.