{"id":13146,"date":"2024-03-25T16:12:51","date_gmt":"2024-03-25T15:12:51","guid":{"rendered":"https:\/\/ciudapolis.com\/?page_id=13146"},"modified":"2024-03-25T21:42:55","modified_gmt":"2024-03-25T20:42:55","slug":"test-bot","status":"publish","type":"page","link":"https:\/\/ciudapolis.com\/en\/test-bot\/","title":{"rendered":"test-bot"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"13146\" class=\"elementor elementor-13146\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22b75d6 e-flex e-con-boxed e-con e-parent\" data-id=\"22b75d6\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd2f06e elementor-widget elementor-widget-html\" data-id=\"bd2f06e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <div id=\"chat-container\">\n    <div id=\"chat-box\">\n      <div id=\"chat-header\">\n        Online support\n        <span id=\"chat-close\">\u00d7<\/span>\n      <\/div>\n      <div id=\"chat-messages\">\n        <div class=\"message received\">\n          <img decoding=\"async\" src=\"https:\/\/ciudapolis.com\/wp-content\/uploads\/2024\/03\/Cartoon-Style-Robot.jpg\" alt=\"Soporte\" class=\"chat-img-small\">\n          <div class=\"message-text\">Hello! What can I help you?<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div id=\"chat-button\">\n    <img decoding=\"async\" src=\"https:\/\/ciudapolis.com\/wp-content\/uploads\/2024\/03\/Cartoon-Style-Robot.jpg\" alt=\"Soporte\" id=\"chat-img\">\n    <div class=\"notification-badge\">1<\/div>\n  <\/div>\n  <style>\n  #chat-container {\n  \tz-index:99;\n    position: fixed;\n    bottom: 80px;\n    right: 0px;\n    display: none;\n    flex-direction: column;\n    z-index: 1000;\n    opacity: 0;\n    transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;\n  }\n\n  #chat-container.open {\n    display: flex;\n    opacity: 1;\n  }\n\n  #chat-box {\n    \tz-index:99;\n\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    width: 450px; \/* Ajustar el ancho del cuadro de chat *\/\n    max-width: 90%;\n    margin: 0 auto;\n    margin-bottom: 10px;\n    display: none;\n    opacity: 0;\n    transform: translateY(-10px);\n    transition: opacity 0.5s ease, transform 0.5s ease;\n  }\n  @media (max-width:500px){\n#chat-box {\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    width: 100%; \/* Ajustar el ancho del cuadro de chat *\/\n    max-width: 90%;\n    margin: 0 auto;\n    margin-bottom: 10px;\n    display: none;\n    opacity: 0;\n    transform: translateY(-10px);\n    transition: opacity 0.5s ease, transform 0.5s ease;\n  }\n        .schedule-button{\n        \tbackground:#FCB53B;\n            font-size:12px;\n        }\n      #chat-box {\n         font-size: 12px;\n          width: 340px;\n      }\n      .contact-button {\n          font-size: 12px;\n      }\n      .message-text{\n          font-size: 12px;\n      }\n      #chat-messages {\n          font-size: 12px;\n      }\n      #chat-button {\n          width: 40px;\n          height: 40px;\n      }\n      .contact-button[data-contact=\"whatsapp\"] {\n  background-color: #25d366;\n  color: #fff;\n  padding: 5px 5px;\n  font-size:12px;\n}\n\n.contact-button[data-contact=\"messenger\"] {\n  background-color: #0078ff;\n  color: #fff;\n  padding: 5px 5px;\n  font-size:12px;\n}\n\n.contact-button[data-contact=\"email\"] {\n  background-color: #ff5733;\n  color: #fff;\n  padding: 5px 5px;\n  font-size:12px;\n}\n\n.contact-button[data-contact=\"phone\"] {\n  background-color: #33cc33;\n  color: #fff;\n  padding: 5px 5px;\n  font-size:12px;\n}\n  }\n  #chat-box.open {\n    display: block;\n    opacity: 1;\n    transform: translateY(0);\n    min-height: 400px; \/* Ajustar el alto m\u00ednimo del cuadro de chat *\/\n  }\n\n  #chat-box.closed {\n    display: none;\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n\n  #chat-header {\n    background-color: #007bff;\n    color: #fff;\n    padding: 10px;\n    border-top-left-radius: 5px;\n    border-top-right-radius: 5px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  #chat-close {\n    cursor: pointer;\n  }\n\n  #chat-messages {\n      font-size:14px;\n    padding: 10px;\n    max-height: 300px; \/* Ajustar la altura m\u00e1xima del \u00e1rea de mensajes *\/\n    overflow-y: auto;\n  }\n\n  .message {\n    padding: 5px 10px;\n    border-radius: 5px;\n    margin: 5px 0;\n  }\n\n  .received {\n    background-color: #f0f0f0;\n  }\n\n  .loading {\n    background-color: #f0f0f0;\n  }\n\n  #chat-input {\n    display: flex;\n    align-items: center;\n    padding: 10px;\n  }\n\n  #message-input {\n    flex: 1;\n    padding: 5px;\n    border: 1px solid #ccc;\n    border-radius: 5px;\n  }\n\n  #send-button {\n    background-color: #007bff;\n    color: #fff;\n    border: none;\n    border-radius: 5px;\n    padding: 5px 10px;\n    cursor: pointer;\n    margin-left: 10px;\n  }\n\n  #chat-button {\n  z-index:99;\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    background-color: #007bff;\n    width: 65px;\n    height: 65px;\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);\n    transition: right 0.5s ease-in-out;\n  }\n\n  #chat-button:hover {\n    right: 10px;\n  }\n\n  #chat-img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .notification-badge {\n    position: absolute;\n    top: -10px;\n    right: -5px;\n    background-color: red;\n    color: white;\n    border-radius: 50%;\n    padding: 1px 11px;\n    font-size: 11px;\n    animation: badgeAnimation 2s infinite alternate;\n  }\n\n  @keyframes badgeAnimation {\n    0%, 100% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.5;\n    }\n  }\n  #schedule-button{\n  \t\tpadding:7px 9px;\n      background: #FCB53B;\n      border-radius:25px;\n     font-size:14px;\n     border:0px;\n     color: #fff;\n  }\n.chat-img-small {\n      width: 50px;\n      height: 50px;\n      border-radius: 50%;\n      object-fit: cover;\n      margin-right: 10px;\n    }\n  #chat-messages .message.received .chat-img-small {\n      width: 50px;\n      height: 50px;\n      border-radius: 50%;\n      object-fit: cover;\n      margin-right: 10px;\n    }\n\n    .message.received {\n      display: flex;\n      align-items: center;\n\n    }\n\n    .message-text {\n      background-color: #f0f0f0;\n      padding: 10px;\n      border-radius: 5px;\n      max-width: 70%;\n    }\n    .contact-buttons {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-left: 10px; \/* A\u00f1ade un margen izquierdo para separarlos un poco de los bordes *\/\n}\n\n.contact-button {\n  display: inline-block;\n  margin: 5px;\n  padding: 10px 20px;\n  width: 100%; \/* Asegura que los botones tengan el mismo ancho *\/\n  font-size: 14px;\n  text-align: left;\n  border: none;\n  border-radius: 25px;\n  cursor: pointer;\n}\n\n.contact-button i {\n  margin-right: 10px;\n}\n.message.received.contact-buttons {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 10px;\n}\n\n.contact-button[data-contact=\"whatsapp\"] {\n  background-color: #25d366;\n  color: #fff;\n}\n\n.contact-button[data-contact=\"messenger\"] {\n  background-color: #0078ff;\n  color: #fff;\n}\n\n.contact-button[data-contact=\"email\"] {\n  background-color: #ff5733;\n  color: #fff;\n}\n\n.contact-button[data-contact=\"phone\"] {\n  background-color: #33cc33;\n  color: #fff;\n}\n  <\/style>\n   <script>\n$(document).ready(function() {\n  var typingTimeout;\n\n  $(\"#chat-button\").click(function() {\n    $(\"#chat-container\").toggleClass(\"open\");\n    $(\"#chat-box\").toggleClass(\"open\");\n\n    if ($(\"#chat-box\").hasClass(\"open\")) {\n      $(\"#chat-container\").addClass(\"fade-in\");\n      $(\"#chat-box\").addClass(\"fade-in\");\n      $(\"#chat-messages\").html('<div class=\"message received loading\"><img decoding=\"async\" src=\"https:\/\/ciudapolis.com\/wp-content\/uploads\/2024\/03\/Cartoon-Style-Robot.jpg\" alt=\"Soporte\" class=\"chat-img-small\">Escribiendo...<\/div>');\n\n      clearTimeout(typingTimeout);\n      typingTimeout = setTimeout(function() {\n        $(\"#chat-messages .message.loading\").remove();\n        $(\"#chat-messages\").append('<div class=\"message received\"><img decoding=\"async\" src=\"https:\/\/ciudapolis.com\/wp-content\/uploads\/2024\/03\/Cartoon-Style-Robot.jpg\" alt=\"Soporte\" class=\"chat-img-small\"><div class=\"message-text\">Conoce m\u00e1s del proyecto a trav\u00e9s de una presentaci\u00f3n virtual con uno de nuestros expertos.<\/div><\/div>');\n        $(document).on(\"click\", \"#schedule-button\", function() {\n      Calendly.initPopupWidget({url: 'https:\/\/calendly.com\/trespatiosplaya\/30min'});\n          return false;\n        });\n        setTimeout(function() {\n          $(\"#chat-messages\").append('<div class=\"message received\"><div class=\"message-text\"><button id=\"schedule-button\"><i class=\"fas fa-calendar\"><\/i> Agendar Videollamada<\/button><\/div><\/div>');\n          setTimeout(function() {\n            $(\"#chat-messages\").append('<div class=\"message received\"><div class=\"message-text\">Elige un canal de contacto:<\/div><\/div>');\n            setTimeout(function() {\n              $(\"#chat-messages\").append('<div class=\"message received contact-buttons\"><\/div>');\n              if ($(window).width() <= 768) {\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"whatsapp\"><a href=\"https:\/\/wa.link\/bber42\"><i class=\"fab fa-whatsapp\"><\/i> WhatsApp<\/a><\/button>');\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"messenger\"><a href=\"http:\/\/m.me\/trespatios\"><i class=\"fab fa-facebook-messenger\"><\/i> Messenger<\/a><\/button>');\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"email\"><a href=\"mailto:info@trespatios.com\"><i class=\"fas fa-envelope\"><\/i> Email<\/a><\/button>');\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"phone\"><a href=\"tel:19844508986\"><i class=\"fas fa-phone\"><\/i> Llamar<\/a><\/button>');\n              } else {\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"whatsapp\"><a href=\"https:\/\/wa.link\/bber42\"><i class=\"fab fa-whatsapp\"><\/i> WhatsApp<\/a><\/button>');\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"messenger\"><a href=\"http:\/\/m.me\/trespatios\"><i class=\"fab fa-facebook-messenger\"><\/i> Messenger<\/a><\/button>');\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"email\"><a href=\"mailto:info@trespatios.com \"><i class=\"fas fa-envelope\"><\/i> Email<\/a><\/button>');\n                $(\".contact-buttons\").append('<button class=\"contact-button\" data-contact=\"phone\"><a href=\"tel:19844508986\"><i class=\"fas fa-phone\"><\/i> Llamar<\/a><\/button>');\n              }\n            }, 1000);\n          }, 1000);\n        }, 2000);\n      }, 2000);\n    } else {\n      $(\"#chat-container\").removeClass(\"open\");\n      $(\"#chat-box\").removeClass(\"open\");\n      $(\"#chat-messages .message.loading\").remove();\n      $(\"#chat-messages .message.received\").remove();\n    }\n  });\n\n  $(document).on(\"click\", \".contact-button\", function() {\n    var contactType = $(this).data(\"contact\");\n    var contactMessage = \"Has elegido el canal de contacto: \" + contactType;\n    var newMessage = '<div class=\"message received\"><div class=\"message-text\">' + contactMessage + '<\/div><\/div>';\n    $(\"#chat-messages\").append(newMessage);\n      $(this).prop(\"disabled\", true);\n  });\n\n  $(\"#chat-close\").click(function() {\n    $(\"#chat-container\").removeClass(\"open\");\n    $(\"#chat-box\").removeClass(\"open\");\n    $(\"#chat-messages .message.loading\").remove();\n    $(\"#chat-messages .message.received\").remove();\n  });\n\n  $(\"#send-button\").click(function() {\n    var message = $(\"#message-input\").val();\n    if (message !== \"\") {\n      var newMessage = '<div class=\"message received\">';\n      newMessage += '<img decoding=\"async\" src=\"https:\/\/ciudapolis.com\/wp-content\/uploads\/2024\/03\/Cartoon-Style-Robot.jpg\" alt=\"Soporte\" class=\"chat-img-small\">';\n      newMessage += '<div class=\"message-text\">' + message + '<\/div>';\n      newMessage += '<\/div>';\n\n      $(\"#chat-messages\").append(newMessage);\n      $(\"#message-input\").val(\"\");\n    }\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Soporte en l\u00ednea &times; \u00a1Hola! \u00bfEn qu\u00e9 puedo ayudarte? 1<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-13146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/pages\/13146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/comments?post=13146"}],"version-history":[{"count":0,"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/pages\/13146\/revisions"}],"wp:attachment":[{"href":"https:\/\/ciudapolis.com\/en\/wp-json\/wp\/v2\/media?parent=13146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}