.elementor-1335 .elementor-element.elementor-element-9b86377{--display:flex;--margin-top:201px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:80px;--padding-left:80px;--padding-right:80px;}.elementor-1335 .elementor-element.elementor-element-e836eae{--display:flex;--border-radius:30px 30px 30px 30px;box-shadow:-6px 5px 5px -4px rgba(0,0,0,0.5);--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1335 .elementor-element.elementor-element-e836eae:not(.elementor-motion-effects-element-type-background), .elementor-1335 .elementor-element.elementor-element-e836eae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#CECECE;}.elementor-1335 .elementor-element.elementor-element-f63d53a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1335 .elementor-element.elementor-element-26e37cd > .elementor-widget-container{padding:0px 12px 0px 12px;}.elementor-1335 .elementor-element.elementor-element-370e0cd > .elementor-widget-container{padding:0px 12px 0px 12px;}.elementor-1335 .elementor-element.elementor-element-3adf939 > .elementor-widget-container{padding:0px 12px 0px 12px;}.elementor-1335 .elementor-element.elementor-element-c7f5b42{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--border-radius:0px 0px 30px 30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1335 .elementor-element.elementor-element-c7f5b42:not(.elementor-motion-effects-element-type-background), .elementor-1335 .elementor-element.elementor-element-c7f5b42 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#B1B1B1;}.elementor-1335 .elementor-element.elementor-element-fc7afff > .elementor-widget-container{padding:0px 12px 0px 12px;}.elementor-1335 .elementor-element.elementor-element-3967346 > .elementor-widget-container{padding:0px 12px 0px 12px;}.elementor-1335 .elementor-element.elementor-element-0fd41b5{--display:flex;}@media(max-width:1024px){.elementor-1335 .elementor-element.elementor-element-9b86377{--padding-top:0px;--padding-bottom:80px;--padding-left:24px;--padding-right:24px;}.elementor-1335 .elementor-element.elementor-element-e836eae{--border-radius:10px 10px 10px 10px;--padding-top:80px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1335 .elementor-element.elementor-element-f63d53a{--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:12px;--padding-right:12px;}.elementor-1335 .elementor-element.elementor-element-26e37cd{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-1335 .elementor-element.elementor-element-26e37cd > .elementor-widget-container{padding:0px 12px 0px 12px;}.elementor-1335 .elementor-element.elementor-element-370e0cd{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-1335 .elementor-element.elementor-element-3adf939{width:var( --container-widget-width, 47% );max-width:47%;--container-widget-width:47%;--container-widget-flex-grow:0;}.elementor-1335 .elementor-element.elementor-element-c7f5b42{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--border-radius:0px 0px 10px 10px;}}@media(max-width:767px){.elementor-1335 .elementor-element.elementor-element-9b86377{--margin-top:196px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:12px;--padding-left:12px;--padding-right:12px;}.elementor-1335 .elementor-element.elementor-element-f63d53a{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1335 .elementor-element.elementor-element-26e37cd{width:100%;max-width:100%;}.elementor-1335 .elementor-element.elementor-element-370e0cd{width:100%;max-width:100%;}.elementor-1335 .elementor-element.elementor-element-3adf939{width:100%;max-width:100%;}.elementor-1335 .elementor-element.elementor-element-fc7afff{font-size:13px;}.elementor-1335 .elementor-element.elementor-element-3967346{font-size:13px;}}/* Start custom CSS */<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Chatbot Iterup</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link href="https://iterupstorage.blob.core.windows.net/avatar/CSS/botchat.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.botframework.com/botframework-webchat/latest/CognitiveServices.js"></script>
  <script src="https://cdn.botframework.com/botframework-webchat/master/botchat.js"></script>
  <div id="interup-bot"></div>
  <style>
    #interup-mychat {
        margin: 10px;
        position: fixed;
        bottom: 0%;
        right: 0%;
        z-index: 1000000;
        cursor: pointer;
    }
  </style>
  <style>
    .interup-container {
        display: inline-block;
        z-index: 1000000;
    }
  </style>
</head>
<body>
  <div id="interup-container">
    <img id="interup-mychat" src="https://iterupstorage.blob.core.windows.net/avatar/109-Arquivos/109_1_Site.gif" />
  </div>

  <script>
    $(function() {
      $.ajax({
        url: 'https://iterupstorage.blob.core.windows.net/avatar/109-Arquivos/109_1.txt',
        dataType: 'jsonp',
        jsonpCallback: 'dataCallback',
        success: function(response) 
        {
          const token = response.Token;
          const div = document.createElement('div');
          
          function guid() {
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                s4() + '-' + s4() + s4() + s4();
          }
          
          function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
            }
            const user = {
                id: guid().toUpperCase(),
                name: 'User-' + Math.floor((1 + Math.random()) * 10000)
            };
            
            document.getElementsByTagName('body')[0].appendChild(div);
            div.outerHTML = "<div id='interup-botDiv' style='width: 600px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;'><div  id='interup-botTitleBar' style='height: 40px; width: 600px; position:fixed;'></div></div>";
            
            const botConnection = new BotChat.DirectLine({
              token: token,
              user: user,
              webSocket: 'true'
            });
        
            BotChat.App({
                botConnection: botConnection,            
                user: user,
                bot: { id: 'botid', name: 'bot name' },
                resize: 'detect'
            },
            document.getElementById("interup-botDiv"));
            
            document.getElementsByClassName("wc-header")[0].setAttribute("id", "interup-chatbotheader");
            document.getElementsByClassName("wc-header")[0].innerHTML = "<span>Posso ajudar?</span>";
            document.getElementsByClassName("wc-header")[0].innerHTML += "<button type='button' onclick='interupDoClose()' style='top: 20%; right:2%; position:absolute; color: #FFFFFF; cursor: pointer;border: none'>X</button>";
            document.getElementById("interup-mychat").addEventListener("click", function (e) {
            document.getElementById("interup-botDiv").style.height = '73%';
            document.getElementById("interup-botDiv").style.width = '415px';
            document.getElementById("interup-botDiv").style.minWidth = "415px";
            e.target.style.display = "none";
            
             botConnection
                .postActivity({
                    from: user,
                    name: 'setUserIdEvent',
                    type: 'event',
                    value: 'setUserIdEvent'
                })
                .subscribe(function (id) {
                    console.log('"trigger setUserIdEvent" sent');
                });
            })
          
        },
        error: function() {
          console.log('Não foi possível buscar o token.');
        }
      });
    });

    function dataCallback(data) {
      return data;
    }
  </script>
  <script>
    function interupDoClose() {
        var botDiv = document.querySelector('#interup-botDiv');
        botDiv.style.height = "0px";
        document.getElementById("interup-mychat").style.display = "inline";
    }
  </script>
  <script type="text/javascript">
    var cor = "";
    var styleElem = document.head.appendChild(document.createElement("style"));
    styleElem.innerHTML = ".wc-message.wc-message-from-bot:after {background: url('https://iterupstorage.blob.core.windows.net/avatar/109-Arquivos/109_1.png') no-repeat 0 0}";

    function dataCallback(data) {
        cor = data.Cor;
        jQuery('.wc-header').css("background-color", cor);
    }
  </script>
  <script type="text/javascript" src="https://iterupstorage.blob.core.windows.net/avatar/109-Arquivos/109_1.txt"></script>
</body>
</html>/* End custom CSS */