Embed PeptideCheck calculators
Put a PeptideCheck calculator on your own site with two lines of HTML, as a script or as an iframe, or let a platform that supports oEmbed do it from the page address. No account or key, no cookies, nothing loaded from third parties.
- Script or iframe
- No key, no cookies
Embed code
Reconstitution calculator
Script mode
<div data-pepcheck-embed="reconstitution"></div>
<script src="https://peptideprotocolcheck.com/embed/reconstitution.js" async></script>Iframe mode
<div data-pepcheck-embed="reconstitution" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Units converter
Script mode
<div data-pepcheck-embed="units"></div>
<script src="https://peptideprotocolcheck.com/embed/units.js" async></script>Iframe mode
<div data-pepcheck-embed="units" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Vial planner
Script mode
<div data-pepcheck-embed="vial-planner"></div>
<script src="https://peptideprotocolcheck.com/embed/vial-planner.js" async></script>Iframe mode
<div data-pepcheck-embed="vial-planner" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Storage timer
Script mode
<div data-pepcheck-embed="storage-timer"></div>
<script src="https://peptideprotocolcheck.com/embed/storage-timer.js" async></script>Iframe mode
<div data-pepcheck-embed="storage-timer" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Dosage calculator
Script mode
<div data-pepcheck-embed="dosage-calculator"></div>
<script src="https://peptideprotocolcheck.com/embed/dosage-calculator.js" async></script>Iframe mode
<div data-pepcheck-embed="dosage-calculator" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Peptide cycle calculator
Script mode
<div data-pepcheck-embed="cycle-calculator"></div>
<script src="https://peptideprotocolcheck.com/embed/cycle-calculator.js" async></script>Iframe mode
<div data-pepcheck-embed="cycle-calculator" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Peptide titration calculator
Script mode
<div data-pepcheck-embed="titration-calculator"></div>
<script src="https://peptideprotocolcheck.com/embed/titration-calculator.js" async></script>Iframe mode
<div data-pepcheck-embed="titration-calculator" data-mode="iframe"></div>
<script src="https://peptideprotocolcheck.com/embed/embed.js" async></script>Live example
Pick a tool, then copy the script-mode or the iframe-mode code. Paste both lines where the calculator should appear. The calculator fills the width of its container, up to 440 pixels. You can place it more than once on a page. Available now: the reconstitution calculator, the units converter, the vial planner, the storage timer and three planning calculators, each listed below with its snippet.
How it works
Script mode (data-pepcheck-embed="reconstitution" plus /embed/reconstitution.js) builds the form inside a shadow root on your page, so your site styles cannot change it and it cannot change yours. Each time a value changes, the script asks the public calculator endpoint for the numbers. The formula lives on the PeptideCheck server only, so every site that embeds the calculator shows the same output as the PeptideCheck calculator pages.
Iframe mode (data-pepcheck-embed="reconstitution" data-mode="iframe" plus /embed/embed.js) places a titled, lazily loaded iframe that shows the same calculator from /embed/reconstitution/. The iframe resizes itself to its content; the loader accepts a size message only from its own iframe and only from the PeptideCheck address, and keeps the height between 120 and 1600 pixels. Use this mode when your site has a strict content security policy or when you want the calculator fully isolated from your page. The frame is sandboxed to scripts, same-origin requests to PeptideCheck and links that open in a new tab.
oEmbed: the calculator pages announce an oEmbed link. A platform that supports oEmbed discovery can embed a calculator from its page address alone; the response is an iframe with a fixed height and the attribution link. You can also call /wp-json/pepcheck/v1/oembed?url=<page address>&format=json yourself (JSON only; any other address returns 404).
In both modes nothing is stored in the visitor’s browser, no cookies are set, and the only network requests go to PeptideCheck.
Options and events
- Size: wrap the element in your own container to set the width. The calculator never grows beyond 440 pixels. In iframe mode the width is the width of your container and the height follows the content; you can set a starting height with
data-height(a number of pixels). - Several calculators: add the same element more than once; each one works on its own.
- Measuring use: the element sends a
pepcheck:toolbrowser event withdetail.eventset totool_embed_load(the calculator appeared) ortool_result(an output was shown), anddetail.toolset to the tool name (reconstitution,units,vial-plannerorstorage-timer). In iframe mode onlytool_embed_loadreaches your page, once the frame has loaded. PeptideCheck never receives these events. Listen for them only if you want to record usage in your own analytics. - Caching: the script URL above carries a version, so browsers keep it for a year and fetch it again only when the version changes. A script address without a version is cached for one hour.
document.addEventListener('pepcheck:tool', (e) => {
console.log(e.detail.event, e.detail.tool);
}); Public calculator endpoint
Script mode and the iframe page read /wp-json/pepcheck/v1/calc/{tool} (for example /wp-json/pepcheck/v1/calc/reconstitution) with the query values of the tool (the reconstitution calculator takes vial_mg, water_ml and target_mcg, all greater than 0). It needs no key, answers any origin, sends no cookies and returns JSON with the tool’s outputs; the reconstitution calculator returns concentration_mg_ml, draw_ml, units (U-100 syringe) and draws_per_vial. An invalid value returns status 400 with a short message. The limit is 120 requests per minute for each visitor address; please keep your own tools within it.
Attribution and terms
Both modes add a plain link, Calculator by PeptideCheck, in your own page directly below the calculator (in iframe mode it sits outside the iframe). The link is part of the terms of use: leave it visible, keep its address and text, and do not mark it with nofollow or hide it with styles. It is a normal link, not a sponsored one.
The calculator is for laboratory research use only. Embed it on pages about laboratory work, and do not present its output as guidance for use in people. The numbers are a calculation aid provided as is, without warranty; check them against your own records. PeptideCheck may change the calculator or withdraw it.