Widget do chatbot Gaia

Visão geral

Este widget gaia chatbot é uma solução leve e personalizável para incorporar uma interface de chat alimentada por IA em qualquer página web. Fornece uma forma interactiva para os utilizadores interagirem com o seu assistente de IA, melhorando a experiência do utilizador e fornecendo apoio ou informações instantâneas.

informação

O código-fonte completo e as instruções detalhadas para configurar e executar este exemplo podem ser encontrados no repositório Gaia Cookbook.

Caraterísticas

• Fácil de incorporar em qualquer página HTML
• Aspeto personalizável para corresponder ao design do seu sítio Web
• Suporta formatação de código e markdown nas respostas
• Conceção reactiva para computadores e dispositivos móveis
• Comportamento e aspeto configuráveis do chatbot

Instalação

1. Inclua o script do chatbot no seu ficheiro HTML:

<script src="https://cdn.jsdelivr.net/gh/harishkotra/embeddadble-chatbot-ui@refs/heads/main/chatbot-widget.js"></script>

2. Adicione o objeto de configuração à sua página:

<script>
    window.CHATBOT_CONFIG = {
        apiKey: "YOUR_API_KEY",
        apiUrl: "https://YOUR_NODE_ID.gaia.domains/v1/chat/completions",
        botTitle: "AI Assistant",
        welcomeMessage: "Hello! How can I assist you today?",
        placeholderText: "Type your message here...",
        brandColor: "#000000",
        chatHeaderBackground: "#ffffff",
        chatHeaderTextColor: "#000000",
        chatBubbleBackgroundUser: "#000000",
        chatBubbleTextColorUser: "#ffffff",
        chatBubbleBackgroundBot: "#f2f2f2",
        chatBubbleTextColorBot: "#000000",
        systemMessage: "You are a helpful assistant.",
        maxResponseTokens: 1000,
        temperatureValue: 0.7,
        suggestedQuestions: [
            "What services do you offer?",
            "How can I contact support?",
            "Tell me about your company"
        ]
    };
</script>

3. O widget do chatbot será automaticamente inicializado e aparecerá na sua página.

Opções de configuração

Opção	Tipo	Descrição	Predefinição
apiKey	Cordas	A sua chave API para autenticação	Necessário
apiUrl	Cordas	O URL do ponto de extremidade para a API de conclusão do chat	Necessário
botTitle	Cordas	O título apresentado no cabeçalho do chat	"Assistente de IA"
welcomeMessage	Cordas	A mensagem inicial apresentada pelo bot	"Olá! Em que posso ajudar-vos hoje?"
espaço reservadoTexto	Cordas	Texto do espaço reservado para o campo de entrada	"Escreva aqui a sua mensagem..."
marcaCor	Cordas	Cor primária para o chatbot (HEX)	"#000000"
chatHeaderBackground	Cordas	Cor de fundo do cabeçalho da conversação (HEX)	"#ffffff"
chatHeaderTextColor	Cordas	Cor do texto do cabeçalho da conversação (HEX)	"#000000"
chatBubbleBackgroundUser	Cordas	Cor de fundo das bolhas de mensagens do utilizador (HEX)	"#000000"
chatBubbleTextColorUser	Cordas	Cor do texto das bolhas de mensagens do utilizador (HEX)	"#ffffff"
chatBubbleBackgroundBot	Cordas	Cor de fundo das bolhas de mensagens do bot (HEX)	"#f2f2f2"
chatBubbleTextColorBot	Cordas	Cor do texto das bolhas de mensagens do bot (HEX)	"#000000"
mensagem do sistema	Cordas	Mensagem inicial do sistema para definir o comportamento do bot	"És um assistente útil".
maxResponseTokens	Número	Número máximo de tokens na resposta do bot	1000
valor da temperatura	Número	Aleatoriedade das respostas do bot (0-1)	0.7
Perguntas sugeridas	Matriz	Lista de sugestões de perguntas a apresentar	[]

Compatibilidade com o navegador

Este widget é compatível com os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. O Internet Explorer não é suportado.

informação

O código-fonte completo e as instruções detalhadas para configurar e executar este exemplo podem ser encontrados no repositório Gaia Cookbook.