Añadir un chat en vivo a tu web de Framer

Por qué un chat en una web de Framer

Una web de Framer suele ser un escaparate cuidado: un estudio, un freelance, una app que se lanza. Quien llega ahí tiene una pregunta concreta («¿tienes hueco en marzo?», «¿cuánto cuesta un logo?»). Una burbuja de chat la recoge en el momento justo, sin formulario. El propio Framer cita los chats en vivo entre los usos del código personalizado.

Instalar Hooky en Framer

1. Crea tu cuenta de Hooky (gratis para un sitio), añade tu web con su dirección (mi-web.framer.website o tu dominio) y copia la etiqueta <script> en Sitios.

2. Abre los ajustes del sitio en Framer (Site Settings, llamados Project Settings en las versiones recientes) y ve a la sección Custom Code.

3. Añade un script: Add Script (o + si ya hay alguno), llámalo «Hooky», pega la etiqueta y elige como ubicación el final de la etiqueta <body>. Déjalo en todas las páginas; si te pregunta con qué frecuencia se ejecuta, elige Once.

4. Publica la web. El código personalizado no se carga en la vista previa del lienzo: solo la versión publicada muestra la burbuja.

La etiqueta que hay que pegar (la tuya lleva la clave real de tu web):

<script src="https://heyhooky.com/widget.js" data-site-key="TU_CLAVE_PUBLICA" async></script>

Framer cambia de vez en cuando el nombre de sus menús: si no los encuentras, busca «Custom Code» en la ayuda de Framer. Lo importante: un código a nivel de sitio (no de una sola página), colocado al final de <body>.

Comprobar que aparece la burbuja

Abre tu web publicada en una pestaña nueva: la burbuja está abajo. Pasa de una página a otra: sigue ahí, y la conversación también. Un mensaje de prueba llega al instante a Mensajes.

¿No aparece nada? Comprueba que has vuelto a publicar, que el código está a nivel de sitio y al final de <body>, y que la dirección abierta está en las direcciones autorizadas del sitio en Hooky, si declaraste alguna.

framer.website y tu dominio

Tu web tiene una dirección de Framer y, a menudo, tu propio dominio. Añade las dos en la página del sitio, en Hooky: una sola bandeja de entrada, las mismas estadísticas. www. queda cubierto automáticamente.

Adaptar la burbuja a tu diseño

No hace falta tocar Framer para esto: en Hooky, en la página del sitio, eliges el color de la burbuja, su lado (derecha o izquierda) y tu mensaje de bienvenida, con una vista previa en directo. Los cambios se aplican sin volver a publicar.

¿Un botón «Escríbenos» en tu menú? Dale un enlace que llame a Hooky.open() o, más sencillo en Framer, deja que la burbuja haga el trabajo.

Responder a tus visitantes

Una notificación en el móvil y respondes desde la app de Hooky (iPhone, iPad, Mac, Android) o desde el panel web. Tu visitante puede adjuntar una foto o un PDF (un briefing, una maqueta), y si sale de la web tras dejar su email, tu respuesta le llega por email con un enlace para retomar la conversación.

Preguntas frecuentes