Chatbot con IA gratis: usa Perplexity para responder en tu web

META_DESC: Aprende a montar un chatbot con IA gratis usando Perplexity. Guía práctica paso a paso para responder a tus visitantes sin pagar suscripción.

Mira, colega. Todos hemos estado ahí: tu web funciona, el contenido mola, pero los visitantes llegan, preguntan algo y... silencio. No tienes un botón mágico que responda a las 3 de la mañana. Y no, no voy a venderte otro plugin de pago que te sangra la cartera cada mes. Hoy te traigo la solución que uso yo: Perplexity como chatbot gratuito. Sin humo, sin letra pequeña.

¿Por qué Perplexity y no otro?

Primero, lo obvio. Perplexity tiene una API que te da 5 dólares gratis al mes. Para un blog personal o una web de nicho, eso son unas 300-400 peticiones. ¿Cuántos visitantes tienes? ¿100 al día? Perfecto, te sobra. Además, la calidad de las respuestas es top, mejor que la de muchos modelos "gratuitos" que regurgitan texto hasta por las orejas.

El montaje: paso a paso

Olvídate de complicarte con código de servidor. La forma más rápida es usar un pequeño script en JavaScript que llame a la API de Perplexity. Así de simple:

• Ve a Perplexity API y crea tu clave API gratuita.

• Copia el código que te dejo aquí abajo.

• Pega el script en tu web, donde quieras que aparezca el chat.

// Chatbot Perplexity - Script para tu web

const API_KEY = 'TU_CLAVE_PERSPLEXITY_AQUI';

const API_URL = 'https://api.perplexity.ai/chat/completions';

async function chatbotPregunta(mensaje) {

const response = await fetch(API_URL, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'Authorization': Bearer ${API_KEY}

},

body: JSON.stringify({

model: 'sonar-small',

messages: [

{ role: 'system', content: 'Eres un asistente útil para mi web. Responde claro y breve.' },

{ role: 'user', content: mensaje }

],

max_tokens: 150

})

});

const data = await response.json();

return data.choices[0].message.content;

}

Los prompts que de verdad funcionan

Un chatbot sin instrucciones es como un becario sin café: no rinde. Aquí tienes prompts listos para copiar y pegar, colega:

Prompt 1: Asistente genérico

Actúa como un asistente de atención al cliente para mi web. Responde de forma amable, breve y directa. Si no sabes algo, di que lo consultarás con el equipo.

Prompt 2: Especialista en nicho
Eres un experto en [TU NICHO]. Responde preguntas técnicas con profundidad, pero en un tono cercano. Evita tecnicismos innecesarios y usa ejemplos prácticos.
Prompt 3: Generador de leads
Cuando un usuario muestre interés en comprar, responde ofreciendo un descuento del 10% y pídele su email para enviarle más info.
El truco que nadie te dice
Mira, la clave está en el system prompt. Si lo defines bien, el bot parece que trabaja para ti día y noche. Prueba este para webs de servicios:
Eres el asistente personal de [NOMBRE DE TU EMPRESA]. Tu objetivo es resolver dudas, agendar citas y dar presupuestos rápidos. Siempre termina las respuestas con "¿Puedo ayudarte con algo más?".
El código final para tu página
Aquí va el script completo que puedes copiar, pegar y olvidarte. Solo cambia tu clave API y listo:

javascript

// Chatbot Flotante Perplexity

const APY_KEY = 'TU_CLAVE'; // <-- Pon tu clave aquí

document.addEventListener('DOMContentLoaded', () => {

const chatBoton = document.createElement('div');

chatBoton.innerHTML = '💬 Pregúntame';

chatBoton.style.cssText = 'position:fixed;bottom:20px;right:20px;background:#007bff;color:white;padding:10px 20px;border-radius:20px;cursor:pointer;z-index:9999;';

const chatVentana = document.createElement('div');

chatVentana.style.cssText = 'display:none;position:fixed;bottom:80px;right:20px;width:300px;background:white;border:1px solid #ccc;border-radius:10px;padding:15px;z-index:9999;box-shadow:0 2px 10px rgba(0,0,0,0.1);';

chatVentana.innerHTML = `

<textarea id="mensajeUsuario" style="width:100%;height:60px;margin-bottom:10px;" placeholder="Escribe tu pregunta..."></textarea>

<button id="enviarBtn" style="width:100%;background:#28a745;color:white;border:none;padding:10px;border-radius:5px;">Enviar</button>

<div id="respuestaChat" style="margin-top:10px;font-size:14px;"></div>

`;

document.body.appendChild(chatBoton);

document.body.appendChild(chatVentana);

chatBoton.onclick = () => {

chatVentana.style.display = chatVentana.style.display === 'none' ? 'block' : 'none';

};

document.getElementById('enviarBtn').onclick = async () => {

const mensaje = document.getElementById('mensajeUsuario').value;

const respuestaDiv = document.getElementById('respuestaChat');

respuestaDiv.innerHTML = 'Pensando...';

try {

const respuesta = await fetch('https://api.perplexity.ai/chat/completions', {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'Authorization': 'Bearer ' + APY_KEY

},

body: JSON.stringify({

model: 'sonar-small',

messages: [

{ role: 'system', content: 'Eres un asistente de una web. Responde corto y claro.' },

{ role: 'user', content: mensaje }

],

max_tokens: 100

})

});

const data = await respuesta.json();

respuestaDiv.innerHTML = data.choices[0].message.content;

} catch (error) {

respuestaDiv.innerHTML = 'Error: revisa tu clave API';

}

};

});

¿Merece la pena?

Tío, te soy honesto: para tráfico bajo y medio, esto es oro puro. Gratis, sin límites de usuarios concurrentes y con respuestas que parecen humanas. Cuando tu web crezca, ya podrás plantearte el plan de pago (que por cierto, es de los más baratos del mercado). Pero para empezar, esto te saca de un apuro enorme sin tocar un duro.

Eso sí, no te olvides de añadir un disclaimer sobre la privacidad, que Google te penaliza si no lo haces.

Y tú, colega... ¿qué usas para responder a tus visitantes? ¿Otro truco bajo la manga? Cuéntamelo en los comentarios.