Page Comparison

Overview

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

Integration Code code for v1.1version 1.4
Integration code for version 1.3
Integration Code code for v1version 1.2
Integration Code code for v1version 1.31

Step-by-step guide

Anchor

...

1.4
1

...

.

...

4
Integration code for

...

version 1.

...

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

EmpathyOverlay Container

Code Block
<div id="eb-root" class="eb-root" ng-jq="jQueryEB"></div>

STAGING environment resources import

...

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.

Code Block

language	xml
title	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/overlayclients/{VERSIONCLIENT_NAME}/css/eb.custom.resourcesmin.css" type="text/css" //>

<!-- Place as close as possible to the end of the body for optimal site performance -->
<script src="https://preassets.empathybroker.com/overlay/{VERSION}1.4/js/eb.libsbase.js" type="text/javascript" />
></script>
<script src="https://preassets.empathybroker.com/overlayclients/{VERSIONCLIENT_NAME}/js/eb.resourcescustom.js" type="text/javascript"/>
 
  
<script type="text/javascript">
    ></script>
<script>
	EmpathyOverlay.config('https://{EB_URL}/{
		endpoints: {
			instance: '{EB_INSTANCE_NAME}',
{
        lang: 'en',
        displayLang: 'en',
        defaultCurrency: 'EUR',
        scope: 'default',
        pageRows: 12
    }, document.getElementById('eb-root'));
</script>

LIVE environment resources import

code

			env: 'staging'
		},
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'USD',
		scope: 'desktop',
		debug: true
	});
</script>

Code Block

language	xml
title	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.

Anchor
1.3
1.3
Integration code for version 1.3

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

Code Block

title	Staging Integration Snippet

<link href="https://assetspreassets.empathybroker.com/overlay/{VERSION}1.3/css/eb.resources.min.css" type="text/css" />
<script src="https://assetspreassets.empathybroker.com/overlay/{VERSION}1.3/js/eb.libs.min.js" type="text/javascript" />
<script src="https://assetspreassets.empathybroker.com/overlay/{VERSION}1.3/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'))20
	});
</script>

...

Note : It would not be necessary to add ng-jq="jQueryEB" if : If you have jQuery in your page. You , you must use this version of libs:

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

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

Anchor

...

1.2

...

1.2
Integration code for

...

version 1.2

...

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

Code Block

title	STAGING environment resources importStaging 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>

Code Block

title	LIVE environment resources importLive 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>

...

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

Anchor

...

1.

...

1

...

1.

...

1
Integration code for

...

version 1.

...

1

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

Code Block

STAGING environment resources import

title		EmpathyOverlay Container

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

Code Block

title	Staging Integration Snippet

<link href="https://preassets.empathybroker.com/overlay/1.3{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/1.3/{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>

Code Block

title	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://preassetsassets.empathybroker.com/overlay/1.3{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: 20
	})
        pageRows: 12
    }, document.getElementById('eb-root'));
</script>

Note : If 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 .

You must use this version of libs:

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

Versions Compared

Old Version 3

New Version 4

Key

Overview

Step-by-step guide

Anchor

1.4
1

.

4
Integration code for

version 1.

4

Anchor
1.3
1.3
Integration code for version 1.3

Anchor

1.2

1.2
Integration code for

version 1.2

Anchor

1.

1

1.

1
Integration code for

version 1.

1

Related articles

Page Comparison

Versions Compared

Old Version 3

New Version 4

Key

Step-by-step guide

Anchor

1.41

.

4Integration code for

version 1.

4

Anchor1.31.3Integration code for version 1.3

Anchor

1.2

1.2Integration code for

version 1.2

Anchor

1.

1

1.

1Integration code for

version 1.

1

Related articles

1.4
1

4
Integration code for

Anchor
1.3
1.3
Integration code for version 1.3

1.2
Integration code for

1
Integration code for