{"id":605,"date":"2020-08-20T23:39:05","date_gmt":"2020-08-21T02:39:05","guid":{"rendered":"https:\/\/diblet.com\/blog\/?p=605"},"modified":"2020-08-21T16:19:29","modified_gmt":"2020-08-21T19:19:29","slug":"crisp-un-potente-sistema-de-chat-para-tu-sitio-web","status":"publish","type":"post","link":"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/","title":{"rendered":"Crisp: Un potente sistema de chat para tu sitio web"},"content":{"rendered":"

Los servicios de Chat Online para soporte al cliente existen desde hace m\u00e1s de una d\u00e9cada, sin embargo, en los \u00faltimos a\u00f1os han evolucionado y est\u00e1n en auge gracias al acelerado avance de las tecnolog\u00edas Web.<\/p>\n

JavaScript, sockets, HTML5, solicitudes as\u00edncronas, entre otras tecnolog\u00edas, han hecho que este tipo de sistemas de chat se reconviertan en potentes herramientas de marketing y captura de prospectos.<\/strong><\/p>\n

Una de las mejores herramientas del mercado de este tipo es Crisp.chat<\/strong>.<\/a> A pesar de que existen diversas opciones m\u00e1s para elegir, Crisp<\/strong> llama particularmente la atenci\u00f3n por su potente SDK amigable con los programadores<\/strong> y por la gran cantidad de otras herramientas con la que se puede conectar y sincronizar, incluso en su versi\u00f3n gratuita.<\/p>\n

A continuaci\u00f3n veremos c\u00f3mo registrar una cuenta gratuita en Crisp<\/strong>, c\u00f3mo integrarlo a tu sitio web y c\u00f3mo hacer uso de algunas funciones b\u00e1sicas, pero potentes, de su SDK.<\/p>\n

C\u00f3mo crear una cuenta en Crisp<\/strong><\/h2>\n

Para registrar una cuenta en Crisp<\/strong>, debes dirigirte primero a https:\/\/app.crisp.chat\/initiate\/signup\/<\/a> donde ver\u00e1s un sencillo formulario de registro de tres pasos que te guiar\u00e1 en la creaci\u00f3n de la cuenta gratuita.<\/p>\n

\"\"<\/p>\n

Una vez que hayas completado el paso de registro, instant\u00e1neamente recibir\u00e1s en tu direcci\u00f3n de correo electr\u00f3nico un email con el c\u00f3digo para integrar el chat en tu sitio Web.<\/p>\n

Este email tambi\u00e9n te mostrar\u00e1 instrucciones de integraci\u00f3n para plataformas espec\u00edficas como WordPress, Prestashop o WHMCS que pueden ser \u00fatiles pero, en esencia, solo hace falta que incrustes en tu sitio el c\u00f3digo gen\u00e9rico que recibiste<\/strong>. Una vez hecho esto lo que ver\u00e1s ser\u00e1 algo as\u00ed:<\/p>\n

\"\"<\/p>\n

Antes de integrar funciones m\u00e1s avanzadas seguramente quieras revisar la configuraci\u00f3n b\u00e1sica de Crisp<\/strong> para tu negocio, por ejemplo, el horario de atenci\u00f3n, el mensaje de bienvenida, notificaciones, el idioma del chat, entre otras variadas opciones.<\/p>\n

Posiblemente lo m\u00e1s importante a configurar es el horario de atenci\u00f3n del Chat.<\/strong> Ser\u00eda ideal configurar el horario de oficina donde alguno de los miembros de tu equipo de trabajo pueda atender a las solicitudes o preguntas de los clientes r\u00e1pidamente. Si configuramos nuestros d\u00edas y horario de oficina entonces el Chat solo se ver\u00e1 disponible en esos d\u00edas y horarios. \u00a1No hay nada peor que tener un chat de atenci\u00f3n al cliente y no atenderlo!<\/strong><\/p>\n

Y listo. De esta forma tan sencilla ya tienes el chat de Crisp b\u00e1sico integrado en tu sitio web.<\/strong> Cualquier visitante podr\u00e1 iniciar una conversaci\u00f3n contigo. Solo har\u00e1 falta que te mantengas en l\u00ednea en Crisp<\/strong>, donde recibir\u00e1s los mensajes de tus clientes, o que instales la APP Mobile de Crisp<\/strong> para recibir los mensajes y chatear desde tu tel\u00e9fono.<\/p>\n

Integraci\u00f3n Avanzada<\/h2>\n

Lo divertido a\u00fan no comenz\u00f3. Lo que vimos hasta ahora es la integraci\u00f3n de un Chat com\u00fan y corriente. Pero a continuaci\u00f3n utilizaremos el SDK de JavaScript de Crisp<\/strong> para mejorar nuestro Chat. Haremos lo siguiente:<\/p>\n

1.<\/strong> Enviar un mensaje automatizado depende la secci\u00f3n del sitio en que se encuentre el visitante.<\/p>\n

2.<\/strong> Abrir el chat cuando el visitante presione un link o bot\u00f3n de nuestro sitio<\/p>\n

3.<\/strong> Integrar el Chat con nuestro propio sistema de usuarios<\/p>\n

Enviar un mensaje automatizado depende la secci\u00f3n del sitio<\/h2>\n

Para enviar un mensaje desde JavaScript al chat activo en nuestro sitio podemos usar el m\u00e9todo $crisp.push()<\/strong><\/em> de la siguiente forma:<\/p>\n

$crisp.push([\"do\", \"message:show\", [\"text\", \"\u00a1Hola, esto es una prueba!\"]]);<\/pre>\n
A esta funci\u00f3n podemos mezclarla con algunas m\u00e1s, por ejemplo, dentro de los m\u00e9todos disponibles podemos identificar varios valores boolean que nos da informaci\u00f3n sobre el estado del Chat. Supongamos que queremos mostrar el mensaje anterior solamente si el chat se encuentra disponible, es decir, dentro de las horas activas que configuramos en nuestra cuenta de Crisp<\/strong>. Lo podemos hacer de la siguiente forma:<\/p>\n
if($crisp.is(\"website:available\"))\r\n{\r\n    $crisp.push([\"do\", \"message:show\", [\"text\", \"\u00a1Hola, esto es una prueba!\"]]);\r\n}<\/pre>\n
Pero hag\u00e1moslo m\u00e1s interesante. Digamos que solamente queremos mostrar un mensaje al usuario si ha estado en la p\u00e1gina 30 segundos, solo si la URL que el usuario est\u00e1 visitando contiene el texto “\/servicios\/”<\/em><\/strong>, es decir, que el usuario est\u00e9 viendo la p\u00e1gina de servicios espec\u00edficamente, y si el Chat est\u00e1 en el horario de disponibilidad. Podr\u00edamos hacer algo como lo siguiente:<\/p>\n
if(window.location.href.indexOf(\"\/servicios\/\") > -1)\r\n{\r\n    setTimeout(function()\r\n    {\r\n        if($crisp.is(\"website:available\"))\r\n        {\r\n            $crisp.push([\"do\", \"message:show\", [\"text\", \"\u00a1Hola, esto es una prueba!\"]]);\r\n        }        \r\n\r\n    },30000);\r\n}<\/pre>\n
Abrir el chat cuando el visitante presione un link o bot\u00f3n de nuestro sitio<\/h2>\n
Para este caso digamos que queremos colocar un bot\u00f3n o link de llamada a la acci\u00f3n y buscamos que, cuando el cliente toque este link, el chat se abra autom\u00e1ticamente. Lo podemos hacer de forma sencilla de la siguiente manera:<\/p>\n
Nuestro link se ver\u00eda algo as\u00ed, coloc\u00e1ndole la id AbrirCrisp<\/em>:<\/p>\n
<a href=\"#\" id=\"AbrirCrisp\">HABLEMOS AHORA<\/a><\/pre>\n
Y utilizar\u00edamos el evento click de JavaScript para capturar la acci\u00f3n del visitante de la siguiente forma:<\/p>\n
document.getElementById(\"AbrirCrisp\").onclick = function()\r\n{\r\n    $crisp.push(['do', 'chat:open']);\r\n}<\/pre>\n
Integrar el Chat con nuestro propio sistema de usuarios<\/h2>\n
Para lograr este objetivo lo que vamos a utilizar son las funciones de “identificaci\u00f3n” <\/em>de Crisp<\/strong> que nos permiten almacenar ciertos valores para saber quien es el visitante<\/strong> que est\u00e1 interactuando con nosotros y, cuando el visitante inicie sesi\u00f3n en su cuenta de nuestra web, vamos a pasar a Crisp<\/strong> un valor de CRISP_TOKEN_ID<\/strong><\/em>, un identificador \u00fanico que le haga saber a Crisp<\/strong> de que usuario se trata.<\/p>\n
Esto sirve para dos cosas:<\/p>\n
1.<\/strong> Al identificar al usuario estamos sincronizando la informaci\u00f3n del sistema de usuarios de nuestro sitio con\u00a0 el chat de Crisp<\/strong>.<\/p>\n
2.<\/strong> Este CRISP_TOKEN_ID<\/strong> que le pasamos al chat servir\u00e1 para que el cliente conserve el historial de conversaci\u00f3n que tengamos con \u00e9l incluso si cierra su sesi\u00f3n e inicia en otro momento u otro dispositivo.<\/p>\n
Primero, cuando el usuario est\u00e9 logueado en nuestro sitio, vamos a pasar a Crisp<\/strong> los datos de ese usuario de la siguiente forma desde JavaScript:<\/p>\n
$crisp.push([\"set\", \"user:nickname\", [\"Luciano Joan Vergara\"]]);\r\n$crisp.push([\"set\", \"user:email\", [\"luciano.vergara@diblet.com\"]]);<\/pre>\n
Hecho este paso ya sabremos qui\u00e9n es el cliente que nos escriba un mensaje en el Chat.<\/p>\n
El segundo paso es establecer el TOKEN<\/strong>. El valor del TOKEN<\/strong> debe ser lo m\u00e1s aleatorio y secreto posible. Idealmente te recomiendo que generes el TOKEN de forma secreta\u00a0del lado del servidor<\/strong>. Esto es para que nadie pueda “alterar” <\/em><\/strong>este TOKEN <\/strong>de alguna forma que le permita ver una conversaci\u00f3n de otro usuario.<\/p>\n
Para motivos de este ejemplo vamos a establecer un TOKEN<\/strong> simple e inseguro desde JavaScript. Solo colocaremos la ID del usuario:<\/p>\n
Para hacer este cambio debes definir el valor de CRISP_TOKEN_ID<\/strong> antes de iniciar el chat en el c\u00f3digo que incrustaste en tu sitio en un principio. Tu c\u00f3digo deber\u00eda quedar algo parecido a lo siguiente:<\/p>\n
$crisp = [];\r\nCRISP_TOKEN_ID = 'ID_DE_NUESTRO_USUARIO';\r\nCRISP_WEBSITE_ID = 'xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';\r\n(function(){d=document;s=d.createElement('script');s.src='\/\/client.crisp.chat\/l.js';s.async=1;d.getElementsByTagName('head')[0].appendChild(s);})();<\/pre>\n
Sencillo pero potente \u00bfCierto?<\/p>\n
Toda la documentaci\u00f3n de los m\u00e9todos que utilizamos en este post la puedes encontrar aqu\u00ed.<\/a><\/p>\n
Hay muchas m\u00e1s funciones que explorar de Crisp<\/strong>, solo hemos dado un vistazo, pero ahora sabes que Crisp<\/strong> es mucho m\u00e1s que solo un lindo Chat.<\/p>\n
Todo lo que hemos visto puedes hacerlo con el plan gratuito de Crisp<\/strong> pero hay otras integraciones y funciones de las que podr\u00e1s disponer adquiriendo un plan pago. Si deseas que nuestros expertos de Diblet<\/strong> te ayuden a integrar Crisp<\/strong> en tu sitio Web no dudes en contactarnos. ?<\/p>\n","protected":false},"excerpt":{"rendered":"
Los servicios de Chat Online para soporte al cliente existen desde hace más de una década, sin embargo, en los últimos años han evolucionado y están en auge gracias al […]<\/p>\n","protected":false},"author":1,"featured_media":621,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,63,22],"tags":[64],"class_list":["post-605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destacado","category-marketing","category-programacion","tag-crisp"],"yoast_head":"\nCrisp: Un potente sistema de chat para tu sitio web - Diblet<\/title>\n<link rel=\"canonical\" href=\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crisp: Un potente sistema de chat para tu sitio web - Diblet\" \/>\n<meta property=\"og:description\" content=\"Los servicios de Chat Online para soporte al cliente existen desde hace más de una década, sin embargo, en los últimos años han evolucionado y están en auge gracias al […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Diblet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/dibletweb\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-21T02:39:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-21T19:19:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2020\/08\/crisp-V2-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1181\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dibletweb\" \/>\n<meta name=\"twitter:site\" content=\"@dibletweb\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\">\n\t<meta name=\"twitter:data1\" content=\"7 minutos\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/diblet.com\/blog\/#organization\",\"name\":\"Diblet.com\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/dibletweb\/\",\"https:\/\/twitter.com\/dibletweb\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/#logo\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/02\/demo-1.jpg\",\"width\":846,\"height\":427,\"caption\":\"Diblet.com\"},\"image\":{\"@id\":\"https:\/\/diblet.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/diblet.com\/blog\/#website\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"name\":\"Diblet\",\"description\":\"Blog sobre Tecnolog\\u00eda & Programaci\\u00f3n\",\"publisher\":{\"@id\":\"https:\/\/diblet.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/diblet.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es-AR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#primaryimage\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2020\/08\/crisp-V2-1.jpg\",\"width\":2000,\"height\":1181},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#webpage\",\"url\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/\",\"name\":\"Crisp: Un potente sistema de chat para tu sitio web - Diblet\",\"isPartOf\":{\"@id\":\"https:\/\/diblet.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#primaryimage\"},\"datePublished\":\"2020-08-21T02:39:05+00:00\",\"dateModified\":\"2020-08-21T19:19:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#breadcrumb\"},\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/\",\"url\":\"https:\/\/diblet.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/\",\"url\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/\",\"name\":\"Crisp: Un potente sistema de chat para tu sitio web\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#webpage\"},\"author\":{\"@id\":\"https:\/\/diblet.com\/blog\/#\/schema\/person\/4ee1b78463e0e63b0f6fbe82358210b1\"},\"headline\":\"Crisp: Un potente sistema de chat para tu sitio web\",\"datePublished\":\"2020-08-21T02:39:05+00:00\",\"dateModified\":\"2020-08-21T19:19:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/diblet.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#primaryimage\"},\"keywords\":\"Crisp\",\"articleSection\":\"Destacado,Marketing,Programaci\\u00f3n\",\"inLanguage\":\"es-AR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/diblet.com\/blog\/crisp-un-potente-sistema-de-chat-para-tu-sitio-web\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/diblet.com\/blog\/#\/schema\/person\/4ee1b78463e0e63b0f6fbe82358210b1\",\"name\":\"Luciano Vergara\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/diblet.com\/blog\/#personlogo\",\"inLanguage\":\"es-AR\",\"url\":\"https:\/\/diblet.com\/blog\/wp-content\/uploads\/2016\/02\/f1-150x150.jpg\",\"caption\":\"Luciano Vergara\"},\"description\":\"CTO & Founder de Diblet.com, programador Full-stack adicto al caf\\u00e9 en rehabilitaci\\u00f3n.\",\"sameAs\":[\"http:\/\/diblet.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/comments?post=605"}],"version-history":[{"count":83,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/605\/revisions"}],"predecessor-version":[{"id":699,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/posts\/605\/revisions\/699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/media\/621"}],"wp:attachment":[{"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/media?parent=605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/categories?post=605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/diblet.com\/blog\/wp-json\/wp\/v2\/tags?post=605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}