Skip to main content

Script LiveChat

Implementing the eKonsilio chat window​

In order to add the eKonsilio chat window to your site, you will need to implement the script provided.

Here is an example script :

<script src="https://livechat.ekonsilio.io/{ID}.js" async="" crossorigin="anonymous"></script>

To avoid any impact on the loading of your website, this should be added at the end of your HTML code. As close as possible to the ‘body’ closing tag.

Content Security Policy​

If your servers are configured with the Content-Security-Policy header, you must add the eKonsilio services domain to your directives.

To ensure that eKonsilio’s services function properly, the following guidelines must be configured:

  • script-src
  • style-src
  • img-src
  • connect-src

The script-src, style-src, img-src directives must contain the value *.ekonsilio.io

The connect-src directive must contain *.ekonsilio.io *.simplelocalize.io wss://*.ekonsilio.io

Here is an example of how to configure the eKonsilio services:

default-src 'self';
script-src 'self' 'unsafe-inline' *.ekonsilio.io;
style-src 'self' 'unsafe-inline' *.ekonsilio.io;
img-src 'self' data: *.ekonsilio.io;
connect-src 'self' *.ekonsilio.io *.simplelocalize.io wss://*.ekonsilio.io

What you must and must not do​

What you need to do

Here the script needs to be added as close as possible to the ‘body’ closing tag, so it will be the last element loaded and will not block the loading of your site.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>My website</title>
</head>
<body>
    <h1>Your website</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <!-- ... -->
    <!-- The rest of your website -->
    <!-- ... -->

    <script src="https://livechat.ekonsilio.io/{ID}.js" async="" crossorigin="anonymous"></script>
</body>
</html>
What not to do

Do not use Google Tag Manager to add the chat window script.

What not to do

Do not add the eKonsilio script to the ‘head’ tag of your page.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>My website</title>
    <script src="https://livechat.ekonsilio.io/{ID}.js" async="" crossorigin="anonymous"></script>
</head>
<body>
<h1>Your website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<!-- ... -->
<!-- The rest of your website -->
<!-- ... -->
</body>
</html>
What you must not do

You should not register the eKonsilio script on your server, but always use the script we have provided. This will prevent your site from benefiting from the chat window updates.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>My website</title>
</head>
<body>
<h1>Your website</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<!-- ... -->
<!-- The rest of your website -->
<!-- ... -->
<script src="https://mon-site-web.com/js/ekonsilio.js" async="" crossorigin="anonymous"></script>
</body>
</html>
What you must not do

Do not copy the content of the eKonsilio script into your web page. This will prevent your site from benefiting from updates to the chat window.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>My website</title>
</head>
<body>
    <h1>Your website</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <!-- ... -->
    <!-- The rest of your website -->
    <!-- ... -->
    <script>
        const c=".ek-chat{display:none}@media (max-width:768px){.ek-noScroll{overflow:hidden}}";window.eK={integration:"__",entity:"__",initializing:!1,resetInitializing:()=>{setTimeout(()=>{eK.initializing=!1},1e3)},initLocationChangeEvent:()=>{const n=history.pushState,o=(history.pushState=function(){var t=n.apply(this,arguments);}
        /* ... */
    </script>
</body>
</html>