1. All Collections >
  2. Canales >
  3. Widget de chat del sitio web >
  4. Instalar widget de chat en WordPress

Instalar widget de chat en WordPress

Avatar
JQ Lee
3 min de lectura

Agregar un widget de chat web a su sitio web de WordPress es un proceso rápido y sencillo. No requiere habilidades de codificación ni conocimientos técnicos.

Configuración para la instalación

Para instalar un widget de chat web en WordPress, necesitará lo siguiente:

  • Acceso al panel de control de WordPress de tu sitio web.

  • Un fragmento de código para su widget de chat web.

Si no tienes un fragmento de código ya, lo generarás al crear un widget de chat en el sitio web de respond.io o al usar el plugin de chat de Facebook para Facebook Messenger.

Si ya tiene los canales conectados en la plataforma respond.io y necesita recuperar el fragmento de código generado, siga las instrucciones aquí.

Para una instalación exitosa, asegúrate de que el dominio de tu sitio web esté completo. Hay dos maneras de hacerlo.

Vaya a respond.io Configuración > seleccione Canales > seleccione el canal de chat de su sitio web > haga clic en configurar > agregue el dominio del sitio web. 

Vaya a la configuración de respond.io > seleccione Widgets de crecimiento > haga clic en el widget que desea agregar a su sitio web > en el interruptor General , agregue el dominio de su sitio web al campo Dominios del sitio web .

Instalación en WordPress

Paso 1: Iniciar sesión en WordPress

Navegue al panel de administración de WordPress de su sitio web e inicie sesión.

Paso 2: Vaya a la página de complementos

Desde el panel de navegación izquierdo, haga clic en Plugins. En la página de complementos, presione el botón azul Agregar nuevo en la parte superior de la página.

Paso 3: Agregar nuevo complemento

Usando la barra de búsqueda, busque el complemento WPCode . Verá muchas opciones en la página de resultados de búsqueda que puede utilizar, pero utilizaremos el complemento "Insertar encabezado y pie de página" de WPCode para este tutorial. Presione el botón Instalar ahora y asegúrese de activar el complemento para poder usarlo.

Paso 4: Abra la consola de encabezados y pie de página

Desde el menú de navegación de la izquierda, haga clic en Fragmentos de código y seleccione Encabezado & Pie de página en el submenú.

Paso 5: Agregar el script de chat en vivo

Copie el script de su complemento desde respond.io y péguelo en la sección Script en pie de página de la página de la consola de encabezado y pie de página.

Una vez que hayas pegado el script, haz clic en el botón azul "Guardar" en la parte inferior de la página.

¡Hecho!

Abra el sitio web y consulte el complemento de chat. Lo encontrarás en la esquina inferior derecha. Ahora los visitantes de tu sitio web pueden chatear contigo sin esfuerzo. Si utilizaste los fragmentos de código generados desde la plataforma respond.io, podrás administrar las conversaciones y actualizar la apariencia del widget desde la plataforma.

¡El widget de chat ahora está activo en tu sitio web!

Identificar usuarios registrados.

Esta sección solo es aplicable si su sitio web tiene una función de inicio de sesión de usuario.

Paso 1: Inicia sesión en tu cuenta de WordPress

Navega al panel de administración de WordPress de tu sitio y accede.

Paso 2: Abra los archivos de encabezado del tema

Desde el menú de navegación de la izquierda, haga clic en Apariencia y seleccione Editor de archivos de tema. Procede seleccionando el archivo Encabezado del tema.

Paso 3: Agregue el ID de usuario y el código de nombre recuperados

Copie el código de muestra a continuación y péguelo en el archivo de encabezado del tema. Una vez que haya pegado el código, haga clic en el botón Actualizar archivo en la parte inferior de la página.

El código de muestra a continuación sirve para obtener el ID del usuario, el nombre y el apellido de WordPress. Siéntete libre de modificarlo si deseas obtener otros campos de contacto.

<?php 
	$user_info = get_userdata(get_current_user_id());
?>

<script type="text/javascript">
	window.$wp_ID = "<?php echo $user_info->ID; ?>";
	window.$wp_firstname = "<?php echo $user_info->first_name; ?>";
	window.$wp_lastname = "<?php echo $user_info->last_name; ?>";
</script>

`

Paso 4: Abra la consola de encabezados y pie de página

Desde el menú de navegación izquierdo, haga clic en Configuración y seleccione el complemento Encabezado & Pie de página del submenú de configuración.

Paso 5: Agregar el script de identificación del usuario conectado

Copie el código de muestra a continuación y péguelo en la sección Script en pie de página de la página de la consola de encabezado y pie de página. Tenga en cuenta que el script para identificar usuarios conectados debe colocarse por encima del script de chat en vivo.

El código de muestra a continuación utiliza el Id. del usuario como identificador y lo pasa junto con el nombre y el apellido. Siéntete libre de modificarlo si deseas obtener otros campos de contacto.

<script>  
      ventana.\_\_respond\_configuraciones = {  
    	identificador: $wp\_ID,  
        nombre: $wp\_nombre,  
        apellido: $wp\_apellido,    
      };  
</script>

Una vez que hayas pegado el script, haz clic en el botón azul "Guardar" en la parte inferior de la página.

¡Hecho!

Abra el sitio web y consulte el complemento de chat. Se podrán identificar los usuarios que hayan iniciado sesión en su WordPress. Una vez que el identificador pasado coincida con un contacto existente, se reanudará la conversación actual.

Preguntas frecuentes y resolución de problemas

WPCode

Si estás utilizando un plugin de caché de WordPress como WPCode, sigue estos pasos para que el widget aparezca correctamente.

Desactiva la función de minificación de datos para JavaScript.

Ve a Ajustes de Wordpress > Selecciona WPCode > En la página de WPCode, selecciona la pestaña Optimización de Archivos > desmarca Minificar archivos JavaScript

Agrega nuestro dominio de widget a los Archivos Excluidos de JavaScript

https://cdn.respond.io/webchat/widget/(.*).js

Una vez guardado, se recomienda limpiar la caché en WordPress.

Compartir este artículo
Telegram
Facebook
Linkedin
Twitter

¿No encuentras lo que estás buscando? 🔎