содержание

Видеоурок, #2, #3

Калькулоидная документация для разработчиков

Как создать, сохранить и удалить калькулятор

Как добавить и удалить поле

Дизайн калькулятора и дизайн поля

Доступные типы полей

Условные поля

Как настроить калькулятор

Как интегрировать калькулятор

Как интегрировать Google Analytics

Как предварительно заполнить данные в калькуляторе

Как вставить калькулятор

Статистика

Как создать, сохранить и удалить калькулятор

Calculoid.com - это обычное статическое веб-приложение JavaScript, использующее фреймворк AngularJS для запуска. Это приложение в супертяжелом весе по сравнению с встроенным приложением, главной целью которого является публичная библиотека для калькуляторов и мощный редактор калькуляторов. Для получения дополнительной информации о Calculoid, пожалуйста,Как работает Калькулоид?".

Чтобы создать новый калькулятор, перейдите к пункту "Список калькуляторов"в главном меню и нажмите"Новый калькулятор"в верхнем правом углу. На первом этапе (выберите свой шаблон), выберите шаблон вашего калькулятора (пустая, цена, рентабельность инвестиций, стоимость и т. д.).

Calculoid.com

На втором этапе (базовые настройки калькулятора), введите имя калькулятора, описание, язык, теги и нажмите кнопку "Сохранить конфигурацию". Вы попадете к мастеру здания, где вы можете добавить поля в свой калькулятор.

Calculoid.com

Чтобы сохранить изменения, внесенные в калькулятор, используйте зеленую кнопку "Сохранить Calc"в правом верхнем углу.

Чтобы удалить калькулятор, перейдите в раздел "Конфиг"и прокрутите вниз до нижней части, где вы найдете"Удалить калькулятор".

Как добавить и удалить поле

В "Добавить", выберите поле для добавления - ползунок / радио box / текстовое поле / формула / checkbox / отправить результаты / payments / html / textarea / gauge. В поле"Редактировать", отредактируйте конкретное поле.

Чтобы удалить поле из своего калькулятора, нажмите "Редактировать"(значок пера) на конкретном поле, а затем"Редактировать"вкладка откроется с левой стороны, и там вы найдете"Удалить поле".

Calculoid.com

Основные настройки одинаковы для всех типов полей:

  • имя поля - назовите поле и выберите, следует ли отображать имя и отображать ли поле для публики
  • Десятичные числа - выберите количество знаков после запятой, чтобы показать
  • Намекать - подсказка
  • Префикс - добавьте префикс, такой как% или валюта
  • постфикс - добавить постфикс, такой как% или валюта

Calculoid.com

Дизайн калькулятора и дизайн поля

В Calculoid есть две дизайнерские конфигурации: одна для всего калькулятора и вторая для каждого поля калькулятора. Конструкцию калькулятора можно настроить в Конфигурация> ДизайнСоответственно Конфигурация> Расширенный дизайн, Конструкцию поля можно настроить в соответствии с Изменить поле> Дизайн, Если конфигурация поля сконфигурирована, она перекрывает конфигурацию калькулятора. Если дизайн поля не настроен, тогда дизайн калькулятора применяется также для поля.

Calculoid.com

Доступные типы полей

Ползунок - переменное поле, пользователи определяют значение переменной путем сдвига указателя на панели.

Поле ползунка - отличный вариант, если вам нужно знать значение max и min для этого поля. Например, если вы хотите, чтобы пользователь выбирал процент, вы знаете, что минимальное значение - 0, а максимальное значение - 100%. Это поле является приятным интерактивным элементом для всего калькулятора, поскольку он позволяет пользователю перетаскивать указатель мыши или выбирать значение одним щелчком мыши или касаться, потому что это поле также оптимизировано для мобильных устройств.

Опции:

  • Минимальное значение: Минимальное значение, которое пользователь может выбрать. 0 по умолчанию.
  • Максимальное значение: Максимальное значение, которое пользователь может выбрать. 100 по умолчанию.
  • Шаг: Шаг, который может выбрать ползунок. Например, если у вас есть слайдер от 0 до 1.000.000, вы можете позволить пользователю выбирать только полные тысячи, выбрав шаг 1000. 1 по умолчанию.
  • Значение по умолчанию: Значение по умолчанию, которое пользователь увидит, когда калькулятор загружается в первый раз.
  • Масштаб: Поле ползунка может отображать шкалу под ползунком. Заполните значения шкалы, разделенные запятой. Например: 25,50,75. Если вы хотите отображать некоторые ярлыки вместо фактических чисел, добавьте эти метки следующим образом: 25: низкий, 50: средний: 75: высокий.

Калькулоид использует эта библиотека с открытым исходным кодом для ползунков.

Calculoid.com

Radio Box - переменное поле, пользователи выбирают одно значение / параметр из определенного списка.

Опции:

  • Новый Вариант - добавить новую опцию для выбора
  • Название опции - название опции
  • Значение параметра - скрытое значение параметра, например цена (должно быть числовым и уникальным для каждого варианта)

Конфигурация радиополя:

  • Значение по умолчанию - значение, предварительно выбранное по умолчанию, когда калькулятор загружен (опция, имеющая это значение, будет предварительно выбрана)
  • Колонны - количество столбцов для отображения параметров в

Calculoid.com

Текстовое поле - переменное поле, пользователи вводят значение переменной вручную в текстовое поле.

Конфигурация текстового поля:

  • Значение по умолчанию - Значение, предварительно заполненное по умолчанию, например текстовая строка или номер
  • Необходимо? - Да / Нет - выберите, должно ли поле заполняться
  • Тип поля - Текст / Номер / Электронная почта / Телефон / Другое
  • Force String - Да / Нет - Любой ввод, введенный в поле, будет иметь строковый тип данных, включая числа, чтобы предотвратить автоматическое изменение форматирования, когда это нежелательно (например, номера банковских счетов, персональные идентификационные номера, номера социального страхования и т. Д.).

Для получения дополнительной информации о текстовом поле, пожалуйста, прочтите:

Calculoid.com

Формула - поле результата, администратор определяет, как вычисляются переменные. Пользователи видят результат.

Формула - это алгоритм, который получает свое значение из других полей, выражений или значений. Формулы могут помочь вам автоматически рассчитать значение поля на основе других полей. Для получения дополнительной информации о формуле, пожалуйста, прочитайте:

Calculoid.com

Вариант использования поля «Формула» - предопределенное поле «Комментарии» на основе значения поля

Используя поле «Формула» с функцией «добавить» в формуле, вы можете создать практическое поле «Комментарии», в котором показан один из предварительно определенных комментариев, основанный на значении другого поля. Вот пример:

  • В поле Вес вы ввели значение меньше, чем 60 кг. → Он автоматически покажет вам комментарий «Вы ввели вес XX кг, а это значит, что вы худой».
  • В поле Вес вы ввели значение между 60-90 кг. → Он автоматически покажет вам комментарий «Вы нормальный парень, потому что ваш вес составляет XX кг».
  • В поле Вес вы ввели значение более 90 кг. → Он автоматически покажет вам комментарий «Ешьте меньше, потому что ваш вес составляет XX кг».

Ниже вы можете увидеть пример формулы и два поля в Calculoid.

Calculoid.com

Поле «Флажок» - переменные, пользователи выбирают больше опций / значений из определенного списка.

Конфигурация поля флажка:

  • Значение, если отмечено - числовое значение поля при проверке
  • Значение, если не отмечено - числовое значение поля при непроверенной

Calculoid.com

Отправить результаты - поле конверсии, результат расчета может быть отправлен на отправленное электронное письмо.

Детали электронной почты:

  • Отправлять результаты также - введите адрес электронной почты, на который также будут отправлены результаты (в дополнение к адресу электронной почты, предоставленному пользователем калькулятора)
  • Отправить по электронной почте
  • Имя отправителя
  • Тема
  • переадресовывать - введите URL для перенаправления
  • Отправить по электронной почте - Да / Нет - если да, электронное письмо будет отправлено на адрес, указанный в поле «Отправить результаты также», в противном случае электронное письмо не будет отправлено на адрес
  • Отправить клиенту - Да / Нет - если да, электронное письмо будет отправлено на адрес, указанный пользователем калькулятора, в противном случае электронное письмо не будет отправлено на адрес

Для получения дополнительной информации о отправке результатов, пожалуйста,Создайте электронную почту с результатом до мельчайших деталей".

Calculoid.com

Платежи - поле конверсии, пользователи могут оплачивать расчетные суммы на счете администратора

Доступные способы оплаты:

  • PayPal
  • Кредитная карта
  • Счета / Банковский перевод

Детали оплаты:

  • Отправить информацию о заказе - введите адрес электронной почты, на который также будет отправлена ​​информация (в дополнение к адресу электронной почты, предоставленному пользователем калькулятора)
  • валюта - выберите валюту из списка
  • Цена поле - выберите поле с информацией о цене
  • переадресовывать - введите URL для перенаправления
  • Тема письма
  • Отправить по электронной почте от
  • Имя отправителя
  • По умолчанию - PayPal / Stripe
  • Отправить по электронной почте - Да / Нет - если да, электронное письмо будет отправлено на адрес, указанный в поле «Отправить результаты также», в противном случае электронное письмо не будет отправлено на адрес
  • Отправить клиенту - Да / Нет - если да, электронное письмо будет отправлено на адрес, указанный пользователем калькулятора, в противном случае электронное письмо не будет отправлено на адрес

Информация об оплате:

  • Показать платежную информацию? - Да нет

Доступные переменные:

  • {количество} - Числовое значение из поля, которое вы выбрали для оплаты.
  • {валюта} - Валюта, которую вы выбрали.

Calculoid.com

Повторение платежа:

Эта функция позволяет автоматически повторять платеж в определенном повторяющемся цикле / периоде. Перейдите в раздел "Изменить поле"меню"Ваши Платежи". Здесь откройте"Повторение платежа«Подменю. Чтобы возобновить оплату, вам нужно установить следующие поля:

  • Включить повторяющиеся платежи - по умолчанию - Выберите Да или Нет, чтобы включить / отключить повторяющиеся платежи для этого поля по умолчанию.
  • Включить повторяющиеся платежи - переопределение поля - Выберите, какое поле управляет, если включен рекуррент. Значение поля 1 для включенного, любое другое значение означает, что он отключен. Это дает пользователю право самостоятельно решать и переопределяет установленные выше настройки по умолчанию.
  • Повторяющийся цикл - по умолчанию - Выберите единицу времени для повторяющегося периода (дни, недели, месяцы или годы).
  • Повторяющийся цикл - переопределение поля - Выберите, какое поле содержит повторяющийся цикл. Значение поля должно быть одним из следующих символов: D, W, M, Y. Это дает пользователю право самостоятельно решать и переопределяет установленную выше настройку по умолчанию.
  • Повторяющийся период - по умолчанию - введите количество циклов между платежами.
  • Повторяющийся период - переопределение поля - Выберите, какое поле содержит повторяющийся период. Значение поля должно быть положительным числом (целое число). Это дает пользователю право самостоятельно решать и переопределяет установленные выше настройки по умолчанию.

Сведения о реализованных платежах также можно найти в разделе Детали> Материалы меню калькулятора с полем платежа. Более того, если ваш калькулятор интегрирован с внешней системой (например, Mautic, Redmine или другими), реализованный платеж можно настроить таким образом, чтобы автоматически создавать CRM-код в системе.

Calculoid.com

Если ваш Calculoid интегрирован со сторонними системами, есть возможность также повторять выполнение этих интеграций с каждым повторением платежа. Например, когда стандартный платеж настроен на автоматическое создание новой задачи или дела CRM, при каждом повторении платежа будет создаваться другая задача или дело CRM. Чтобы настроить этот параметр, перейдите на вкладку «Интеграция» в верхнем меню, выберите «Другое» на левой боковой панели и включите переключатель «Интеграция с повторяющимися платежами».

Calculoid.com

Специальные переменные доступны в контексте повторения платежа. Они могут использоваться с шаблонами электронной почты или другими объектами с переменными.

Calculoid.com

Для получения дополнительной информации о платежах читайте:

HTML - поле описания служит для вставки любого HTML в калькулятор.

Поле HTML ограничено примерно символами 3000. Чтобы уменьшить эффективное количество символов, удалите стили HTML-шрифта (цвет, размер ...) из текста.

Calculoid.com

Textarea - пользователь калькулятора может ввести сообщение перед отправкой своего результата.

Конфигурация поля Textarea:

  • Высота текста - введите значение в пикселях
  • Показывать количество слов - Да нет

Calculoid.com

Gauge - диаграмма, которая выглядит как тахометр, может отображать значение любого поля.

Конфигурация датчика:

  • Отображать значение из поля - выберите одно поле в списке
  • Максимальная ширина манометра - введите значение в пикселях
  • Минимальное значение
  • Максимальное значение
  • Основные тики - количество основных меток на датчике
  • Незначительные клещи - количество мелких меток на датчике
  • Зеленый от + зеленый до - диапазон значений для зеленого цвета на датчике
  • Желтый от + Желтый до - диапазон значений для желтого цвета на датчике
  • Красный от + красный до - диапазон значений красного цвета на датчике

Calculoid.com

Круговая диаграмма - круговой график, иллюстрирующий численную пропорцию

Круговая диаграмма (или круговая диаграмма) представляет собой круговую статистическую графику, которая делится на срезы на иллюстрируют численную пропорцию, В круговой диаграмме длина дуги каждого среза (и, следовательно, его центральный угол и площадь) пропорциональна величине, которую она представляет.

Конфигурация диаграммы:

  • Новая строка - добавить новую строку в круговую диаграмму
  • Название строки - введите имя строки
  • Значение строки - выберите любое поле, чтобы принять числовое значение из
  • Высота + ширина - позволяют изменять размеры по умолчанию круговой диаграммы

Calculoid.com

Поле выбора - раскрывающееся меню с неограниченными опциями

В отличие от поля радиокамера с опциями, показанными как флажки, поле «Выбор» спроектировано как выпадающее меню поэтому он лучше подходит для ситуаций, когда количество вариантов действительно велико, В "Изменить поле> Параметры", вы можете выбрать, хотите ли вы добавить новые параметры вручную или выбрать таблицу для импортировать параметры от. Если вы выберете второй вариант, сначала убедитесь, что таблица добавлена, прежде чем вы сможете ее выбрать. Чтобы добавить таблицу в Calculoid, используйте команду "таблицы"в самой верхней части экрана. При добавлении таблицы из CSV-файл, обратите внимание, что только запятые (а не точки с запятой) поддерживаются как разделитель полей в файле.

Выберите поле с параметром импорта CSV - Calculoid.com

Это пример правильного формата данных CSV.

Выберите поле с параметром импорта CSV - Calculoid.com

Условные поля

В Calculoid настройка логических условий используется для отображения / скрытия определенных полей калькулятора. Когда выполняются условия для определенного поля, поле отображается (белое поле), иначе оно скрыто (серое поле). Такое поведение практично, когда некоторые поля в калькуляторе применимы только в том случае, когда определенные числовые значения вводятся в некоторые другие поля (такие как ползунок, калибр, формула ...), т.е. ввод данных требуется только в определенных условиях, но не иначе. Для получения дополнительной информации об условных полях, пожалуйста,Веб-калькулятор с условными полями".

Calculoid.com

Как настроить калькулятор

После того как вы отредактировали все свои поля, перейдите к разделу "Установка"со следующими параметрами:

  • Имя - изменить имя калькулятора
  • Описание - изменить описание калькулятора
  • Язык - выберите язык калькулятора
  • тема - выберите тему внешнего вида по умолчанию
  • Цветовая схема
  • Теги - пометить свой калькулятор
  • Закончен - ваш калькулятор будет отображаться в Интернете только после его включения, когда вы нажмете «ДА»
  • компьютер - проверьте наши FAQ для получения информации о государственных и частных калькуляторах
  • Подпись - проверьте наши FAQ для получения информации о Подписи, она может быть скрыта только при наличии платной подписки
  • Уведомление
  • Тысяча сепараторов
  • Десятичный разделитель

Calculoid.com

Как интегрировать калькулятор

В разделе меню "интегрировать", вы можете найти доступную интеграцию:

  • webhook
  • Mautic
  • Redmine
  • Легкий Redmine CRM

Calculoid.com

Как интегрировать Google Analytics

Google Analytics может отслеживать события только для определенных полей калькулятора, а именно:Отправить результаты" а также "Ваши Платежи"Перейдите к разделу"Изменить поле"меню соответствующего поля. Здесь откройте"Начатьmsgstr "Подменю" Изменить "Отправить мероприятие Google Analytics?«значение« Да ». Чтобы события Google Analytics работали, вам необходимо установить следующие поля, а также включить analytics.js на той же странице, где вы вставляете свой калькулятор. Версия iframe не поддерживается. События не будут запускаться при редактировании или предварительном просмотре калькулятора.

  • Категория событий Google Analytics (например, «Видео»)
  • Действие мероприятия Google Analytics (например, «играть»)
  • Значок события Google Analytics (например, «Кампания осени»)
  • Значение события Google Analytics (например, 42)

Calculoid.com

Данные, созданные в результате действия определенных полей Calculoid, будут отображаться в Google Analytics как события с указанными выше атрибутами.

Calculoid.com

Как предварительно заполнить данные в калькуляторе

Существует два способа предварительного заполнения данных в калькуляторе, строкой запроса URL или атрибутом ng-init в элементе <div>.

По атрибуту ng-init

Конфигурация предварительного заполнения вставляется в функцию ng-init-init () как новый объект величины (пример: значения: {}). Чтобы установить отдельные значения, вы должны добавить ключ с идентификатором поля и его значением. (пример: значения: {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>

Возможны поля электронной почты, ползунка, радио, текст, текстовое поле, оплата и флажки.

Если используется поле платежей в вашем калькуляторе, можно предварительно заполнить все данные биллинга (кроме настраиваемых флажков), добавив новый объект биллинг в ценности{} (пример: values: {billing: {}}).

Биллинг инф. для предварительной заготовки:

адрес, город, companyName, страна, адрес электронной почты, имя, фамилия, 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) * замените FX идентификатором поля. Пример: F3456
  • BillingFirstname - имя от платежной информации
  • BillingLastname - фамилия из платежной информации
  • BillingAddress - адрес из платежной информации
  • BillingCity - город из платежной информации
  • BillingCountry - страна из платежной информации
  • BillingZip - почтовый индекс из платежной информации
  • BillingCompanyName - название компании из платежной информации
  • BillingVatid - идентификатор НДС от платежной информации
  • BillingValidViesVatID - если проверка идентификатора VAT с помощью VIES активировала этот var. возвращает 1, когда проверка прошла успешно, иначе 0
  • PaymentType - возвращает тип платежа (paypal = 1, stripe = 2, invoice = 3)

Доступные переменные для интеграции и электронной почты

В некоторых типах полей (например, «Отправить результаты или платежи») используются шаблоны электронной почты. В шаблонах эти переменные будут заменены фактическими данными до отправки электронной почты. То же самое касается интеграций.

  • {FX: значение} - одно значение поля * заменить FX идентификатором поля. Пример: F3456
  • {FX: имя} - имя одного поля * заменить FX идентификатором поля. Пример: F3456
  • {FX: Подсказка} - описание одного поля * заменить FX идентификатором поля. Пример: F3456
  • {FX: Префикс} - текст отдельного поля перед значением * заменить FX идентификатором поля. Пример: F3456
  • {FX: постфикс} - текст отдельного поля после значения * заменить FX идентификатором поля. Пример: F3456
  • {calculatorName} - имя калькулятора
  • {fields} - список полей
  • {sourceUrl} - URL-адрес калькулятора
  • {description} - описание калькулятора
  • {имя_пользователя} - имя учетной записи автора
  • {email} - адрес электронной почты из поля «Электронная почта» или «Оплата»
  • {price} - цена от поля оплаты
  • {currency} - валюта поля Платеж
  • Статус {status} - pament
  • {b illing: firstname } - имя из платежной информации
  • {b illing: фамилия } - фамилия из платежной информации
  • {b illing: address } - адрес из платежной информации
  • {b illing: city } - город из платежной информации
  • {b illing: страна } - страна из платежной информации
  • {b illing: zip } - почтовый индекс из платежной информации
  • {b illing: companyName } - название компании из платежной информации
  • {b illing: vatid } - идентификатор НДС из платежной информации
  • {submissionId} - уникальный идентификатор электронной почты или отправки платежа (может использоваться как ссылочный номер для счета-фактуры)

Как вставить калькулятор

Чтобы вставить калькулятор, перейдите в раздел "встраивать"и скопируйте код HTML:

  • HTML-код без iFrame - этот код примет CSS вашего сайта. Убедитесь, что вы проверили код в CodePen
  • HTML-код с iFrame - если у вас возникнут проблемы с форматированием при встраивании калькулятора на ваш сайт, используйте второй вариант, когда калькулятор покажет с форматированием, выбранным вами в Calculoid, при создании калькулятора

Для получения дополнительной информации о внедрении, пожалуйста,Вложение калькуляторов Calculoid".

Calculoid.com

Статистика

Чтобы найти информацию о представлении и отчеты для конкретного калькулятора, перейдите в раздел "Детали"над вашим калькулятором. Для глобальной статистики щелкните значок своего профиля в верхнем правом углу и откройте"Статистика" пункт меню.

  • Материалы - просмотреть все материалы, сделанные через ваш калькулятор (ы), включая платежи и ожидающие платежи
  • Отчеты - посмотрите, сколько раз просматривался ваш калькулятор (ы) и сколько было сделано
    Webhooks

Calculoid.com

Дополнительная информация

Начать бесплатно прямо сейчас

Создайте свой собственный веб-калькулятор за считанные минуты.
Проверьте все функции в бесплатной пробной версии 30.

Регистрируйтесь

Нет необходимости в кредитной карте или установке

Свяжитесь с нами

Телефон

US: + 1 415 800 3787
UK: + 44 207 097 3577
CZ: + 420 222 743 843
Часы работы: 9: 00 - 17: 00 UTC + 1

Информация

info@calculoid.com

Поддержка

support@calculoid.com

Easy Software Ltd.

Кемп Дом, 152-160
City Road, EC1V
2NX Лондон, Соединенное Королевство
Идентификатор компании: 08960980
Идентификатор НДС: GB226711521

Легкий центр разработки

Jugoslávských partyzánů 34
160 00 Прага
Чешская Республика