Creación y Configuración de Chat Widget en Ropofy

1. Ubicación del módulo de Chat Widget

Para iniciar la creación de un Chat Widget dentro del CRM de Ropofy, el usuario debe:

1. Ingresar al panel principal de Ropofy.
2. Dirigirse al menú lateral izquierdo.
3. Seleccionar el módulo Sites.

4. 

5. Dentro de la barra superior de Sites, hacer clic en la opción Chat Widget.

6. 

Esta sección centraliza todos los widgets de chat creados y permite gestionarlos, editarlos o crear nuevos.

2. Pantalla principal: Webchat for your website

En esta vista se presenta:

• Título: “Webchat for your website”.
• Descripción: Indica que el chat widget permite convertir visitantes del sitio web en leads.
• Botón “+ New”: Ubicado en la parte superior derecha, se utiliza para crear un nuevo chat widget.

2.1 Listado de Chat Widgets

La tabla muestra todos los widgets existentes con las siguientes columnas:

• Name: Nombre asignado al widget.
• Updated on: Fecha y hora de la última modificación.
• Chat type: Tipo de chat configurado (por ejemplo, SMS / Email Chat, Voice AI).
• Menú de acciones (tres puntos): Permite realizar acciones adicionales como editar o eliminar.

En la parte inferior se muestra:

• Número de resultados.
• Controles de paginación (Previous / Next).

3. Creación de un nuevo Chat Widget

Al hacer clic en + New, se abre una ventana modal titulada:

“Select the type of chat”

Esta ventana solicita al usuario definir el tipo de chat que desea crear.

3.1 Tipos de chat disponibles

Cada opción se presenta como una tarjeta seleccionable:

1. All-In-One Chat
   Combina múltiples canales (WhatsApp, Live Chat, Email/SMS, Facebook, Instagram y Voice AI) en un solo widget.
2. SMS / Email Chat
   Permite recopilar información del visitante y realizar seguimiento vía SMS o correo electrónico. Ideal para equipos sin soporte en tiempo real 24/7.
3. Live Chat
   Chat en tiempo real en el sitio web, atendido por el equipo humano o por IA conversacional.
4. Facebook Chat
   Redirige a los visitantes a Facebook Messenger. Requiere conexión con una página de Facebook.
5. Instagram Chat
   Dirige a los visitantes a mensajes directos de Instagram. Requiere conexión con una página de Facebook.
6. WhatsApp Chat
   Permite que los visitantes inicien conversaciones directamente por WhatsApp. Requiere configurar un número de WhatsApp.
7. Voice AI
   Habilita conversaciones por voz automatizadas mediante inteligencia artificial, disponibles 24/7.

Al seleccionar un tipo de chat, el sistema crea el widget y redirige al editor de configuración.

4. Editor del Chat Widget

Una vez creado, el usuario accede al editor del widget identificado por su nombre (por ejemplo, “Chat Widget 4”).

tambien se puede acceder al editor dando clic en los 3 puntos al lado del modulo de widget que queramos editar y dando clic en "Editar"

En la parte superior se encuentran:

• Botón Back para regresar.
• Nombre del widget (editable).
• Botones de acción:
  • Get it for WordPress
  • Get Code
  • Save

También se visualiza un selector de vista previa:

• Escritorio
• Tablet
• Móvil

A la derecha se muestra una vista previa en tiempo real del chat.

5. Pestaña: Style

Esta pestaña permite personalizar la apariencia visual del widget.

5.1 Styles

• Chat Prompt: Activar o desactivar el mensaje emergente inicial del chat.
• Chat Icon: Permite seleccionar el ícono del widget (chat, mensaje, burbuja, WhatsApp, entre otros).
• Theme: Selección de temas de color predefinidos para el diseño del chat.

5.2 Welcome Message

• Campo de texto para definir el mensaje inicial que verá el visitante.

5.3 Return Visitor Custom Greetings

• Opción para habilitar un saludo personalizado a visitantes recurrentes.
• Uso de la variable {name} para mostrar el nombre del visitante si está disponible.

6. Widget Customization

6.1 Avatar

• Allow Avatar Image: Permite mostrar una imagen de avatar.
• Opción para cargar o reemplazar la imagen.
• Recomendación de tamaño: 300px x 300px, menos de 300 KB.
• Alt Text: Texto alternativo del avatar.

6.2 Widget Position

• Selección visual de la posición del widget en pantalla (esquinas inferiores o laterales).
• Aplica para navegadores de escritorio.

6.3 Widget Dimension

• Auto: Dimensiones automáticas.
• Custom: Dimensiones personalizadas.

7. Pestaña: Chat Window

Permite configurar el contenido y comportamiento interno de la ventana del chat.

7.1 Title & Intro

• Chat Window Title: Título visible en la parte superior del chat.

• 

• Intro Message: Texto introductorio que guía al usuario.

• 

7.2 Contact Form Options

Campos obligatorios que el visitante debe completar al iniciar una conversación:

• Name
• Phone
• Message

7.3 Prefilled Message Text

• Texto que aparece precargado en el campo de mensaje.

7.4 Button Text

• Texto del botón de envío del formulario.

7.5 Redirect Call-To-Action

• Opción para redirigir al usuario a una URL externa.
• No recomendado si la IA conversacional está activa.

8. Additional Options

8.1 Agency Branding

• Permite mostrar branding de la agencia en la parte inferior del widget.

• 

• Campos configurables:
  • Branding Title
  • Display Name
  • URL

8.2 Consent Checkbox for HIPAA

• Agrega un checkbox de consentimiento antes de enviar el formulario.
• Puede marcarse por defecto.
• Incluye un campo para el mensaje legal.

9. Pestaña: Messaging

Enfocada en la experiencia posterior al envío del formulario.

9.1 Acknowledgement

• Customer Support Contact: Teléfono o correo de contacto.
• Acknowledgement Message: Mensaje que confirma la recepción.
• Acknowledgement Greeting: Texto de agradecimiento.
• Acknowledgement Icon: Selección del ícono de confirmación.
• Placeholder Color: Color visual de los placeholders.

9.2 Language

• Select Language: Permite definir el idioma del widget (por ejemplo, English - United States).

10. Vista previa y guardado

Durante toda la configuración:

• La vista previa se actualiza en tiempo real.
• El botón Save guarda los cambios.
• Get Code genera el script para incrustar el widget en cualquier sitio web.
• Get it for WordPress facilita la integración directa en sitios WordPress.