Intégration personnalisée du dialogue Prisme.ai

Vous connaissez les deux façons les plus classiques d'intégrer notre boite de dialogue, mais avec un peu de code javascript, il est possible d'imaginer tout pleins d'autres façons ludiques de présenter votre assistants à vos usager. Voici un joli exemple en image.

Parution le

25/10/2021

, par

Hadrien Lanneau

À partir du moment où vous avez la main sur le contenu de vos pages web, vous pouvez y exécuter tous les scripts que vous désirez. Il faut évidemment avoir un minimum de connaissances sur les technologies web pour arriver à ses fins. C'est pourquoi nous vous proposons ici un script prêt à être collé dans votre page pour essayer une nouvelle façon d'afficher votre assistant.

Notre objectif est d'afficher un champs de saisie dans notre site web, et lorsque l'usager cliques dedans, la boite de dialogue va apparaitre avec une joli animation par dessus votre site en plein écran.

Le principe est de créer dans le DOM de votre page web un élément HTML de type iframe. Cette iframe va pointer sur notre dialogbox afin de l'y afficher en plein écran. Il ne reste plus qu'à interagir avec cette iframe pour l'afficher ou la masquer à volonté.

Voici le code javascript que vous pouvez coller dans votre page après y avoir apporté les modifications relative à votre compte :


function init(el, id) {
  let container;
  const createIframe = () => {
    container = document.createElement("div");
    container.innerHTML = `
    <iframe
    	src="https://console.prisme.ai/embed/?id=${id}&fullscreen=1"
      style="background: white; border: 0" width="100%" height="100%">
    </iframe>
    <button
    	style="position: absolute; top: 0; right: 0">
      x
     </button>
    `;
    container.style.position = "absolute";
    container.style.top = "0";
    container.style.left = "0";
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.zIndex = "999999999999";
    container.style.transform = "scale3d(0,0,0)";
    container.style.transition = "transform .2s ease-in";
    document.body.appendChild(container);

    container.querySelector("button").addEventListener("click", () => {
      container.style.transform = "scale3d(0,0,0)";
    });
  };
  const onMouseEnter = () => {
    el.removeEventListener("mouseenter", onMouseEnter);
    createIframe();
  };
  el.addEventListener("mouseenter", onMouseEnter);
  el.addEventListener(
    "click",
    () => (container.style.transform = "scale3d(1,1,1)")
  );
}

init(document.querySelector("référence de votre élément"), "id de votre bot");

À la dernière ligne, vous pourrez remplacer les valeurs de `document.querySelector("référence de votre élément")` par la référence de l'élément de DOM que vous voulez utiliser pour ouvrir le dialogue, et `"id de votre bot"` par l'identifiant de votre assistant.

Et voici le résultat en image :