Cómo integrar ChatGPT como chatbot en WordPress

🎯 Opciones disponibles

Existen múltiples maneras de añadir ChatGPT como chatbot en WordPress:

• Plugin pre-hecho: como AI Engine, Social Intents, Chatbot for OpenAI, entre otros.
• Integración con Live Chat + API de OpenAI: usando servicios como Social Intents o plugins que permiten insertar tu clave API.
• Desarrollo personalizado: crear tu propio plugin con PHP + JS para conectar con OpenAI y controlar el diseño y lógica.

🛠 Requisitos

• Cuenta de OpenAI con clave API válida.
• Acceso de administrador a tu instalación WordPress.
• Conocimientos básicos de PHP, JS y WordPress.

🚀 Paso a paso para integrar ChatGPT como chatbot

1. Obtener tu clave de OpenAI

Visita https://platform.openai.com/account/api-keys y genera una clave API.

2. Crear un plugin personalizado

En tu carpeta wp-content/plugins/, crea una nueva carpeta llamada chatgpt-chatbot y dentro coloca el siguiente archivo:

chatgpt-chatbot.php

<?php
/*
Plugin Name: ChatGPT Chatbot
Description: Chatbot con ChatGPT usando la API de OpenAI.
Version: 1.0
Author: TuNombre
*/

if ( ! defined( 'ABSPATH' ) ) exit;

function cgb_enqueue_scripts() {
  wp_enqueue_script( 'chatgpt-js', plugin_dir_url(__FILE__) . 'chatgpt.js', array('jquery'), '1.0', true );
  wp_enqueue_style( 'chatgpt-css', plugin_dir_url(__FILE__) . 'chatgpt.css' );
  wp_localize_script( 'chatgpt-js', 'cgb_vars', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce'    => wp_create_nonce('cgb_nonce'),
  ));
}
add_action( 'wp_enqueue_scripts', 'cgb_enqueue_scripts' );

function cgb_chat_shortcode() {
  ob_start(); ?>
  <div id="chatgpt-container">
    <div id="chatgpt-messages"></div>
    <input type="text" id="chatgpt-input" placeholder="Escribe tu mensaje..." />
    <button id="chatgpt-send">Enviar</button>
  </div>
  <?php return ob_get_clean();
}
add_shortcode('chatgpt_chatbot', 'cgb_chat_shortcode');

add_action( 'wp_ajax_cgb_send_message', 'cgb_send_message' );
add_action( 'wp_ajax_nopriv_cgb_send_message', 'cgb_send_message' );

function cgb_send_message() {
  check_ajax_referer('cgb_nonce', 'nonce');
  $message = sanitize_text_field($_POST['message']);
  if (empty($message)) wp_send_json_error('Mensaje vacío');

  $api_key = 'TU_API_KEY_AQUI';
  $body = array(
    'model' => 'gpt-3.5-turbo',
    'messages' => array(
      array('role' => 'system', 'content' => 'Eres un asistente útil.'),
      array('role' => 'user', 'content' => $message)
    ),
    'temperature' => 0.7
  );
  $args = array(
    'body' => json_encode($body),
    'headers' => array(
      'Content-Type'  => 'application/json',
      'Authorization' => 'Bearer ' . $api_key,
    ),
    'timeout' => 30,
  );
  $response = wp_remote_post('https://api.openai.com/v1/chat/completions', $args);
  if (is_wp_error($response)) wp_send_json_error('Error de conexión');
  $data = json_decode(wp_remote_retrieve_body($response), true);
  $reply = $data['choices'][0]['message']['content'] ?? 'Sin respuesta';
  wp_send_json_success(array('reply' => $reply));
}

chatgpt.js

jQuery(document).ready(function($){
  $('#chatgpt-send').on('click', function(){
    const message = $('#chatgpt-input').val();
    if (!message.trim()) return;
    $('#chatgpt-messages').append('<div class="user-msg">' + message + '</div>');
    $('#chatgpt-input').val('');
    $.post(cgb_vars.ajax_url, {
      action: 'cgb_send_message',
      nonce: cgb_vars.nonce,
      message: message
    }).done(function(response){
      const reply = response.data.reply || 'Sin respuesta';
      $('#chatgpt-messages').append('<div class="bot-msg">' + reply + '</div>');
    }).fail(function(){
      $('#chatgpt-messages').append('<div class="bot-msg">Error de conexión.</div>');
    });
  });
});

chatgpt.css

#chatgpt-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 8px;
}
#chatgpt-messages {
  height: 250px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.user-msg {
  background: #d1e7dd;
  margin: 5px;
  padding: 8px;
  border-radius: 4px;
}
.bot-msg {
  background: #f8d7da;
  margin: 5px;
  padding: 8px;
  border-radius: 4px;
}
#chatgpt-input {
  width: 70%;
  padding: 8px;
}
#chatgpt-send {
  width: 28%;
  padding: 8px;
}

3. Activar y mostrar el chatbot

1. Sube la carpeta chatgpt-chatbot completa a tu sitio WordPress.
2. Activa el plugin desde el panel de administración.
3. Agrega el shortcode [chatgpt_chatbot] en cualquier página o entrada.

✅ Buenas prácticas

• No publiques tu API key en JS. Mantenla solo en el backend.
• Limita el uso para controlar costos (tokens / temperatura / cantidad de mensajes).
• Modera lo que responde el bot para evitar contenido inapropiado.
• Diseña el chatbot para que sea accesible en móvil.

📌 Conclusión

Integrar ChatGPT como chatbot en WordPress es una excelente forma de añadir funcionalidad conversacional inteligente a tu sitio. Puedes hacerlo con un plugin listo o creando el tuyo propio para mayor control. Solo asegúrate de usar la API de OpenAI de forma segura, eficiente y con una buena experiencia para tus usuarios.

🔖 Etiquetas sugeridas:

#ChatGPT #WordPress #Chatbot #OpenAI #API #DesarrolloWordPress #JS #PHP #AI