Guia de Integração

Calculadora de Aluguel Alugue Hoje

Visão Geral

A Calculadora de Aluguel é uma ferramenta que permite aos seus clientes calcularem estimativas de valores de aluguel baseadas em diversos parâmetros do imóvel. A ferramenta é totalmente responsiva e se adapta a diferentes tamanhos de tela.

Requisitos Técnicos

  • Seu site deve utilizar protocolo HTTPS
  • Espaço mínimo de 320px de largura no local de implementação
  • Conexão com internet para carregar os recursos necessários

Implementação Básica

1. Adicione os recursos necessários

Insira os seguintes códigos no <head> do seu site:

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="rental-calculator.css">

2. Adicione o container da calculadora

Insira este código HTML onde você deseja que a calculadora apareça:

<div id="calculadora"></div>

3. Inicialize a calculadora

Adicione estes scripts antes do fechamento da tag </body>:

<script>window.process = { env: { NODE_ENV: 'production' } };</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="rental-calculator.js"></script>
<script>
  window.addEventListener('load', function() {
    if (window.RentalCalculator) {
      RentalCalculator.init('calculadora', {
        companyId: 'sua-imobiliaria',     // Seu identificador único
        theme: 'light',                    // 'light' ou 'dark'
        primaryColor: '#seu-codigo-de-cor' // Cor principal da sua marca
      });
    } else {
      console.error('RentalCalculator não foi carregado corretamente');
    }
  });
</script>

Personalização

Opções de Configuração

Opção Tipo Descrição Valores Possíveis
companyId String Identificador único da sua imobiliária Fornecido pelo Alugue Hoje
theme String Tema da calculadora 'light' ou 'dark'
primaryColor String Cor principal em formato hexadecimal Ex: '#FF0000', '#2563eb'

Exemplos de Implementação

Disponibilizamos diferentes modelos de implementação que você pode usar como referência:

Layout Básico

Implementação simples e direta

🏠
<div id="calculadora"></div>
Ver exemplo completo

Layout Premium

Design elegante com hero section

<div id="calculadora"></div>
Ver exemplo completo

Layout Portal

Template com sidebar e navegação

🏢
<div id="calculadora"></div>
Ver exemplo completo

Layout Startup

Design moderno com gradientes

🚀
<div id="calculadora"></div>
Ver exemplo completo

Suporte

Para obter suporte técnico ou esclarecer dúvidas: