Embeding of Calculoid's calculators

Jan Linhart edited this page Jun 17, 2014 · 2 revisions

The usual way

Every public, finished calculator has it's own "Embed" code which looks like this:

<link rel="stylesheet" href="http://embed.calculoid.com/styles/main.css" />
<script src="http://embed.calculoid.com/scripts/combined.min.js"></script>
<div ng-app="calculoid" ng-controller="CalculoidMainCtrl" ng-init="init({calcId:64,apiKey:''})" ng-include="load()"></div>

This code is similar for every calculator. It vary only at this bit:

{calcId:64,apiKey:''}

This loads calculator with ID 64 and with no API key. You will see your API key there if you are logged in. If you provide your API key there, you will get more permissions according to your membership type.

The more advanced way

With previous example, it is possible to display one calculator per page. If you want to display more then that, change the code like this:

  1. Move the CSS to HTML head for faster loading of styles.
  2. Move the script to before ending body element for faster loading of the website.
  3. Move the ng-app="calculoid" attribute to the starting body tag. That way, you'll load instance of Calculoid app on the whole page and you can load multiple calculators this way.

Example

<html>
<head>
...
<link rel="stylesheet" href="http://embed.calculoid.com/styles/main.css" />
</head>
<body ng-app="calculoid">
...
<div ng-controller="CalculoidMainCtrl" ng-init="init({calcId:64,apiKey:''})" ng-include="load()"></div>
...
<script src="http://embed.calculoid.com/scripts/combined.min.js"></script>
</body>
</html>

Advanced setting of calculator via embed code

It is possible to configure embedded calculator via embed code.

List of available options

  • calcId - [integer] - ID of calculator you want to load.
  • apiKey - [string] - API key of your Calculoid account.
  • showTitle - [boolean] - showTitle:1 will load the calculator with it's title. showTitle:0 will load the calculator without it's title.
  • showDescription - [boolean] - showDescription:1 will load the calculator with it's description. showDescription:0 will load the calculator without it's description.

Example of all available options

{calcId:64,apiKey:'your-api-key',showTitle:1,showDescription:0}

Calculator styling

Calculator is loaded asynchronously into your website HTML. It become part of your website and it inherits webiste's styling (CSS). That means your font, text color and so on should be the same and the calculator shoud look like it belongs there from the begenning.

You maybe noticed there is css style within embed code. This style cares about layout of calculator and styling of some advanced fields such as Slider field.

As the calculator is part of your website, you can style it like anything else.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.