Installation via GTM

This code contains customized css and js for the cognigy bot.

Snippet to be inserted into GTM

// UNPKG hosted version of webchat
<script src="https://unpkg.com/@revium/[email protected]/dist/webchat.js"></script>
// Additional styles
<style>
  [data-cognigy-webchat-root] .webchat-typing-indicator > div {
    position: relative;
    bottom: 17px;
  }
  [data-cognigy-webchat-root] .webchat-quick-reply-template-reply {
    border-radius:0;
  }
  [data-cognigy-webchat-root] div {
    font-family: MINI-Sans-Regular;
    font-weight: 400;
  }
  [data-cognigy-webchat-root] .webchat-header-title {
    font-family:MINI-Serif-Bold;    
  }
  [data-cognigy-webchat-root] .webchat-avatar.agent {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAANKADAAQAAAABAAAANAAAAAB+d885AAAK30lEQVRoBa2aR4tWSxCGa8acc05jBhVzWIjZhQHErAsRRAQRXPgLvAquRER/gAgiiAoqBlyoICqKOWLOOeec7jyF70fPmZO+ey0401+HU11vV3VV9ekp6dSp02/7i/T7d3HsSkpK/uLsZlX/BjeBQLgqVapY1apVrXr16latWjWvl5aWGmN4fvz4Yd+/f/eH379+/fJ25Pgb4P4XIARECISvVauWNW3a1Fq2bGnNmze31q1bW7Nmzax+/frej8Dfvn2zd+/e2bNnz+zhw4dePn782F6+fGlfvnxxsOLJ+P9CRQNiQohVr127tjVp0sS6du1qffr0sZ49e1rHjh0dEH1pBACA3bp1y86fP29nz561q1ev2uvXr+3r169pr6b2lfyXPVSjRg3XQN++fW3MmDFG2aJFCweZOltKJ+DOnDlje/futVOnTtnz589do8VqrChA7I1GjRpZv379bMKECTZ8+HBr0KBBipjFd3348MEOHjxo27dvt9OnT7uJss/yUm5A7JEOHTrYuHHjbOrUqdamTZtcc2BaDx48cOdQr149XwCcRRY9efLEtmzZYjt27LD79+/7/sp6h/5cgOrUqeNmNXv2bDcxTC6OPn/+bG/fvrX379/7Rr979659/PjRbt68acePHy/subKyMps+fbq1a9fOAJlEP3/+tH379tm6det8n+FUsigVEB6MCQcNGmQLFy60/v37x/J78+aN7dq1ywXes2ePXbp0yYEBEBeNqUKUmA98y/euO5NRo0bZ0KFDfU/GMi9vhN/KlSvt5MmTBs80qlK+J/5JGoBmhgwZYosWLfJ9kzRu27ZttnbtWl/N69evu/dCM3grAFHyIAyrTPzBCdy4ccNu377tJoVT4YkjwkC3bt18LKaI5pIoERB7hs2/ePHiVDDEkFWrVtnly5cNTQEkDJwIjwB6qCug0oY3w11jko0bNzbMURoNhSamAerKlSu+GEmOIhYQDDGJefPmuScLGUd/b9682Tcv3kmrj6DKACj14ILDR2NoYzHQLlbRvXt3dyLR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') 
  }
</style>
// Init
<script>
  var kvs;
  if (typeof window.location.hash === 'string' && window.location.hash.includes("=")) {
    kvs = "|" + window.location.hash.substr(1);
  } else {
    kvs = "";
  }
 
  var sessionId;
  if (window.localStorage) {
    // try to load a previously stored sessionId from the LocalStorage
    sessionId = window.localStorage.getItem("SESSIONID");

    // in case there was no previously stored sessionId,
    // generate one and store it into LocalStorage
    if (!sessionId) {
      sessionId = "session-" + Date.now() * Math.random();
      localStorage.setItem("SESSIONID", sessionId);
    }
  }
  initWebchat(
    "https://endpoint-au-02.cognigy.ai/e0dacf21094758e0fdd2fe0c340d61883f93308f4960840bb67a4273817135a9",
    {
      channel: "webchat",
      sessionId: sessionId,
      forceWebsockets: true,
      settings: {
        getStartedPayload: 'cIntent:_START_'+kvs,
        getStartedText: '',
        disableBranding: true
      }
    }
  );
</script>

To test on any site

• Open dev tools
• Click on console
• Copy and paste the following into the console
• Hit enter

var tag = document.createElement('script');
tag.src = 'https://unpkg.com/@revium/[email protected]/dist/webchat.js';
tag.type = 'text/javascript';
tag.async = 'true';
var applyTag = document.getElementsByTagName('script')[0];
applyTag.parentNode.insertBefore(tag, applyTag);

var css = `
[data-cognigy-webchat-root] .webchat-quick-reply-template-reply {
    border-radius:0;
  }
  [data-cognigy-webchat-root] div {
    font-family: MINI-Sans-Regular;
    font-weight: 400;
  }
  [data-cognigy-webchat-root] .webchat-header-title {
    font-family:MINI-Serif-Bold;    
  }
  [data-cognigy-webchat-root] .webchat-avatar.agent {
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAYAAADFeBvrAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAANKADAAQAAAABAAAANAAAAAB+d885AAAK30lEQVRoBa2aR4tWSxCGa8acc05jBhVzWIjZhQHErAsRRAQRXPgLvAquRER/gAgiiAoqBlyoICqKOWLOOeec7jyF70fPmZO+ey0401+HU11vV3VV9ekp6dSp02/7i/T7d3HsSkpK/uLsZlX/BjeBQLgqVapY1apVrXr16latWjWvl5aWGmN4fvz4Yd+/f/eH379+/fJ25Pgb4P4XIARECISvVauWNW3a1Fq2bGnNmze31q1bW7Nmzax+/frej8Dfvn2zd+/e2bNnz+zhw4dePn782F6+fGlfvnxxsOLJ+P9CRQNiQohVr127tjVp0sS6du1qffr0sZ49e1rHjh0dEH1pBACA3bp1y86fP29nz561q1ev2uvXr+3r169pr6b2lfyXPVSjRg3XQN++fW3MmDFG2aJFCweZOltKJ+DOnDlje/futVOnTtnz589do8VqrChA7I1GjRpZv379bMKECTZ8+HBr0KBBipjFd3348MEOHjxo27dvt9OnT7uJss/yUm5A7JEOHTrYuHHjbOrUqdamTZtcc2BaDx48cOdQr149XwCcRRY9efLEtmzZYjt27LD79+/7/sp6h/5cgOrUqeNmNXv2bDcxTC6OPn/+bG/fvrX379/7Rr979659/PjRbt68acePHy/subKyMps+fbq1a9fOAJlEP3/+tH379tm6det8n+FUsigVEB6MCQcNGmQLFy60/v37x/J78+aN7dq1ywXes2ePXbp0yYEBEBeNqUKUmA98y/euO5NRo0bZ0KFDfU/GMi9vhN/KlSvt5MmTBs80qlK+J/5JGoBmhgwZYosWLfJ9kzRu27ZttnbtWl/N69evu/dCM3grAFHyIAyrTPzBCdy4ccNu377tJoVT4YkjwkC3bt18LKaI5pIoERB7hs2/ePHiVDDEkFWrVtnly5cNTQEkDJwIjwB6qCug0oY3w11jko0bNzbMURoNhSamAerKlSu+GEmOIhYQDDGJefPmuScLGUd/b9682Tcv3kmrj6DKACj14ILDR2NoYzHQLlbRvXt3dyLR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') 
  }
`,
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';

setTimeout(() => {  
  style.appendChild(document.createTextNode(css));
  document.body.appendChild(style);

  var kvs;
  if (typeof window.location.hash === 'string' && window.location.hash.includes("=")) {
    kvs = "|" + window.location.hash.substr(1);
  } else {
    kvs = "";
  }
 
  var sessionId;
  if (window.localStorage) {
    // try to load a previously stored sessionId from the LocalStorage
    sessionId = window.localStorage.getItem("SESSIONID");

    // in case there was no previously stored sessionId,
    // generate one and store it into LocalStorage
    if (!sessionId) {
      sessionId = "session-" + Date.now() * Math.random();
      localStorage.setItem("SESSIONID", sessionId);
    }
  }
  initWebchat(
    "https://endpoint-au-02.cognigy.ai/e0dacf21094758e0fdd2fe0c340d61883f93308f4960840bb67a4273817135a9",
    {
      channel: "webchat",
      sessionId: sessionId,
      forceWebsockets: true,
      settings: {
        getStartedPayload: 'cIntent:_START_'+kvs,
        getStartedText: '',
        disableBranding: true
      }
    }
  );
}, 2000)

Why copy the github repo?

This repo is a fork of https://github.com/Cognigy/WebchatWidget and has been done so that we can publish the dist files to unpkg. Right now cognigy does not provide the JS via a cdn so this repo has been built and distrbutes the files via npm, it can be found in the name space @revium/webchat and accessed via unpkg at https://unpkg.com/@revium/[email protected]/dist/webchat.js