Aller au contenu principal

Script LiveChat

Implémentation de la fenêtre de chat eKonsilio​

Afin de pouvoir ajouter la fenêtre de chat eKonsilio sur votre site, vous devrez implémenter le script fournis.

Voici un exemple :

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

Afin d'éviter tout impact sur le chargement de votre site web, celui-ci doit être ajouté à la fin de votre code HTML. Au plus proche de la balise fermante "body".

Content Security Policy​

Si vos serveurs sont configuré avec le header Content-Security-Policy, vous devez ajouter dans vos directives le domaine des services eKonsilio.

Les directives à configurer pour le bon fonctionnement des services d'eKonsilio sont les suivantes :

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

Les directives script-src, style-src, img-src doivent contenir la valeur *.ekonsilio.io

La directive connect-src doit contenir *.ekonsilio.io *.simplelocalize.io wss://*.ekonsilio.io

Voici un exemple de configuration permettant de faire fonctionner les services eKonsilio :

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

Ce qu'il faut faire et ne pas faire​

Ce qu'il faut faire

Ici le script est ajouté au plus proche de la balise fermante "body", ce sera le dernier élément chargé et donc ne bloquera pas le chargement de votre 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>Mon site web</title>
</head>
<body>
    <h1>Votre site web</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <!-- ... -->
    <!-- Le reste de votre site web -->
    <!-- ... -->

    <script src="https://livechat.ekonsilio.io/{ID}.js" async="" crossorigin="anonymous"></script>
</body>
</html>
Ce qu'il ne faut pas faire

Il ne faut pas utiliser Google Tag Manager pour ajouter le script de la fenêtre de chat.

Ce qu'il ne faut pas faire

Il ne faut surtout pas ajouter le script eKonsilio dans la balise "head" de votre 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>Mon site web</title>
    <script src="https://livechat.ekonsilio.io/{ID}.js" async="" crossorigin="anonymous"></script>
</head>
<body>
<h1>Votre site web</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<!-- ... -->
<!-- Le reste de votre site web -->
<!-- ... -->
</body>
</html>
Ce qu'il ne faut pas faire

Il ne faut pas enregistrer le script eKonsilio sur votre serveur, mais toujours utiliser le script que nous vous avons fournis. Cela aura pour effet de ne pas permettre à votre site de profiter des mises à jour de la fenêtre de chat.

<!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>Mon site web</title>
</head>
<body>
<h1>Votre site web</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<!-- ... -->
<!-- Le reste de votre site web -->
<!-- ... -->
<script src="https://mon-site-web.com/js/ekonsilio.js" async="" crossorigin="anonymous"></script>
</body>
</html>
Ce qu'il ne faut pas faire

Il ne faut pas copier le contenu du script eKonsilio dans votre page web. Cela aura pour effet de ne pas permettre à votre site de profiter des mises à jour de la fenêtre de chat.

<!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>Mon site web</title>
</head>
<body>
    <h1>Votre site web</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

    <!-- ... -->
    <!-- Le reste de votre site web -->
    <!-- ... -->
    <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>