内容

视频教程, #2, #3

开发人员的Calculoid文档

如何创建,保存和删除计算器

如何添加和删除字段

计算器设计和现场设计

可用的字段类型

有条件的领域

如何配置计算器

如何集成计算器

如何整合Google Analytics

如何在计算器中预填充数据

如何嵌入计算器

统计学

如何创建,保存和删除计算器

Calculoid.com是纯静态JavaScript Web应用程序,它使用AngularJS框架运行。 与嵌入式应用程序相比,它是一个重量级的应用程序,其主要目标是成为计算器的公共库和强大的计算器编辑器。 有关Calculoid的更多信息,请阅读“Calculoid如何运作?".

要创建新计算器,请导航至“计算器列表“在主菜单中点击”新计算器“右上角的按钮。 在第一步 (选择您的模板),选择计算器的模板(空白,定价,投资回报率,成本等)。

Calculoid.com

在第二步 (基本计算器设置),输入计算器名称,描述,语言,标签,然后单击“保存配置“按钮。您将进入建筑向导,您可以在其中为计算器添加字段。

Calculoid.com

要保存您在计算器中所做的更改,请使用绿色按钮“保存计算“在右上角。

要删除计算器,请转到“配置“标签并向下滚动到您找到的底部”删除计算器“ 选项。

如何添加和删除字段

在“添加“选项卡,选择要添加的字段 - 滑块/收音机框/文本字段/公式/复选框/发送结果/付款/ html / textarea /规格。在”编辑“选项卡,编辑特定字段。

要从计算器中删除字段,请单击“编辑“(笔图标)在特定字段上,然后”编辑“标签将在左侧打开,你会发现”删除字段“ 选项。

Calculoid.com

所有类型的字段的基本设置都相同:

  • 字段名称 - 为该字段命名,并选择是否显示名称以及是否向公众显示该字段
  • 小数位 - 选择要显示的小数位数
  • 提示 - 字段提示
  • 字首 - 添加%或货币等前缀
  • 后缀 - 添加%或货币等后缀

Calculoid.com

计算器设计和现场设计

Calculoid有两种设计配置 - 一种用于整个计算器,另一种用于计算器的每个字段。 可以配置计算器设计 配置>设计, 分别 配置>高级设计。 可以在下配置现场设计 编辑字段>设计。 如果配置了字段设计,则它会否决计算器设计配置。 如果未配置字段设计,则计算器设计也适用于字段。

Calculoid.com

可用的字段类型

滑块 - 变量字段,用户通过在指针上滑动指针来定义变量的值。

如果您必须知道此字段的最大值和最小值,则滑块字段是一个很好的选项。 例如,如果要让用户选择百分比,则表示最小值为0,最大值为100%。 此字段是整个计算器的一个很好的交互元素,因为它允许用户拖放指针或通过单击或触摸选择一个值,因为此字段也针对移动设备进行了优化。

选项:

  • 最小值: 用户可以选择的最小值。 默认情况下为0。
  • 最大价值: 用户可以选择的最大值。 默认情况下为100。
  • 步: 滑块可以选择的步骤。 例如,如果您有一个从0到1.000.000的滑块,则可以让用户通过选择步骤为1000来仅选择全数千。 默认情况下为1。
  • 默认值: 用户首次加载计算器时将看到的默认值。
  • 规模: 滑块字段可以在滑块下方显示刻度。 填写用逗号字符分隔的比例值。 例如:25,50,75。 如果要显示某些标签而不是实际数字,请添加如下标签:25:low,50:medium:75:high。

Calculoid使用 这个开源库 滑块。

Calculoid.com

Radio Box - 变量字段,用户从定义的列表中选择一个值/选项。

选项:

  • 新选择 - 添加新选项以进行选择
  • 选项名称 - 选项的名称
  • 期权价值 - 期权的隐藏价值,例如价格(每个期权应该是数字和唯一的)

无线电场配置:

  • 默认值 - 加载计算器时默认预选的值(具有此值的选项将被预先选择)
  • - 显示选项的多个列

Calculoid.com

文本字段 - 变量字段,用户手动将变量值插入文本字段。

文本字段配置:

  • 默认值 - 默认情况下预填充的值,例如文本字符串或数字
  • 是必须的? - 是/否 - 选择是否必须填写该字段
  • 字段类型 - 文本/号码/电子邮件/电话/其他
  • 强制字符串 - 是/否 - 输入到字段中的任何输入都将是字符串数据类型,包括数字,以防止在不合需要时自动更改格式(例如银行帐号,个人识别码,社会保险号等)

有关文本字段的更多信息,请阅读:

Calculoid.com

公式 - 结果字段,管理员定义如何计算变量。 用户看到结果。

公式是一种从其他字段,表达式或值派生其值的算法。 公式可以帮助您根据其他字段自动计算字段的值。 有关公式的更多信息,请阅读:

Calculoid.com

公式字段的用例 - 基于字段值的预定义注释框

使用公式字段和公式中的“添加”功能,您可以创建一个实用的“注释”框,根据另一个字段的值显示其中一个预定义注释。 这是一个例子:

  • 在“重量”字段中,您输入的值小于60 kg。 →它会自动显示评论“你输入的体重XX公斤,这意味着你很瘦。”
  • 在“重量”字段中,您输入的值介于60-90 kg之间。 →它会自动显示评论“你是一个正常的人,因为你的体重是XX公斤”。
  • 在“重量”字段中,您输入的值大于90 kg。 →它会自动显示评论“少吃,因为你的体重是XX公斤。”

您可以在下面看到示例公式和两个字段 在Calculoid.

Calculoid.com

复选框 - 变量字段,用户从定义的列表中选择更多选项/值。

复选框字段配置:

  • 如果选中则值 - 选中时字段的数值
  • 如果未选中,则为值 - 未选中时字段的数值

Calculoid.com

发送结果 - 转换字段,计算结果可以在提交的电子邮件上发送。

电邮详情:

  • 发送结果也是 - 插入电子邮件地址,结果也将发送到(除了计算器用户提供的电子邮件地址)
  • 从电子邮件发送
  • 发件者姓名
  • 标题
  • 重定向 - 输入要重定向的URL
  • 发送电​​子邮件 - 是/否 - 如果是,电子邮件将被发送到“发送结果”中输入的地址,否则不会向该地址发送电子邮件
  • 发送给客户 - 是/否 - 如果是,电子邮件将被发送到计算器用户提供的地址,否则将不会向该地址发送电子邮件

有关发送结果的更多信息,请阅读“将结果电子邮件制作成最小的细节".

Calculoid.com

付款 - 转换字段,用户可以在管理员帐户中支付计算金额

可用的付款方式:

  • PayPal
  • 信用卡
  • 发票/银行转帐

付款详情:

  • 发送有关订单的信息 - 插入电子邮件地址,信息也将被发送到(除了计算器用户提供的电子邮件地址)
  • 货币 - 从列表中选择一种货币
  • 价格领域 - 选择包含价格信息的字段
  • 重定向 - 输入要重定向的URL
  • 电子邮件主题
  • 发送电子邮件
  • 发件者姓名
  • 默认付款门 - 贝宝/条纹
  • 发送电​​子邮件 - 是/否 - 如果是,电子邮件将被发送到“发送结果”中输入的地址,否则不会向该地址发送电子邮件
  • 发送给客户 - 是/否 - 如果是,电子邮件将被发送到计算器用户提供的地址,否则将不会向该地址发送电子邮件

账单信息:

  • 显示结算信息? - 是/否

可用变量:

  • {量} - 您选择作为付款金额的字段中的数字金额。
  • {货币} - 您选择的货币。

Calculoid.com

付款再次发生:

此功能可以在定义的重复周期/期间自动重复付款。 转到“编辑字段“菜单”付款方式“字段。这里打开”付款再次发生“子菜单。要使付款重复生效,您需要设置以下字段:

  • 启用定期付款 - 默认 - 默认情况下,选择是或否以启用/禁用此字段的定期付款。
  • 启用定期付款 - 字段覆盖 - 选择哪个字段控制是否启用了重复播放。 字段值1表示已启用,任何其他值表示已禁用。 这使用户可以自由决定自己并覆盖上面定义的默认设置。
  • 重复周期 - 默认 - 选择经常性周期(天,周,月或年)的时间单位。
  • 重复循环 - 字段覆盖 - 选择保留循环周期的字段。 字段值必须是以下字符之一:D,W,M,Y。这使用户可以自由决定自己并覆盖上面定义的默认设置。
  • 重复期 - 默认 - 输入付款之间的周期数。
  • 重复周期 - 字段覆盖 - 选择哪个字段包含经常性周期。 字段值必须是正数(整数)。 这使用户可以自由决定自己并覆盖上面定义的默认设置。

有关已实现付款的详细信息也可以在下面找到 详情>提交 计算器的菜单与付款领域。 此外,如果您将计算器与外部系统(例如Mautic,Redmine或其他系统)集成,则可以配置已实现的付款,以便在系统中自动创建CRM案例。

Calculoid.com

如果您将Calculoid与第三方系统集成在一起,则可以选择在每次付款重复时重复执行这些集成。 例如,当标准付款设置为自动创建新任务或CRM案例时,将在每次重复付款时创建另一个任务或CRM案例。 要配置此设置,请转到顶部菜单中的“集成”选项卡,选择左侧栏中的“其他”并切换“Recurrent Payment Integrations”开关以启用。

Calculoid.com

在付款重复的背景下可以使用特殊变量。 这些可以与电子邮件模板或其他适用变量的实体一起使用。

Calculoid.com

有关付款的更多信息,请阅读:

HTML - 描述字段,用于将任何HTML插入计算器。

HTML字段受大约3000个字符的限制。 要减少有效字符数,请从文本中删除HTML字体样式(颜色,大小......)。

Calculoid.com

Textarea - 计算器用户可以在发送他/她的结果之前输入消息。

Textarea字段配置:

  • Textarea高度 - 输入以像素为单位的值
  • 显示字数 - 是/否

Calculoid.com

仪表 - 看起来像转速表的图表可以显示任何字段的值。

仪表配置:

  • 从字段显示值 - 在列表中选择一个字段
  • Gauge Max Width - 输入以像素为单位的值
  • 最低价值
  • 最大价值
  • 主要蜱虫 - 仪表上主要刻度线的数量
  • 小蜱虫 - 仪表上的小刻度数
  • 绿色从+绿色到 - 仪表上绿色的值范围
  • 黄色从+黄色到 - 仪表上黄色的值范围
  • 红色从+红色到 - 仪表上红色的值范围

Calculoid.com

饼图 - 用于说明数字比例的圆图

饼图(或圆形图)是一个圆形统计图形,它被分成切片 说明数字比例。 在饼图中,每个切片的弧长(以及因此其中心角和面积)与其表示的量成比例。

图表配置:

  • 新行 - 在饼图中添加一个新行
  • 行名称 - 输入行的名称
  • 行值 - 选择任何字段以获取数值
  • 高度+宽度 - 允许更改饼图的默认尺寸

Calculoid.com

选择字段 - 具有无限选项的下拉菜单

与显示为复选框的选项的单选框字段不同,“选择”字段设计为a 下拉式菜单 所以它更适合当时的情况 选项数量非常多。 在“编辑字段>选项“菜单,您可以选择是手动添加新选项还是选择表格 导入选项 从。 如果选择第二个选项,请确保先添加表,然后才能选择一个。 要将表添加到Calculoid中,请使用“屏幕顶部的“按钮。从...添加表格时 CSV文件请注意 只有逗号 支持(不是分号)作为文件中的字段分隔符。

使用CSV导入选项选择字段 -  Calculoid.com

这是正确的CSV数据格式的示例。

使用CSV导入选项选择字段 -  Calculoid.com

有条件的领域

在Calculoid中,设置逻辑条件用于显示/隐藏计算器的特定字段。 当特定字段的条件成立时,将显示该字段(白色字段),否则显示该字段(灰色字段)。 当计算器中的某些字段仅在特定数值输入某些其他字段(例如滑块,仪表,公式......)时,这种行为是实用的,即数据输入仅在特定条件下需要但不是除此以外。 有关条件字段的更多信息,请阅读“有条件领域的网络计算器".

Calculoid.com

如何配置计算器

编辑完所有字段后,继续执行“配置“选项卡包含以下选项:

  • 名字 - 更改计算器的名称
  • 产品详情 - 编辑计算器描述
  • 语言 - 选择计算器的语言
  • 主题 - 选择默认外观主题
  • 配色方案
  • 其他标签 - 标记你的计算器
  • 完了 - 当您单击“是”时,只有在嵌入时,您的计算器才会在线显示
  • 计算器 - 检查我们的 常见问题 有关公共和私人计算器的信息
  • 签名 - 检查我们的 常见问题 有关签名的信息,只有在您有付费订阅时才可以隐藏
  • 通知
  • 千分离器
  • 小数分隔符

Calculoid.com

如何集成计算器

在“整合“标签,您可以找到可用的集成:

  • 网络挂接
  • Mautic
  • 管理平台
  • 简易Redmine CRM

Calculoid.com

如何整合Google Analytics

Google Analytics只能跟踪特定计算器字段中的事件 - 即“发送结果“和”付款方式“。去吧编辑字段“相应领域的菜单。这里打开”提交“子菜单。改变”发送Google Analytics事件?“值为是。要使Google Analytics事件有效,您需要设置以下字段并包括 analytics.js 在嵌入计算器的同一页面上。 不支持iframe版本。 编辑或预览计算器时不会触发事件。

  • Google Analytics事件类别 (例如“视频”)
  • Google Analytics事件操作 (例如“玩”)
  • Google Analytics事件标签 (例如“秋季运动”)
  • Google Analytics事件价值 (例如42)

Calculoid.com

由特定Calculoid字段上的活动创建的数据将在Google Analytics中显示为 具有上面定义的属性的事件.

Calculoid.com

如何在计算器中预填充数据

有两种方法可以通过URL查询字符串或<div>元素中的ng-init属性在计算器中预填充数据。

通过ng-init属性

预填充配置作为新对象插入ng-init-init()函数中 (例如:值:{})。 要设置单个值,您必须添加ID为字段ID及其值的键。 (例: 值:{F12345:'示例值'} - 此示例配置将使用“示例值”预填字段ID F12345。 所以嵌入代码本身看起来像这样:

<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',值:{F12345:'示例值'}})”ng-include = “负载()”> </ DIV>

可能只有预填充电子邮件,滑块,收音机,文本,文本区域,付款和复选框字段。

如果在计算器中使用了付款字段,则可以通过添加新对象预填充所有结算信息(自定义复选框除外) 计费值{} (例:值:{billing:{}}).

账单inf。 预填充:

地址,城市,公司名称,国家,电子邮件,名字,姓氏,oac,电话,vatid,zip

例如:

<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 =订购公司复选框(仅限 or )

通过URL查询字符串

通过以下格式添加查询参数来插入数据: FIELD_ID = prefilled_value

例如:

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

(注意:数据必须是URL编码的, 更多信息)

公式中可用的变量

  • FX - 字段值(电子邮件,付款和HTML字段除外)*用字段ID替换FX。 例: F3456
  • BillingFirstname - 来自付款结算信息的名字
  • BillingLastname - 付款结算信息的姓氏
  • BillingAddress - 来自付款结算信息的地址
  • BillingCity - 来自付款结算信息的城市
  • BillingCountry - 来自付款结算信息的国家/地区
  • BillingZip - 来自付款结算信息的邮政编码
  • BillingCompanyName - 付款结算信息中的公司名称
  • BillingVatid - 来自付款结算信息的增值税号
  • BillingValidViesVatID - 如果VIES的增值税ID验证启用此变量。 验证成功时返回1,否则返回0
  • PaymentType - 返回选择的付款类型(paypal = 1,stripe = 2,invoice = 3)

集成和电子邮件的可用变量

某些类型的字段(例如“发送结果”或“付款”)使用电子邮件模板。 在模板中,在发送电子邮件之前,这些变量将被实际数据替换。 这同样适用于集成。

  • {FX:值} - 单字段值 *用字段ID替换FX。 例: F3456
  • {FX:名} - 单字段名称 *用字段ID替换FX。 示例:F3456
  • {FX:提示} - 单场描述 *用字段ID替换FX。 示例:F3456
  • {FX:前缀} - 值前的单字段文本 *用字段ID替换FX。 示例:F3456
  • {FX:后缀} - 值后的单字段文本 *用字段ID替换FX。 示例:F3456
  • {calculatorName} - 计算器名称
  • {fields} - 字段列表
  • {sourceUrl} - 计算器网址
  • {description} - 计算器描述
  • {userName} - 作者帐户名称
  • {email} - 来自电子邮件或付款字段的电子邮件地址
  • {price} - 付款字段的价格
  • {currency} - 付款字段的货币
  • {status} - pament状态
  • {b illing:firstname } - 来自付款结算信息的名字
  • {b illing:lastname } - 付款结算信息的姓氏
  • {b illing:address } - 来自付款结算信息的地址
  • {b illing:city } - 来自付款结算信息的城市
  • {b illing:country } - 来自付款结算信息的国家 /地区
  • {b illing:zip } - 来自付款结算信息的邮政编码
  • {b illing:companyName } - 来自付款结算信息的公司名称
  • {b illing:vatid } - 来自付款结算信息的增值税号
  • {submissionId} - 电子邮件或付款提交的唯一ID(可用作发票的参考号)

如何嵌入计算器

要嵌入计算器,请转到“嵌入“选项卡并复制HTML代码:

  • 没有iFrame的HTML代码 - 此代码将采用您网站的CSS。 确保在CodePen上测试代码
  • 带有iFrame的HTML代码 - 如果您在网站上嵌入计算器时格式有任何问题,请使用第二个选项,计算器将显示您在Calculoid中选择的格式,同时创建计算器

有关嵌入的更多信息,请阅读“Calculoid计算器的嵌入".

Calculoid.com

统计学

要查找特定计算器的提交详细信息和报告,请转到“详细信息“计算器上方的标签。有关全局统计信息,请点击右上角的个人资料图标,然后打开”统计学“菜单项。

  • 意见书 - 查看通过计算器完成的所有提交内容,包括付款和待付款
  • 行业报告 - 查看您的计算器已被查看了多少次以及已完成了多少次提交
    网络挂接

Calculoid.com

其他信息

开始免费现在

在几分钟内创建自己的网络计算器。
测试30-day免费试用版中的所有功能。

免费注册

无需信用卡或安装

联系我们

电话

美国:+ 1 415 800 3787
英国:+ 44 207 097 3577
CZ:+ 420 222 743 843
办公时间:9:00 - 17:00 UTC + 1

服务

info@calculoid.com

售后支持

support@calculoid.com

Easy Software Ltd.

Kemp House,152-160
城市道路,EC1V
2NX英国伦敦
公司ID:08960980
增值税号:GB226711521

易开发中心

Jugoslávskýchpartyzánů34
160 00布拉格
捷克共和国