Conteúdo

O tutorial em vídeo, #2, #3

Documentação Calculoid para desenvolvedores

Como criar, salvar e excluir uma calculadora

Como adicionar e remover um campo

Design de calculadora e design de campo

Tipos disponíveis de campos

Campos condicionais

Como configurar uma calculadora

Como integrar uma calculadora

Como integrar o Google Analytics

Como preencher dados na calculadora

Como incorporar uma calculadora

estatística

Como criar, salvar e excluir uma calculadora

O Calculoid.com é um aplicativo da Web JavaScript simples e estático que usa a estrutura do AngularJS para ser executado. É uma aplicação pesada em comparação com o aplicativo incorporado, cujo objetivo principal é ser uma biblioteca pública para calculadoras e um poderoso editor de calculadoras. Para mais informações sobre a Calculoid, por favor leia "Como funciona a Calculoid?".

Para criar uma nova calculadora, navegue até "Lista de calculadoras"no menu principal e clique em"Nova calculadora"botão no canto superior direito. No primeiro passo (escolha o seu modelo), selecione o modelo da sua calculadora (em branco, preços, ROI, custo, etc.).

Calculoid.com

Na segunda etapa (configurações básicas da calculadora), digite o nome da calculadora, descrição, idioma, tags e clique no botão "Salvar configuração"botão. Você será levado ao assistente do prédio, onde poderá adicionar campos à sua calculadora.

Calculoid.com

Para salvar as alterações feitas na sua calculadora, use o botão verde "Salvar Calc"no canto superior direito.

Para excluir uma calculadora, vá para o "Configuração"desloque-se para baixo e para baixo, onde encontra"Excluir calculadora"opção.

Como adicionar e remover um campo

Em "Adicionar"guia, escolha um campo para adicionar - slider / caixa de rádio / campo de texto / fórmula / caixa de seleção / enviar resultados / pagamentos / html / textarea / gauge. No"Editar"guia, edite o campo específico.

Para apagar um campo da sua calculadora, clique em "Editar"(um ícone de caneta) no campo específico e depois o"Editar"guia será aberta no lado esquerdo e lá você vai encontrar"Remover campo"opção.

Calculoid.com

As configurações básicas são as mesmas para todos os tipos de campos:

  • nome do campo - nomeie o campo e escolha se deseja exibir o nome e se deseja exibir o campo ao público
  • Casas decimais - escolha quantas casas decimais mostrar
  • Insinuar - sugestão de campo
  • Prefixo - adicione um prefixo como% ou uma moeda
  • Postfix - adicione um postfix como% ou uma moeda

Calculoid.com

Design de calculadora e design de campo

Existem duas configurações de design no Calculoid - uma para a calculadora inteira e a segunda para cada campo da calculadora. O design da calculadora pode ser configurado Config> Design, Respectivamente Config> design avançado. O projeto de campo pode ser configurado em Editar campo> Design. Se o design do campo estiver configurado, ele anulará a configuração do design da calculadora. Se o design do campo não estiver configurado, o design da calculadora também se aplica ao campo.

Calculoid.com

Tipos disponíveis de campos

Slider - campo variável, os usuários definem o valor da variável, deslizando o ponteiro na barra.

O campo Slider é uma ótima opção se você tiver que saber o valor máximo e mínimo desse campo. Por exemplo, se você quiser permitir que um usuário selecione uma porcentagem, você sabe que o valor mínimo é 0 e o valor máximo é 100%. Esse campo é um elemento interativo interessante para toda a calculadora, pois permite que o usuário arraste e solte o ponteiro ou selecione um valor com apenas um clique ou toque, pois esse campo também é otimizado para dispositivos móveis.

opções:

  • Valor mínimo: O valor mínimo que um usuário pode selecionar. 0 por padrão.
  • Valor máximo: O valor máximo que um usuário pode selecionar. 100 por padrão.
  • Degrau: O passo que o controle deslizante pode selecionar. Por exemplo, se você tiver um controle deslizante de 0 para 1.000.000, poderá permitir que um usuário selecione apenas milhares completos, selecionando a etapa para ser 1000. 1 por padrão.
  • Valor padrão: O valor padrão que um usuário verá quando a calculadora for carregada pela primeira vez.
  • Escala: O campo do controle deslizante pode exibir uma escala abaixo do controle deslizante. Preencha os valores da escala separados por caractere de vírgula. Por exemplo: 25,50,75. Se você quiser exibir alguns rótulos em vez dos números reais, adicione os rótulos como este: 25: baixo, 50: médio: 75: alto.

Calculoid usa esta biblioteca de código aberto para sliders.

Calculoid.com

Radio Box - campo variável, os usuários selecionam um valor / opção da lista definida.

opções:

  • nova Opção - adicionar uma nova opção para selecionar
  • Nome da opção - um nome da opção
  • Valor da Opção - um valor oculto da opção, como preço (deve ser numérico e exclusivo para cada opção)

Configuração do campo de rádio:

  • Valor padrão - um valor pré-selecionado por padrão quando a calculadora é carregada (a opção com este valor será pré-selecionada)
  • colunas - um número de colunas para mostrar as opções

Calculoid.com

Campo de texto - campo variável, os usuários inserem manualmente o valor da variável no campo de texto.

Configuração de campo de texto:

  • Valor padrão - Um valor pré-preenchido por padrão, como string de texto ou número
  • É necessário? - Sim / Não - Selecione se o campo deve ser preenchido
  • tipo de campo - Texto / Número / E-mail / Telefone / Outros
  • Corda de Força - Sim / Não - Qualquer entrada inserida no campo será do tipo de dados string, incluindo números, para impedir a alteração automática da formatação quando ela é indesejável (como números de contas bancárias, números de identificação pessoal, números de previdência social, etc.)

Para mais informações sobre o campo de texto, por favor leia:

Calculoid.com

Fórmula - campo de resultado, o administrador define como as variáveis ​​são calculadas. Os usuários veem o resultado.

Uma fórmula é um algoritmo que deriva seu valor de outros campos, expressões ou valores. As fórmulas podem ajudá-lo a calcular automaticamente o valor de um campo com base em outros campos. Para mais informações sobre a Formula, por favor leia:

Calculoid.com

Caso de uso do campo Fórmula - caixa Comentários predefinidos com base em um valor de campo

Usando o campo Fórmula com a função "adicionar" na fórmula, você pode criar uma caixa de Comentários prática que mostre um dos comentários predefinidos com base no valor de outro campo. Aqui está um exemplo:

  • No campo Peso, você inseriu um valor menor que 60 kg. → Ele automaticamente mostrará um comentário "Você inseriu peso XX kg e isso significa que você é magro".
  • No campo Peso, você inseriu um valor entre 60-90 kg. → Ele automaticamente mostrará um comentário "Você é um cara normal porque seu peso é XX kg".
  • No campo Peso, você inseriu um valor maior que 90 kg. → Ele mostrará automaticamente um comentário "Coma menos porque seu peso é XX kg".

Abaixo você pode ver uma fórmula de exemplo e os dois campos em Calculoid.

Calculoid.com

Caixa de seleção - campo variáveis, os usuários selecionam mais opções / valores da lista definida.

Configuração do campo de caixa de seleção:

  • Valor se marcado - um valor numérico do campo quando marcado
  • Valor se desmarcado - um valor numérico do campo quando desmarcado

Calculoid.com

Enviar resultados - campo de conversão, um resultado do cálculo pode ser enviado em e-mail enviado.

Detalhes do email:

  • Envie os resultados também para - inserir endereço de e-mail os resultados também serão enviados para (além do endereço de e-mail fornecido pelo usuário da calculadora)
  • Enviar por email
  • Nome do remetente
  • Assunto
  • Redirecionar - insira o URL para redirecionar
  • Enviar email - Sim / Não - se sim, o email será enviado para o endereço introduzido em "Enviar resultados também para", caso contrário, nenhum email será enviado para o endereço
  • Enviar para o cliente - Sim / Não - se sim, o email será enviado para o endereço fornecido pelo usuário da calculadora, caso contrário nenhum email será enviado para o endereço

Para mais informações sobre Enviar Resultados, por favor leia "Crie um email de resultado com os menores detalhes".

Calculoid.com

Pagamentos - campo de conversão, os usuários podem pagar valores calculados na conta do administrador

Métodos de pagamento disponíveis:

  • PayPal
  • Cartão de crédito
  • Fatura / transferência bancária

Detalhes do pagamento:

  • Enviar informações sobre o pedido para - inserir endereço de e-mail, as informações também serão enviadas para (além do endereço de e-mail fornecido pelo usuário da calculadora)
  • Moeda - selecione uma moeda na lista
  • Campo de preço - escolha um campo com informações de preço
  • Redirecionar - insira o URL para redirecionar
  • Assunto do email
  • E-mail Enviar de
  • Nome do remetente
  • Portão de pagamento padrão - PayPal / Stripe
  • Enviar email - Sim / Não - se sim, o email será enviado para o endereço introduzido em "Enviar resultados também para", caso contrário, nenhum email será enviado para o endereço
  • Enviar para o cliente - Sim / Não - se sim, o email será enviado para o endereço fornecido pelo usuário da calculadora, caso contrário nenhum email será enviado para o endereço

Informações de pagamento:

  • Mostrar informações de faturamento? - Sim não

Variáveis ​​disponíveis:

  • {montante} - O valor numérico do campo que você selecionou para receber o pagamento.
  • {moeda} - A moeda que você selecionou.

Calculoid.com

Recorrência de pagamento:

Esse recurso permite repetir um pagamento automaticamente em um ciclo / período recorrente definido. Vou ao "Editar campo"menu de um"pagamentos"campo. Aqui abra o"Recorrência de pagamento"sub-menu. Para que a recorrência do pagamento funcione, você precisa definir os seguintes campos:

  • Ativar pagamentos recorrentes - padrão - Selecione Sim ou Não para ativar / desativar pagamentos recorrentes para esse campo por padrão.
  • Ativar pagamentos recorrentes - substituição de campo - Selecione o campo que controla se o recorrente está habilitado. O valor do campo 1 para ativado, qualquer outro valor significa desativado. Isso dá ao usuário a liberdade de se decidir e sobrepõe a configuração padrão acima definida.
  • Ciclo recorrente - padrão - Selecione a unidade de tempo para o período recorrente (dias, semanas, meses ou anos).
  • Ciclo recorrente - substituição de campo - Selecione o campo que contém o ciclo recorrente. O valor do campo deve ser um dos seguintes caracteres: D, W, M, Y. Isso dá ao usuário a liberdade de se decidir e sobrepõe a configuração padrão acima definida.
  • Período Recorrente - default - insira o número de ciclos entre os pagamentos.
  • Período Recorrente - substituição de campo - Selecione qual campo mantém o período recorrente. O valor do campo deve ser um número positivo (inteiro). Isso dá ao usuário a liberdade de se decidir e sobrepõe a configuração padrão acima definida.

Os detalhes sobre os pagamentos realizados também podem ser encontrados em Detalhes> Submissões menu da calculadora com o campo de pagamento. Além disso, se você tiver sua calculadora integrada a um sistema externo (como Mautic, Redmine ou outros), um pagamento realizado pode ser configurado para criar automaticamente um caso de CRM no sistema.

Calculoid.com

Se você tiver o seu Calculoid integrado com sistemas de terceiros, há uma opção para também repetir execuções dessas integrações com cada recorrência de pagamento. Por exemplo, quando um pagamento padrão é configurado para criar automaticamente uma nova tarefa ou caso de CRM, outra tarefa ou caso de CRM será criado a cada repetição do pagamento. Para definir essa configuração, vá para a guia "Integrar" no menu superior, selecione "Outro" na barra lateral esquerda e ative a opção "Integrações de pagamentos recorrentes".

Calculoid.com

Variáveis ​​especiais estão disponíveis no contexto de recorrência de pagamento. Estes podem ser usados ​​com modelos de email ou outras entidades com variáveis ​​aplicáveis.

Calculoid.com

Para mais informações sobre pagamentos, leia:

Campo de descrição HTML, serve para inserir qualquer HTML na calculadora.

O campo HTML é limitado por aproximadamente caracteres 3000. Para reduzir o número efetivo de caracteres, remova os estilos de fonte HTML (cor, tamanho ...) do texto.

Calculoid.com

Textarea - usuário da calculadora pode digitar uma mensagem antes de enviar seu resultado.

Configuração do campo de texto:

  • Altura Textarea - insira um valor em pixels
  • Mostrar contagem de palavras - Sim não

Calculoid.com

Medidor - um gráfico que se parece com um tacômetro pode exibir o valor de qualquer campo.

Configuração do medidor:

  • Exibir valor do campo - selecione um campo na lista
  • Largura Máxima do Medidor - insira um valor em pixels
  • Valor Mínimo
  • Max Valor
  • Caras Principais - o número de marcas principais no indicador
  • Carrapatos Menores - o número de marcas de escala menores no medidor
  • Verde De + Verde para - o intervalo de valores para a cor verde no medidor
  • Amarelo De + Amarelo para - o intervalo de valores para a cor amarela no medidor
  • Vermelho De + Vermelho para - o intervalo de valores para a cor vermelha no medidor

Calculoid.com

Gráfico de pizza - um gráfico de círculo para ilustrar a proporção numérica

Um gráfico de pizza (ou um gráfico circular) é um gráfico estatístico circular, que é dividido em ilustrar a proporção numérica. Em um gráfico de pizza, o comprimento do arco de cada fatia (e conseqüentemente seu ângulo central e área) é proporcional à quantidade que representa.

Configuração do gráfico:

  • Nova linha - adicionar uma nova linha no gráfico de pizza
  • Nome da linha - insira um nome da linha
  • Valor da linha - selecione qualquer campo para obter o valor numérico
  • Altura + Largura - permite alterar as dimensões padrão do gráfico de pizza

Calculoid.com

Selecione o campo - Um menu suspenso com opções ilimitadas

Ao contrário do campo caixa de rádio com opções mostradas como caixas de seleção, o campo Selecionar é projetado como um menu suspenso por isso é melhor se adequar às situações em que o número de opções é muito alto. Em "Editar campo> Opções"menu, você pode escolher se deseja adicionar novas opções manualmente ou selecionar uma tabela para importar as opções de. Se você selecionar a segunda opção, verifique se a tabela foi adicionada antes de poder selecionar uma. Para adicionar uma tabela em Calculoid, use o "tabelas"botão no topo da tela. Ao adicionar uma tabela de um arquivo CSVpor favor note que apenas vírgulas (não ponto e vírgula) são suportados como um separador de campo no arquivo.

Selecione o campo com a opção de importação de CSV - Calculoid.com

Este é um exemplo de formato de dados CSV correto.

Selecione o campo com a opção de importação de CSV - Calculoid.com

Campos condicionais

Em Calculoid, a configuração de condições lógicas é usada para mostrar / ocultar campos específicos de uma calculadora. Quando as condições para um campo específico se tornam realidade, o campo é mostrado (campo branco), caso contrário, ele fica oculto (campo cinza). Esse comportamento é prático quando alguns campos em uma calculadora são relevantes apenas quando valores numéricos específicos são inseridos em outros campos (como um controle deslizante, medidor, fórmula ...), ou seja, a entrada de dados é necessária apenas sob condições específicas, mas não de outra forma. Para mais informações sobre campos condicionais, por favor leia "Calculadora Web com campos condicionais".

Calculoid.com

Como configurar uma calculadora

Depois de editar todos os seus campos, continue no "configurar"guia com as seguintes opções:

  • Nome - mudar o nome da calculadora
  • Descrição - edite a descrição da calculadora
  • Língua - escolha o idioma da calculadora
  • tema - escolha o tema de aparência padrão
  • Esquema de cores
  • Tag - marque sua calculadora
  • Está terminado - sua calculadora só aparecerá on-line quando incorporada ao clicar em SIM
  • computador - confira nossa Perguntas frequentes para obter informações sobre calculadoras públicas e privadas
  • Assinatura - confira nossa Perguntas frequentes Para obter informações sobre assinatura, pode ser oculto somente quando você tem uma assinatura paga
  • Notificação
  • separador de milhares
  • Separador decimal

Calculoid.com

Como integrar uma calculadora

No "Integrar"guia, você pode encontrar as integrações disponíveis:

  • webhook
  • Mautic
  • Redmine
  • Fácil Redmine CRM

Calculoid.com

Como integrar o Google Analytics

O Google Analytics só pode acompanhar eventos em campos específicos da calculadora, ou seja, "Enviar resultados"E"pagamentos". Vou ao "Editar campo"menu do respectivo campo. Aqui abra o"Em enviar"sub-menu. Mude o"Enviar evento do Google Analytics?"valor para Sim. Para que os eventos do Google Analytics funcionem, você precisa definir os seguintes campos e também incluir analytics.js na mesma página onde você incorpora sua calculadora. A versão do iframe não é suportada. Os eventos não serão disparados durante a edição ou pré-visualização da calculadora.

  • Categoria de evento do Google Analytics (por exemplo, "Vídeo")
  • Ação do evento do Google Analytics (por exemplo, "play")
  • Etiqueta de evento do Google Analytics (ex: "Campanha do outono")
  • Valor do evento do Google Analytics (por exemplo, 42)

Calculoid.com

Os dados criados por uma atividade nos campos específicos da Calculoid serão exibidos no Google Analytics como eventos com atributos acima definidos.

Calculoid.com

Como preencher dados na calculadora

Existem duas maneiras de preencher os dados na calculadora, por string de consulta de URL ou no atributo ng-init no elemento <div>.

Por atributo ng-init

A configuração de pré-preenchimento é inserida na função ng-init-init () como novo objeto valores (exemplo: valores: {}). Para definir valores individuais, você deve adicionar a chave com o ID do campo e seu valor. (exemplo: valores: {F12345: 'valor de exemplo'} - esta configuração de exemplo preencherá o ID de campo F12345 com 'valor de exemplo'). Então, o próprio código incorporado ficará assim:

<link rel = "stylesheet" href = "http://embed2.calculoid.com/styles/main.css" />
<script src = "http://embed2.calculoid.com/scripts/combined.min.js"> </ script>
<div ng-app = "calculoid" ng-controlador = "CalculoidMainCtrl" ng-init = "init ({calcId: 12345, apiKey: 'xxxxxxxxx', valores: {F12345: 'valor do exemplo'}})" ng-include = "load ()"> </ div>

Não é possível preencher apenas campos de email, slider, rádio, texto, textarea, pagamento e checkbox.

Se for usado campo de pagamento na sua calculadora, é possível pré-preencher todas as informações de cobrança (exceto as caixas de seleção personalizadas) adicionando novo objeto morada para dentro valores {} (exemplo: valores: {faturamento: {}}).

Faturamento inf. para pré-preencher:

endereço, cidade, companyName, país, e-mail, firstname, lastname, oac, telefone, vatid, zip

Exemplo:

<link rel = "stylesheet" href = "http://embed2.calculoid.com/styles/main.css" />
<script src = "http://embed2.calculoid.com/scripts/combined.min.js"> </ script>
<div ng-app="calculoid" ng-controller="CalculoidMainCtrl" ng-init="init({calcId:12345,apiKey:'xxxxxxxxx', values:{ F12345 : 'example value', billing:{address:‘Example address‘, city:‘Example city‘, country:‘US‘, zip:‘111111‘, email:‘This email address is being protected from spambots. You need JavaScript enabled to view it.‘, firstname:‘John‘, lastname:‘Doe‘, oac:true, phone:‘+111123456789‘, companyName:‘Company name‘, vatid:‘GBxxxxxxxx‘} })" ng-include="load()"></div>

oac = Caixa de seleção Order as Company (pode ser apenas verdadeiro or falso)

Por cadeia de consulta de URL

Os dados são inseridos adicionando parâmetros de consulta no formato: field_id = prefilled_value

Exemplo:

http://www.your.domain/index.html?F12345=example%20text&F12346=another%20example%20text

(Nota: os dados devem ser codificados por URL, mais informações)

Variáveis ​​utilizáveis ​​em fórmula

  • FX - valor do campo (exceto email, pagamento e campo HTML) * substitua FX pelo campo ID. Exemplo: F3456
  • BillingFirstname - primeiro nome da informação de cobrança de pagamento
  • BillingLastname - sobrenome das informações de cobrança de pagamento
  • BillingAddress - endereço das informações de cobrança de pagamento
  • BillingCity - cidade a partir das informações de faturamento de pagamento
  • BillingCountry - país das informações de faturamento de pagamento
  • BillingZip - código postal das informações de cobrança de pagamento
  • BillingCompanyName - nome da empresa a partir das informações de faturamento de pagamento
  • BillingVatid - ID do IVA das informações de cobrança de pagamento
  • BillingValidViesVatID - se a validação do ID do IVA por VIES ativou esse var. retorna 1 quando a validação é bem-sucedida, caso contrário, 0
  • PaymentType - retorna qual tipo de pagamento é selecionado (paypal = 1, faixa = 2, fatura = 3)

Variáveis ​​disponíveis para integrações e emails

Alguns tipos de campos (como Enviar Resultados ou Pagamentos) usam modelos de email. Nos modelos, essas variáveis ​​serão substituídas pelos dados reais antes que o email seja enviado. O mesmo se aplica às integrações.

  • {FX: valor} - valor de campo único * substitua FX pelo ID do campo. Exemplo: F3456
  • {FX: name} - nome de campo único * substitua FX pelo ID do campo. Exemplo: F3456
  • {FX: dica} - descrição de campo único * substitua FX pelo ID do campo. Exemplo: F3456
  • {FX: prefixo} - texto de campo único antes do valor * substitua FX pelo ID do campo. Exemplo: F3456
  • {FX: postfix} - texto de campo único após valor * substitua FX pelo ID do campo. Exemplo: F3456
  • {calculatorName} - nome da calculadora
  • {fields} - lista de campos
  • {sourceUrl} - URL da calculadora
  • {description} - descrição da calculadora
  • {userName} - nome da conta do autor
  • {email} - endereço de email do campo Email ou Pagamento
  • {price} - preço do campo Pagamento
  • {currency} - moeda do campo Pagamento
  • {status} - status pament
  • {b illing: firstname } - primeiro nome das informações de cobrança de pagamento
  • {b illing: lastname } - sobrenome das informações de pagamento
  • {b illing: address } - endereço das informações de faturamento de pagamento
  • {b illing: city } - cidade das informações de faturamento de pagamento
  • {b illing: country } - país das informações de faturamento de pagamento
  • {b illing: zip } - código postal das informações de cobrança de pagamento
  • {b illing: companyName } - nome da empresa a partir das informações de faturamento de pagamento
  • {b illing: vatid } - ID do IVA das informações de cobrança de pagamento
  • {submissionId} - ID exclusivo do envio de e-mail ou pagamento (pode ser usado como número de referência para fatura)

Como incorporar uma calculadora

Para incorporar uma calculadora, vá para o "Embutir"table e copie um código HTML:

  • Código HTML sem iFrame - este código adotará o CSS do seu site. Certifique-se de testar o código no CodePen
  • Código HTML com iFrame - Se você tiver algum problema com a formatação ao incorporar a calculadora em seu site, use a segunda opção na qual a calculadora será exibida com a formatação escolhida por Calculoid ao criar sua calculadora.

Para mais informações sobre incorporação, leia "Incorporação de calculadoras da Calculoid".

Calculoid.com

estatística

Para encontrar detalhes de envio e relatórios para uma calculadora específica, vá para o "Detalhes"guia acima da sua calculadora. Para estatísticas globais, clique no ícone do seu perfil no canto superior direito e abra"estatística" item do menu.

  • Submissões - veja todas as submissões feitas através de sua (s) calculadora (s), incluindo pagamentos e pagamentos pendentes
  • Relatórios - veja quantas vezes sua calculadora foi visualizada e quantas submissões foram feitas
    Webhooks

Calculoid.com

Informações adicionais

Comece Free Trial

Crie sua própria calculadora da Web em questão de minutos.
Teste todos os recursos na avaliação gratuita do dia 14.

Comece livre agora

Nenhum cartão de crédito ou instalação necessária

Contatos

Telefone

EUA: + 1 415 800 3787
Reino Unido: + 44 207 097 3577
Horário de atendimento: 9: 00 - 17: 00 UTC + 1

Informação

info@calculoid.com

Suporte

support@calculoid.com

Software fácil Ltd.

Kemp House, 152-160
City Road, EC1V
2NX Londres, Reino Unido
ID da empresa: 08960980
ID do IVA: GB226711521

Centro de desenvolvimento fácil

Jugoslávských partyzánů 34
160 00 Praga
República Checa