Service for websites, blogs and virtual classrooms

Chemical reaction embedder

Show on your page a chemical reaction analyzed by ChemModel: the equation with formulas, whether it is balanced, suggested coefficients, the reaction type and every reactant and product in 3D. Free, no sign-up and nothing to install: just paste a code snippet.

Open the reaction editor Three ways to embed a reaction ↓

Live preview

What your reader sees

The equation with formulas and the reaction title.
Whether it is balanced and, if not, the coefficients that balance it (with a button to apply them).
The reaction type (combustion, neutralization, esterification, addition…) with a short explanation.
Each species in an interactive 3D viewer, with name, formula and molar mass.
Export the reaction as a PNG image and a link to open it in ChemModel.

Three ways to embed a reaction

A · From the editor (recommended for publishing)

Open the ChemModel reaction editor.
Search the reaction by name, pick a template or draw it.
Check the analysis: make sure it is the reaction you want to show.
Press “</> Embed”: the code is copied with the reaction already fixed. Paste it into your page.

<iframe src="https://chemmodel.com/embed/reaccion?rxn=CC(%3DO)O.CCO%3E%3ECCOC(C)%3DO.O&label=Fischer%20esterification&lang=en"
  width="100%" height="560" style="border:none" loading="lazy"
  title="ChemModel — Fischer esterification"></iframe>

B · By name

Write the reaction name in the address. ChemModel recognizes it among its templates or interprets it with AI, checks that it is chemically valid (that it can be balanced) and remembers it, so your page always shows the same one.

<iframe src="https://chemmodel.com/embed/reaccion?q=bromination%20of%20propanol&lang=en"
  width="100%" height="560" style="border:none" loading="lazy"
  title="ChemModel"></iframe>

⚠ Names can be ambiguous (“bromination of propanol” can be done with HBr or PBr₃). For a published article, use option A or C: they fix the exact reaction.

C · With reaction SMILES

If you know SMILES notation: reactants>>products, with molecules separated by dots. To set coefficients, repeat the molecule. Encode the text for the URL (encodeURIComponent: > → %3E, = → %3D).

CC(=O)O.CCO>>CCOC(C)=O.O
→ rxn=CC(%3DO)O.CCO%3E%3ECCOC(C)%3DO.O

Parameters

rxn=Exact reaction as reaction SMILES (encoded). Takes priority over q.

q=Name or description of the reaction (e.g. “bromination of propanol”).

label=Title shown above the equation (optional).

lang=Interface language: es (default) or en.

h=Frame height in pixels: 300 to 1000 (default 520). Recommended: 560.

On your platform

HTML / any website: paste the <iframe> code where you want it to appear.
WordPress: “Custom HTML” block with the <iframe>, or the shortcode below.
Moodle / Google Classroom / Canvas: in the editor, “HTML” or “Embed code” button, then paste the <iframe>.
Blogger / Google Sites: “Embed” → “Embed code”.

WordPress shortcode

Add this code to the ChemModel plugin or to your theme’s functions.php. Then you can write in any post: [chemmodel-reaccion nombre="bromination of propanol"]

// [chemmodel-reaccion nombre="bromination of propanol"]
// [chemmodel-reaccion rxn="CC(=O)O.CCO>>CCOC(C)=O.O" titulo="Fischer esterification" alto="560"]
add_shortcode('chemmodel-reaccion', function ($atts) {
  $a = shortcode_atts(['rxn' => '', 'nombre' => '', 'titulo' => '',
                       'alto' => '560', 'lang' => 'en'], $atts);
  if ($a['rxn'] === '' && $a['nombre'] === '') return '';
  $q = $a['rxn'] !== '' ? 'rxn=' . rawurlencode($a['rxn'])
                        : 'q=' . rawurlencode($a['nombre']);
  if ($a['titulo'] !== '') $q .= '&label=' . rawurlencode($a['titulo']);
  $src = 'https://chemmodel.com/embed/reaccion?' . $q
       . '&lang=' . ($a['lang'] === 'en' ? 'en' : 'es');
  return '<iframe src="' . esc_url($src) . '" width="100%" height="' . intval($a['alto'])
       . '" style="border:none" loading="lazy" title="ChemModel"></iframe>';
});

Good practices

For published content, fix the reaction with rxn= (option A or C).
Always check a reaction interpreted by name before teaching it.
Use label= to give it a clear title (“Fischer esterification”).
Keep the height at 520–600 px so the 3D molecules show without scrolling.

Privacy and performance

The embedded frame shows no ads and uses no cookies or analytics. It only loads when the reader reaches it (loading="lazy") and adapts to the page width and to mobile.

Developer API

The same features are available as a public JSON API:

GET https://chemmodel.com/api/reaction-by-name?q=bromination%20of%20propanol
→ { "rxn": "CCCO.Br>>CCCBr.O", "title": { "es": "…", "en": "…" }, "source": "ai" }

GET https://chemmodel.com/api/reaction?rxn=CC(%3DO)O.CCO%3E%3ECCOC(C)%3DO.O
→ { "reactants": […], "products": […], "balance": {…}, "suggested": […], "type": "esterification" }

Usage and limits

The service is free for educational and outreach use. To protect the server there are per-visitor limits (30 analyses per minute) and new by-name interpretations are limited; already known reactions do not count. Reaction classification is automatic: right for textbook cases, but not for all. If you find an error or need heavy usage, contact us.

Open the reaction editor Contact