Para programadores

Componente de chatbot de IA para Angular

Adicione um chatbot de IA a uma aplicação Angular com um componente standalone 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 Angular
Angular
// ai-chatbot.component.ts
import { Component, Input, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

const SRC = "https://elfsightcdn.com/platform.js";

@Component({
  selector: "app-ai-chatbot",
  standalone: true,
  template: `<div [class]="'elfsight-app-' + id" data-elfsight-app-lazy></div>`,
})
export class AiChatbotComponent implements OnInit {
  @Input({ required: true }) id!: string;
  constructor(@Inject(DOCUMENT) private doc: Document) {}

  ngOnInit() {
    if (this.doc.querySelector(`script[src="${SRC}"]`)) return;
    const s = this.doc.createElement("script");
    s.src = SRC;
    s.async = true;
    this.doc.body.appendChild(s);
  }
}

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 Angular

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.
Angular
<app-ai-chatbot 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 Angular

O componente

  • Componente standalone. Importe-o onde precisar — sem módulo para registar.

  • Compatível com SSR. Acede ao documento através do token DOCUMENT do Angular.

  • Flutuante ou incorporado. Coloque um chat flutuante no componente da aplicação uma só vez; um incorporado onde deve aparecer.

Angular
// ai-chatbot.component.ts
import { Component, Input, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";

const SRC = "https://elfsightcdn.com/platform.js";

@Component({
  selector: "app-ai-chatbot",
  standalone: true,
  template: `<div [class]="'elfsight-app-' + id" data-elfsight-app-lazy></div>`,
})
export class AiChatbotComponent implements OnInit {
  @Input({ required: true }) id!: string;
  constructor(@Inject(DOCUMENT) private doc: Document) {}

  ngOnInit() {
    if (this.doc.querySelector(`script[src="${SRC}"]`)) return;
    const s = this.doc.createElement("script");
    s.src = SRC;
    s.async = true;
    this.doc.body.appendChild(s);
  }
}
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 Angular

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