You can easily add the chat widget to your website. Just copy the provided widget script and paste it anywhere between the <body> and </body> tags of your HTML file.
Widget Setup
The following video shows how to inject the widget script into any webpage.
You can customize the widget with the following options:
Chatbot.init({
chatflowid: "your-chatflowid-here",
apiHost: "http://localhost:3000",
chatflowConfig: {
// Sobrescribe la configuración del flujo de chat
systemMessagePrompt: "You are a helpful AI assistant",
temperature: 0,
// ... otras configuraciones
},
theme: {
button: {
backgroundColor: "#3B81F6",
right: 20,
bottom: 20,
size: "medium",
iconColor: "white",
customIconSrc: "https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg",
// Opciones de tamaño: "small" | "medium" | "large"
},
chatWindow: {
welcomeMessage: "¡Hola! ¿En qué puedo ayudarte?",
backgroundColor: "#ffffff",
height: 700,
width: 400,
fontSize: 16,
poweredByTextColor: "#303235",
botMessage: {
backgroundColor: "#f7f8ff",
textColor: "#303235",
showAvatar: true,
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png",
},
userMessage: {
backgroundColor: "#3B81F6",
textColor: "#ffffff",
showAvatar: true,
avatarSrc: "https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png",
},
textInput: {
placeholder: "Escribe tu pregunta",
backgroundColor: "#ffffff",
textColor: "#303235",
sendButtonColor: "#3B81F6",
maxChars: 50,
maxCharsWarningMessage: "Has excedido el límite de caracteres. Por favor, ingresa menos de 50 caracteres.",
autoFocus: true, // Si no se usa, el autofocus está deshabilitado en móvil y habilitado en escritorio. true lo habilita en ambos, false lo deshabilita en ambos.
sendMessageSound: true,
// sendSoundLocation: "send_message.mp3", // Si no se usa, se reproducirá el efecto de sonido por defecto si sendSoundMessage es true.
receiveMessageSound: true,
}
}
}
})
Variables de Entorno
To enable the widget on your website, you need to configure the following environment variables:
