Todos os componentes · Categoria: Calculadoras

Orçamento em etapas

Quatro passos, uma estimativa ao vivo e um pedido de orçamento.

Conduz o visitante pelo projeto, pelos extras e por uma opção de urgência, mostra uma estimativa pelo caminho e envia o pedido com consentimento.

Experimente

<quote-wizard>

VisãoPréviaCódigoCSS

quote-wizard: quatro passos, uma estimativa ao vivo e um pedido de orçamento. Uma imagem do componente real, desenhada a partir do próprio código. Os controles mudam a imagem e o código ao lado; nada aqui é enviado nem guardado.

Gerado a partir do manifesto do componente e dos valores acima.

index.html

<quote-wizard currency="USD" locale="en"></quote-wizard>

<script>
  const element = document.querySelector("quote-wizard");
  element.addEventListener("quote-wizard:step", (event) => {
    console.log(event.detail);
  });
  element.addEventListener("quote-wizard:submitted", (event) => {
    console.log(event.detail);
  });
</script>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

taggor-component.js

const element = document.createElement("quote-wizard");
element.setAttribute("currency", "USD");
element.setAttribute("locale", "en");
element.addEventListener("quote-wizard:step", (event) => {
  console.log(event.detail);
});
element.addEventListener("quote-wizard:submitted", (event) => {
  console.log(event.detail);
});
document.body.append(element);

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

QuoteWizard.tsx

import { useEffect, useRef } from "react";

export function QuoteWizard() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onStep = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quote-wizard:step", onStep);
    const onSubmitted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quote-wizard:submitted", onSubmitted);
    return () => {
      element.removeEventListener("quote-wizard:step", onStep);
      element.removeEventListener("quote-wizard:submitted", onSubmitted);
    };
  }, []);

  return <quote-wizard ref={ref} currency="USD" locale="en" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 18 manda toda prop de um custom element como atributo de texto.
O evento é ouvido com addEventListener, dentro de um efeito.

QuoteWizard.tsx

import { useEffect, useRef } from "react";

export function QuoteWizard() {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;
    const onStep = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quote-wizard:step", onStep);
    const onSubmitted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    element.addEventListener("quote-wizard:submitted", onSubmitted);
    return () => {
      element.removeEventListener("quote-wizard:step", onStep);
      element.removeEventListener("quote-wizard:submitted", onSubmitted);
    };
  }, []);

  return <quote-wizard ref={ref} currency="USD" locale="en" />;
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O React 19 define uma propriedade quando o elemento já a tem e um atributo no resto.
O evento é ouvido com addEventListener, dentro de um efeito.

src/QuoteWizard.vue

<script setup lang="ts">
function onStep(event: Event) {
  console.log((event as CustomEvent).detail);
}

function onSubmitted(event: Event) {
  console.log((event as CustomEvent).detail);
}
</script>

<template>
  <quote-wizard
    currency="USD"
    locale="en"
    @quote-wizard:step="onStep"
    @quote-wizard:submitted="onSubmitted"
  />
</template>

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "quote-wizard",
        },
      },
    }),
  ],
});

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O vite.config.ts avisa o Vue de que esta tag não é um componente Vue.

src/app/quote-wizard.component.ts

import { afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ElementRef, inject } from "@angular/core";

@Component({
  selector: "app-quote-wizard",
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <quote-wizard currency="USD" locale="en"></quote-wizard>
  `,
})
export class QuoteWizardComponent {
  constructor() {
    const host = inject<ElementRef<HTMLElement>>(ElementRef);
    const element = () => host.nativeElement.querySelector("quote-wizard");
    const onStep = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("quote-wizard:step", onStep));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("quote-wizard:step", onStep));
    const onSubmitted = (event: Event) => {
      console.log((event as CustomEvent).detail);
    };
    afterNextRender(() => element()?.addEventListener("quote-wizard:submitted", onSubmitted));
    inject(DestroyRef).onDestroy(() => element()?.removeEventListener("quote-wizard:submitted", onSubmitted));
  }
}

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.
O componente declara CUSTOM_ELEMENTS_SCHEMA.
O evento é ouvido com addEventListener, dentro de um efeito.

src/TaggorComponent.svelte

<script>
  function onStep(event) {
    console.log(event.detail);
  }

  function onSubmitted(event) {
    console.log(event.detail);
  }
</script>

<quote-wizard
  currency="USD"
  locale="en"
  onquote-wizard:step={onStep}
  onquote-wizard:submitted={onSubmitted}
></quote-wizard>

Adicione o script do Taggor do site uma vez; o componente aparece quando ele carrega.

Como um agente leva um componente assim a um site:

taggor checktaggor publish

As variáveis CSS que o componente expõe, definidas como a página de um cliente faria.

styles.css

quote-wizard {
  --qw-radius: 10px;
}

Props

Props do componente, lidas do manifesto dele
Prop	Tipo	Padrão	O que faz
headline	string	nenhum	Replaces the default heading.
accent	color	nenhum	Accent color of the bar, the choices and the buttons.
services	list	[{"id":"landing","label":"Landing page","descri…	The projects the visitor can pick (sample prices, set your own).
extras	list	[{"id":"copy","label":"Copywriting","price":350…	Optional add-ons; `forService` limits one to a project id.
rushPercent	number 0 to 100	25	Surcharge of the rush schedule; 0 hides the option.
currency	USD \| EUR \| BRL	USD	–
hideEstimate	boolean	false	Leaves every price out of the screens.
privacyPolicy	url	nenhum	Link to the site's privacy policy.
locale	pt-BR \| en	en	–

Os nomes e as descrições das props são os do próprio componente, em inglês, como o autor escreveu.

Eventos

Eventos do componente, lidos do manifesto dele
Evento	Quando dispara
step	The visitor moved to another step.
submitted	The quote request was accepted by Taggor.

Construa um com o seu agente

Cole no seu agente. Ele pergunta a você antes de entrar na conta, pagar ou ir além de verificar e publicar.

Construa para mim um componente do Taggor como "Orçamento em etapas" (quote-wizard): Quatro passos, uma estimativa ao vivo e um pedido de orçamento. Busque https://taggor.dev/agent-setup/prompt.md e siga as instruções de lá para me configurar para o Taggor. Pergunte-me antes de entrar na conta, criar uma conta, aceitar termos, pagar qualquer coisa ou digitar um segredo. Verifique com `taggor check` e publique com `taggor publish`, e pare por aí. Não promova para produção, não anexe a um site, não faça rollback nem use --yes, --force ou --force-drop-invalid, a menos que eu peça exatamente isso nesta conversa.

Componentes relacionados

Calculadora de orçamento<budget-calculator>
Formulário de contato<contact-form>
Configurador de planos<pricing-configurator>