コンテンツ

ビデオチュートリアル, #2, #3

開発者のためのカリキュラムドキュメント

電卓を作成、保存、削除する方法

フィールドを追加および削除する方法

電卓の設計とフィールド設計

利用可能なフィールドのタイプ

条件付きフィールド

電卓を構成する方法

電卓を統合する方法

Googleアナリティクスの統合方法

計算機でデータを事前に埋める方法

電卓を埋め込む方法

統計

電卓を作成、保存、削除する方法

Calculoid.comは、実行するためにAngularJSフレームワークを使用する単純な静的なJavaScript Webアプリケーションです。 主な目的は、電卓と強力な電卓エディタのための公共図書館になることです。 Calculoidの詳細については、カルロイドはどのように働くのですか?".

新しい計算機を作成するには、電卓のリストメインメニューで "新しい電卓"ボタンをクリックします。 最初のステップ (テンプレートを選択)、計算機のテンプレート(空白、価格、ROI、コストなど)を選択します。

Calculoid.com

第2のステップ (基本的な電卓の設定)、電卓の名前、説明、言語、タグを入力し、設定を保存"ボタンをクリックすると、電卓にフィールドを追加できるビルディングウィザードが表示されます。

Calculoid.com

電卓に加えた変更を保存するには、緑色のボタン "Calcを保存する"右上隅にあります。

電卓を削除するには、設定"タブをクリックし、下にスクロールして"電卓を削除する"オプション。

フィールドを追加および削除する方法

の "Add をクリックします。"タブで、スライダ/ラジオボックス/テキストフィールド/式/チェックボックス/結果/ペイメント/ html / textarea / gaugeを送信するフィールドを選択します。編集"タブで、特定のフィールドを編集します。

あなたの電卓からフィールドを削除するには、編集特定のフィールドの「ペンアイコン」をクリックし、編集"タブが左側に開き、そこに"フィールドを削除"オプション。

Calculoid.com

基本設定は、すべてのタイプのフィールドで同じです。

  • フィールド名 - フィールドに名前を付け、名前を表示するかどうか、フィールドを公開するかどうかを選択します
  • 小数位 - 表示する小数点以下の桁数を選択する
  • 暗示 - フィールドヒント
  • 接頭辞 - %や通貨などのプレフィックスを追加する
  • Postfixの - %や通貨などの接尾辞を追加する

Calculoid.com

電卓の設計とフィールド設計

Calculoidには2つの設計構成があります.1つは電卓全体、もう1つは電卓の各フィールドです。 電卓の設計は、 Config>デザイン、それぞれ Config>高度なデザイン。 フィールドデザインは、 フィールドの編集>デザイン。 フィールドデザインが設定されている場合は、電卓デザインの設定が上書きされます。 フィールド設計が構成されていない場合、電卓設計はフィールドにも適用されます。

Calculoid.com

利用可能なフィールドのタイプ

スライダー可変フィールドでは、ユーザーはバー上のポインターをスライドさせることで変数の値を定義します。

スライダーフィールドは、このフィールドの最大値と最小値を知っている必要がある場合に最適です。 たとえば、ユーザーにパーセンテージを選択させる場合、最小値は0、最大値は100%であることがわかります。 このフィールドは、ユーザーがポインターをドラッグ&ドロップするか、ワンクリックまたはタッチで値を選択できるため、このフィールドはモバイル用にも最適化されているため、電卓全体の素敵なインタラクティブな要素です。

オプション:

  • 最小値: ユーザーが選択できる最小値。 デフォルトでは0です。
  • 最大値: ユーザーが選択できる最大値。 デフォルトでは100です。
  • ステップ: スライダが選択できるステップ。 たとえば、0から1.000.000までのスライダーがある場合、1000になるステップを選択することで、ユーザーに何千ものものだけを選択させることができます。 デフォルトでは1です。
  • デフォルト値: 電卓が最初に読み込まれたときに表示されるデフォルト値。
  • スケール: スライダフィールドは、スライダの下にスケールを表示できます。 カンマ文字で区切った縮尺の値を入力します。 例:25,50,75。 実際の数字の代わりにいくつかのラベルを表示する場合は、25:low、50:medium:75:のようなラベルを追加します。

Calculoidの使用 このオープンソースライブラリ スライダー用。

Calculoid.com

ラジオボックス - 可変フィールド、ユーザーは定義されたリストから1つの値/オプションを選択します。

オプション:

  • 新オプション - 新しいオプションを追加して選択する
  • オプション名 - オプションの名前
  • オプション値 - 価格などのオプションの隠された価値(各オプションの数値と一意でなければならない)

ラジオフィールド設定:

  • デフォルト値 - 計算機がロードされたときにデフォルトで事前に選択された値(この値を持つオプションが事前選択されます)
  • コラム - オプションを表示する列の数

Calculoid.com

テキストフィールド - 変数フィールドでは、ユーザーがテキストフィールドに変数値を手動で挿入します。

テキストフィールド設定:

  • デフォルト値 - テキスト文字列または数値など、デフォルトで事前に入力された値
  • 必要とされている? - はい/いいえ - フィールドを入力する必要があるかどうかを選択します
  • フィールドタイプ - テキスト/番号/電子メール/電話/その他
  • 強制的な文字列 - はい/いいえ - フィールドに入力された入力は、望ましくないときにフォーマットの自動変更(銀行口座番号、個人識別番号、社会保障番号など)を防ぐために、数字を含む文字列データ型になります。

テキストフィールドの詳細については、次を参照してください。

Calculoid.com

式 - 結果フィールドでは、管理者は変数の計算方法を定義します。 ユーザーに結果が表示されます。

式は、他のフィールド、式、または値からその値を導き出すアルゴリズムです。 式は、他のフィールドに基づいてフィールドの値を自動的に計算するのに役立ちます。 Formulaの詳細については、以下を読んでください。

Calculoid.com

式フィールドのユースケース - フィールド値に基づいて事前定義されたコメントボックス

数式で "追加"機能を持つ数式フィールドを使用すると、別のフィールドの値に基づいて定義済みのコメントの1つを表示する実用的なコメントボックスを作成できます。 これが一例です。

  • 重量項目に、60 kg未満の値を入力しました。 →自動的に「体重XX kgを入力しました。それはあなたが無駄がないことを意味します」というコメントが表示されます。
  • 重量項目に、60から90 kgの間の値を入力しました。 →自動的に「体重はXX kgであるので、あなたは普通の人です」というコメントが表示されます。
  • 重量項目に、90 kgを超える値を入力しました。 →「体重がXX kgであるため、減量します」というコメントが自動的に表示されます。

下にあなたは式の例と二つのフィールドを見ることができます カルクロイド.

Calculoid.com

チェックボックス - 変数フィールドでは、定義されたリストからさらに多くのオプション/値を選択します。

チェックボックスフィールド設定:

  • チェックされている場合は値 - チェックされたときのフィールドの数値
  • チェックされていない場合の値 - チェックされていないときのフィールドの数値

Calculoid.com

結果の送信 - 変換フィールド、計算結果は送信された電子メールで送信できます。

メールの詳細:

  • 結果もに送る - 結果が送信されるEメールアドレスを入力します(電卓のユーザーから提供されたEメールアドレスに加えて)。
  • 電子メールから送信
  • 送信者名
  • 主題
  • リダイレクト - リダイレクトするURLを入力
  • メールを送ります - はい/いいえ - はいの場合、[結果の送信先]に入力したアドレスにEメールが送信されます。それ以外の場合、そのアドレスにEメールは送信されません。
  • 顧客に送る - はい/いいえ - はいの場合、Eメールは電卓のユーザーによって提供されたアドレスに送信されます。それ以外の場合、Eメールはアドレスに送信されません。

結果の送信の詳細については、結果の電子メールを細部まで細工する".

Calculoid.com

支払い - コンバージョンフィールド、管理者のアカウントで計算された金額を支払うことができます

利用可能な支払い方法:

  • PayPal
  • クレジットカード
  • 請求書/銀行振込

支払詳細:

  • 注文に関する情報を送信する - 情報が送信されるEメールアドレスを入力します(電卓のユーザーから提供されたEメールアドレスに加えて)。
  • 通貨 - リストから通貨を選択する
  • 価格フィールド - 価格情報のあるフィールドを選択する
  • リダイレクト - リダイレクトするURLを入力
  • メール件名
  • メール送信元
  • 送信者名
  • デフォルトの支払いゲート - PayPal / Stripe
  • メールを送ります - はい/いいえ - はいの場合、[結果の送信先]に入力したアドレスにEメールが送信されます。それ以外の場合、そのアドレスにEメールは送信されません。
  • 顧客に送る - はい/いいえ - はいの場合、Eメールは電卓のユーザーによって提供されたアドレスに送信されます。それ以外の場合、Eメールはアドレスに送信されません。

課金情報:

  • 請求情報を表示しますか? - はい・いいえ

利用可能な変数:

  • {量} - 支払額を選択した項目の数値です。
  • {通貨} - 選択した通貨。

Calculoid.com

支払いの再発:

この機能により、定義された定期的な周期/期間内に自動的に支払いを繰り返すことができます。 "編集フィールド"メニュー"支払い"フィールドを開きます。ここで"支払いの再発サブメニューを選択します。支払いの再発を有効にするには、以下の項目を設定する必要があります。

  • 定期支払いを有効にする - デフォルト - [はい]または[いいえ]を選択すると、このフィールドの定期支払いをデフォルトで有効/無効にします。
  • 定期支払いを有効にする - フィールドオーバーライド - 反復が有効になっている場合、フィールドコントロールを選択します。 有効なフィールド値1、他の値は無効です。 これにより、ユーザーは自由に自分自身を決定し、上記で定義したデフォルト設定を上書きすることができます。
  • 定期的なサイクル - デフォルト - 定期的な期間(日、週、月または年)の時間単位を選択します。
  • 繰返しサイクル - フィールドの上書き - 反復サイクルを保持するフィールドを選択します。 フィールド値は、D、W、M、Yのいずれかの文字でなければなりません。これにより、ユーザーは自由に自分自身を決定し、上記で定義したデフォルト設定を上書きすることができます。
  • 定期的な期間 - デフォルト - 支払のサイクル数を入力します。
  • 繰返し期間 - 項目の上書き - 反復期間を保持するフィールドを選択します。 フィールド値は正の数(整数)でなければなりません。 これにより、ユーザーは自由に自分自身を決定し、上記で定義したデフォルト設定を上書きすることができます。

実現された支払いについての詳細は、 詳細>投稿 メニューを計算フィールドに入力します。 さらに、外部システム(Mautic、Redmineなど)と統合された電卓を使用している場合、実現された支払いを設定して、システムにCRMケースを自動的に作成することができます。

Calculoid.com

Calculoidをサードパーティのシステムと統合している場合は、支払いの繰り返しごとにこれらの統合の実行を繰り返すこともできます。 たとえば、標準の支払いが新しいタスクまたはCRMケースを自動的に作成するように設定されている場合、支払いが繰り返されるたびに別のタスクまたはCRMケースが作成されます。 この設定を構成するには、トップメニューの[統合]タブに移動し、左側のサイドバーで[その他]を選択して、[定期支払い統合]スイッチをオンにして有効にします。

Calculoid.com

特別な変数は、支払いの繰り返しに関して利用可能です。 これらは、電子メールテンプレートまたはその他の適用可能な変数を持つエンティティと共に使用できます。

Calculoid.com

Paymentsの詳細については、次をご覧ください。

HTML - 記述フィールドは、任意のHTMLを電卓に挿入するためのものです。

HTMLフィールドは約3000文字で制限されます。 有効な文字数を減らすには、テキストからHTMLフォントスタイル(色、サイズなど)を削除します。

Calculoid.com

テキストエリア - 電卓ユーザーは、結果を送信する前にメッセージを入力することができます。

Textareaフィールドの設定:

  • テキストエリアの高さ - ピクセル単位で値を入力する
  • 単語数を表示する - はい・いいえ

Calculoid.com

ゲージ - タコメータのように見えるチャートは、任意のフィールドの値を表示できます。

ゲージ設定:

  • フィールドからの値の表示 - リスト内の1つのフィールドを選択する
  • ゲージ最大幅 - ピクセル単位で値を入力する
  • 最小値
  • 最大値
  • メジャーティック - ゲージ上の大きな目盛りの数
  • マイナーティックス - ゲージ上の小さな目盛りの数
  • 緑色から緑色まで - ゲージの緑色の値の範囲
  • イエローからイエローまで - ゲージの黄色の値の範囲
  • 赤から赤まで - ゲージ上の赤色の値の範囲

Calculoid.com

円グラフ - 数値の割合を示す円グラフ

円グラフ(または円グラフ)は円形の統計図形であり、 数値。 円グラフでは、各スライスの弧の長さ(したがって、その中心の角度と面積)は、スライスの弧の長さに比例します。

チャート設定:

  • 新しい行 - 円グラフに新しい行を追加する
  • 行名 - 行の名前を入力します。
  • 行の値 - 任意のフィールドを選択して数値を取得します
  • 高さ+幅 - 円グラフのデフォルトの寸法を変更できるようにする

Calculoid.com

選択フィールド - 無制限オプション付きのドロップダウンメニュー

チェックボックスとして表示されるオプションを持つラジオボックスフィールドとは異なり、選択フィールドは ドロップダウンメニュー それは、より良い オプションの数が本当に多いです。 "フィールドの編集>オプション"メニューを使用すると、新しいオプションを手動で追加するか、またはテーブルを選択して手動で追加するかを選択できます オプションをインポートする から。 2番目のオプションを選択した場合は、テーブルを最初に追加してから選択するようにしてください。 Calculoidにテーブルを追加するには、テーブル"ボタンを押すと、画面の一番上に表示されます。 CSVファイル、 その点に注意してください コンマのみ (セミコロンではない)は、ファイル内のフィールドセパレータとしてサポートされています。

CSVインポートオプションでフィールドを選択 -  Calculoid.com

これは正しいCSVデータ形式の例です。

CSVインポートオプションでフィールドを選択 -  Calculoid.com

条件付きフィールド

Calculoidでは、論理条件の設定は電卓の特定のフィールドの表示/非表示に使用されます。 特定のフィールドの条件が満たされると、フィールドが表示され(白いフィールド)、それ以外の場合は非表示になります(グレーフィールド)。 このような振る舞いは、特定の数値が他のフィールド(スライダー、ゲージ、数式など)に入力されている場合にのみ計算機の一部のフィールドが関連する場合に有効です。さもないと。 条件付きフィールドの詳細については、条件付きフィールドを持つWeb計算ツール".

Calculoid.com

電卓を構成する方法

すべてのフィールドを編集したら、設定する"タブをクリックします。

  • 名前 - 電卓の名前を変更する
  • 説明 - 電卓の説明を編集する
  • Language - 計算機の言語を選択する
  • テーマ - デフォルトの外観テーマを選択する
  • カラースキーム
  • タグ - あなたの電卓にタグを付ける
  • 終わった - はいをクリックすると、埋め込まれた電卓はオンラインでのみ表示されます
  • コンピュータ - 私たちをチェックしてください よくある質問 パブリックとプライベートの電卓に関する情報
  • 署名 - 私たちをチェックしてください よくある質問 署名についての情報は、あなたが有料のサブスクリプションを持っている場合にのみ非表示にすることができます
  • 通知
  • 千のセパレータ
  • 小数点記号

Calculoid.com

電卓を統合する方法

"の統合します"タブで、利用可能な統合を見つけることができます:

  • ウェブフック
  • Mautic
  • Redmineの
  • 簡単RedmineのCRM

Calculoid.com

Googleアナリティクスの統合方法

Googleアナリティクスでは、特定の電卓のフィールドでのみイベントをトラッキングできます。つまり、結果を送信"と"支払い""編集フィールド"メニューを開き、ここで"送信時"サブメニュー。変更"Googleアナリティクスのイベントを送信しますか?Googleアナリティクスのイベントを有効にするには、次のフィールドを設定する必要があります。 analytics.js あなたの電卓を埋め込むのと同じページに。 iframeのバージョンはサポートされていません。 電卓の編集やプレビュー中にイベントが発生することはありません。

  • Googleアナリティクスのイベントカテゴリ (例えば、「ビデオ」)
  • Googleアナリティクスのイベントアクション (例えば、「遊ぶ」)
  • Googleアナリティクスのイベントラベル (例: "Fall Campaign")
  • Googleアナリティクスのイベントの値 (例:42)

Calculoid.com

特定のCalculoidフィールドのアクティビティによって作成されたデータは、Googleアナリティクスで次のように表示されます。 上記の属性を持つイベント.

Calculoid.com

計算機でデータを事前に埋める方法

<div>要素のURLクエリ文字列またはng-init属性を使用して、電卓でデータを事前入力する方法は2つあります。

ng-init属性による

プリフィル設定は、ng-init-init()関数に新しいオブジェクトとして挿入されます (例:値:{})。 個々の値を設定するには、フィールドIDとその値を持つキーを追加する必要があります。 (例: 値:{F12345: '例値'} - この例の設定では、フィールドID F12345に 'example value'があらかじめ入力されています)。 したがって、埋め込みコード自体は次のようになります。

<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 = "load()"> </ div>

電子メール、スライダ、ラジオ、テキスト、テキストエリア、支払いフィールド、チェックボックスフィールドのみがプレフィル可能です。

あなたの計算機で支払いフィールドが使用されている場合は、新しいオブジェクトを追加してすべての請求情報(カスタムチェックボックスを除く)を事前に入力することができます 請求値{} (例:値:{billing:{}}).

請求書inf。 プレフィル:

住所、市区町村、会社名、国名、Eメールアドレス、姓、名字、電話番号、住所、郵便番号

例:

<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 =会社としての注文のチェックボックス( true or false)

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 - 支払い請求情報のVAT ID
  • BillingValidViesVatID - VIESによるVAT ID検証が有効な場合、この変数が有効になります。 検証が成功すると1を返し、そうでない場合は0を返します。
  • PaymentType - 選択された支払いタイプを返します(paypal = 1、ストライプ= 2、請求書= 3)

インテグレーションと電子メールで使用可能な変数

一部のタイプのフィールド(結果の送信や支払いなど)では、電子メールテンプレートが使用されます。 テンプレートでは、これらの変数は電子メールが送信される前に実際のデータに置き換えられます。 統合についても同様です。

  • {FX:値} - 単一項目値 * FXをフィールドIDで置き換えます。 例: F3456
  • {FX:名前} - 単一フィールド名 * FXをフィールドIDで置き換えます。 例:F3456
  • {FX:ヒント} - 単一フィールド記述 * FXをフィールドIDで置き換えます。 例:F3456
  • {FX:接頭辞} - 値の前にある単一フィールドのテキスト * FXをフィールドIDで置き換えます。 例:F3456
  • {FX:後置} - 値の後の単一フィールドテキスト * FXをフィールドIDで置き換えます。 例:F3456
  • {calculatorName} - 計算機の名前
  • {fields} - フィールドのリスト
  • {sourceUrl} - 電卓のURL
  • {description} - 電卓の説明
  • {userName} - 著者アカウント名
  • {email} - EmailまたはPaymentフィールドからのメールアドレス
  • {価格} - 支払いフィールドからの価格
  • {currency} - 支払いフィールドの通貨
  • {ステータス} - 礼状
  • {b illing:firstname } - 支払い請求情報からの名
  • {b illing:lastname } - 支払い請求情報の姓
  • {b illing:address } - 支払い請求情報からの住所
  • {b illing:city } - 支払い請求情報からの都市
  • {b illing:country } - 支払い請求情報からの国
  • {b illing:zip } - 支払い請求情報からの郵便番号
  • {b illing:companyName } - 支払い請求情報からの会社名
  • {b illing:vatid } - 支払い請求情報からのVAT ID
  • {submissionId} - 電子メールまたは支払依頼の一意のID(請求書の参照番号として使用できます)

電卓を埋め込む方法

電卓を埋め込むには、埋め込む"タブをクリックし、HTMLコードをコピーします。

  • iFrameを使用しないHTMLコード - このコードはあなたのウェブサイトのCSSを採用します。 CodePenでコードをテストすることを確認してください
  • iFrameを使用したHTMLコード - あなたのウェブサイトに電卓を埋め込む際にフォーマットに問題がある場合は、電卓を作成する際にCalculoidで選択したフォーマットで電卓に表示される2番目のオプションを使用してください

埋め込みの詳細については、Calculoidの電卓の埋め込み".

Calculoid.com

統計

特定の計算機に関する提出の詳細とレポートを検索するには、細部"タブをクリックします。グローバル統計については、右上隅のプロファイルアイコンをクリックし、統計" メニュー項目。

  • 提出 - 支払いと保留中の支払いを含む、あなたの電卓を介して行われたすべての提出を参照してください
  • レポート あなたの電卓が何回見られたか、何回の提出が完了したかを見てください
    Webhooks

Calculoid.com

追加情報

今すぐ無料で開始

数分で独自のWeb電卓を作成してください。
30-dayフリートライアルのすべての機能をテストします。

無料サインアップ

クレジットカードやインストールは必要ありません

お問合せ

電話番号

米国:+ 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

簡単なソフトウェア株式会社

ケンプハウス、152-160
シティロード、EC1V
2NXロンドン、イギリス
企業ID:08960980
付加価値税ID:GB226711521

簡単な開発センター

Jugoslávskýchpartyzánů34
160 00プラハ
チェコ共和国