Para programadores

Componente de chatbot de IA para Vue

Adicione um chatbot de IA a uma aplicação Vue com um pequeno componente que carrega o script da Elfsight uma só vez. Treine e estilize o agente no editor da Elfsight.
Sem cartão de crédito
Ver o código ↓
Componente de chatbot de IA para Vue
Vue
<!-- AiChatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";
const props = defineProps<{ id: string }>();
const SRC = "https://elfsightcdn.com/platform.js";

onMounted(() => {
  if (document.querySelector(`script[src="${SRC}"]`)) return;
  const s = document.createElement("script");
  s.src = SRC;
  s.async = true;
  document.body.appendChild(s);
});
</script>

<template>
  <div :class="`elfsight-app-${props.id}`" data-elfsight-app-lazy />
</template>

Crie gratuitamente o seu agente de IA

  1. 1. Introduza o seu website
  2. 2. Dê forma ao seu agente
  3. 3. Adicione ao website
Construir ou incorporar

Construir você mesmo um chatbot de IA em Vue

Um chatbot de IA é mais do que uma janela de chat e uma chamada a uma API de modelo. Eis o que é preciso para o manter bem — e o que pode dispensar.

O que teria de construir e manter

Um modelo e a sua fatura

Escolher um modelo, lidar com limites de pedidos e ver os custos de tokens crescerem com o tráfego.

O seu conteúdo como respostas

Rastrear o site, dividi-lo e incorporá-lo e manter o índice sincronizado quando as páginas mudam.

A interface do chat

Balões, respostas em streaming, pontos de escrita, disposição móvel e acessibilidade em todas as páginas.

Memória da conversa

Guardar a conversa de cada visitante e devolver o contexto certo dentro do limite de tokens.

Salvaguardas

Manter as respostas no tema, evitar factos inventados e decidir o que nunca deve dizer.

Leads e transferência

Formulários no chat, consentimento e encaminhamento das conversas certas para uma pessoa.

Transcrições e análises

Guardar conversas, enviá-las à equipa por e-mail e ver o que os visitantes perguntam.

Manutenção

Atualizações de modelos, ajuste de prompts, correções de segurança — e alguém de prevenção quando avaria.

Com a Elfsight: um componente

Crie e treine o agente no editor da Elfsight e depois renderize um componente. As respostas, os leads e as definições vivem no seu painel — sem novo deploy para os alterar.
Vue
<AiChatbot id="YOUR-ID" />

  • Aprende automaticamente com o seu website

  • Formulários de leads e transferência para humano integrados

  • Histórico de conversas, transcrições e análises

  • Flutuante ou incorporado, estilizado no editor

  • Plano gratuito, sem cartão de crédito

Integração

Adicione o chatbot de IA a Vue

O componente

  • Carrega o script uma só vez. O componente adiciona o platform.js na primeira montagem e nunca duas vezes.

  • Vue 3 e Nuxt. O mesmo componente funciona no Nuxt — renderize-o no cliente.

  • Flutuante ou incorporado. Coloque um chat flutuante em App.vue uma só vez; um incorporado onde deve aparecer.

Vue
<!-- AiChatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";
const props = defineProps<{ id: string }>();
const SRC = "https://elfsightcdn.com/platform.js";

onMounted(() => {
  if (document.querySelector(`script[src="${SRC}"]`)) return;
  const s = document.createElement("script");
  s.src = SRC;
  s.async = true;
  document.body.appendChild(s);
});
</script>

<template>
  <div :class="`elfsight-app-${props.id}`" data-elfsight-app-lazy />
</template>
Pronto a usar

O que o agente faz sem código seu

Cria-se a partir do seu site

Analisa o seu site para compreender o seu negócio, produtos, serviços e conteúdo, e transforma-o automaticamente num agente de IA.

Cria uma base de conhecimento

Transforma automaticamente o conteúdo do seu site em respostas de IA precisas.

Define uma personalidade

Cria um nome, ícone, função e tom de voz com base no seu negócio.

Prepara a primeira interação

Gera mensagens de boas-vindas e respostas rápidas pensadas para os seus visitantes e objetivos de negócio.

Equipa-se com as competências certas

Adiciona automaticamente captação de leads, botões de ação e outras capacidades com base no seu negócio.

Aprende com as conversas

Deteta conhecimento em falta e ajuda a melhorar as conversas futuras ao longo do tempo.
Comparar

AI Chatbot da Elfsight vs construir sobre uma API de modelo em Vue

Funcionalidade
Elfsight AI Chatbot
A sua própria solução
Tempo até ao lançamento
Minutos: um componente
Semanas de engenharia
Conhecimento
Criado automaticamente a partir do seu website
Rastrear, incorporar e sincronizar por si
Interface do chat
Pronta, estilizada no editor
Construir, testar e manter
Leads e transferência
Formulários de leads e transferência para humano incluídos
Construir formulários, consentimento e encaminhamento
Transcrições e análises
Painel, transcrições por e-mail e relatórios
Construir o armazenamento e os relatórios
Custos
Um plano, com um gratuito para começar
Tokens do modelo, alojamento e o tempo da sua equipa
Manutenção
A Elfsight mantém-no a funcionar
A sua equipa

Tempo até ao lançamento

AI Chatbot

Minutos: um componente

A sua própria solução

Semanas de engenharia

Conhecimento

AI Chatbot

Criado automaticamente a partir do seu website

A sua própria solução

Rastrear, incorporar e sincronizar por si

Interface do chat

AI Chatbot

Pronta, estilizada no editor

A sua própria solução

Construir, testar e manter

Leads e transferência

AI Chatbot

Formulários de leads e transferência para humano incluídos

A sua própria solução

Construir formulários, consentimento e encaminhamento

Transcrições e análises

AI Chatbot

Painel, transcrições por e-mail e relatórios

A sua própria solução

Construir o armazenamento e os relatórios

Custos

AI Chatbot

Um plano, com um gratuito para começar

A sua própria solução

Tokens do modelo, alojamento e o tempo da sua equipa

Manutenção

AI Chatbot

A Elfsight mantém-no a funcionar

A sua própria solução

A sua equipa

Perguntas frequentes