Calculadora de energia solar para o seu site

Como funciona

Três peças, meia hora de trabalho

O formulário e o script da página

Cole no seu site e troque o endereço da rota pelo seu. O exemplo é o mesmo da documentação, seção "Calculadora no seu site".

<!-- Calculadora no seu site. A chave NUNCA vai no navegador:
     o formulario chama o SEU backend, e o seu backend chama a ionluz. -->
<form id="calc">
  <input name="consumo" type="number" placeholder="Consumo mensal (kWh)" required>
  <select name="uf"><option>SP</option><option>MG</option><option>RJ</option></select>
  <button>Simular economia</button>
</form>
<p id="resultado"></p>
<script>
document.getElementById("calc").onsubmit = async (e) => {
  e.preventDefault();
  const f = e.target;
  // /minha-cotacao e uma rota SUA, que injeta a chave e repassa para a ionluz
  const r = await fetch("/minha-cotacao", {
    method: "POST", headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ consumoKwhMes: +f.consumo.value, uf: f.uf.value }),
  });
  const { orcamento } = await r.json();
  document.getElementById("resultado").textContent =
    "Sistema de " + orcamento.potenciaKwp + " kWp, economia de R$ " +
    orcamento.economiaMes1 + " por mes.";
};
</script>

A rota no seu servidor

É aqui que a chave entra. Guarde em variável de ambiente e devolva ao navegador só o que a página vai mostrar.

// /minha-cotacao no SEU servidor (Node, Next, Express, o que voce usa)
export async function POST(req) {
  const { consumoKwhMes, uf } = await req.json();
  const r = await fetch("https://app.ionluz.com.br/api/v1/quote", {
    method: "POST",
    headers: {
      "Authorization": "Bearer " + process.env.IONLUZ_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ consumoKwhMes, uf, preview: true }),
  });
  const { orcamento } = await r.json();
  // devolve so o que a pagina precisa mostrar
  return Response.json({ orcamento });
}

A resposta completa, os códigos de erro e os cabeçalhos de limite estão na documentação da API.

De cotação a lead

Quando o visitante quiser falar, grave a proposta

A mesma chamada, com preview: false e consent: true, grava a proposta, cria o lead no seu painel com consumo e contato, e devolve o link do PDF público para você mandar no WhatsApp. O consentimento fica registrado com data e versão do texto, como a LGPD pede.

Se você prefere não mexer no seu site, a página de captação já entrega isso pronta em um endereço só seu.