-
Notifications
You must be signed in to change notification settings - Fork 2
Embeding of Calculoid's calculators
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.
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:
- Move the CSS to HTML head for faster loading of styles.
- Move the script to before ending body element for faster loading of the website.
- 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>
It is possible to configure embedded calculator via embed code.
- calcId - [integer] - ID of calculator you want to load.
- apiKey - [string] - API key of your Calculoid account.
-
showTitle - [boolean] -
showTitle:1will load the calculator with it's title.showTitle:0will load the calculator without it's title. -
showDescription - [boolean] -
showDescription:1will load the calculator with it's description.showDescription:0will load the calculator without it's description.
{calcId:64,apiKey:'your-api-key',showTitle:1,showDescription:0}
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.