Love Calculator for Your Website

Add the same responsive Love Calculator to your website with a hosted embed that stays updated by California Calculator.

Enter two names to generate a repeatable entertainment-only compatibility score from a transparent, order-independent name algorithm.

Choose the space available on your page. The calculator automatically adapts for smaller screens.

Maximum widthpxStarting heightpxAccent color#B30000

Hosted widget

Embed the calculator

Open preview

This preview uses the same calculator as the main page. The included resize listener keeps the form, results, visualizations, and required attribution visible as its height changes.

Embed code

<div style="width:100%;max-width:880px;min-width:0;margin:0 auto;">
  <iframe
    id="california-calculator-love"
    src="https://californiacalculator.net/embed/love?theme=b30000&instructions=0&pdfDownload=1&fieldHelp=0"
    title="Love Calculator"
    width="100%"
    height="620"
    loading="lazy"
    style="display:block;box-sizing:border-box;width:100%;max-width:100%;border:1px solid #aeb7bc;border-radius:4px;"
  ></iframe>
</div>
<script>
  window.addEventListener("message", function (event) {
    if (event.origin !== "https://californiacalculator.net") return;
    var data = event.data;
    if (data && data.type === "california-calculator:resize" && data.calculator === "love") {
      var frame = document.getElementById("california-calculator-love");
      if (frame) frame.style.height = Math.min(3000, Math.max(400, Number(data.height) || 620)) + "px";
    }
  });
</script>

Attribution is required. The hosted calculator displays California Calculator branding and the “Get this for your site” link. Do not crop, cover, or remove them.

Simple link

Link to the full calculator

View full page

Use this smaller alternative when your publishing platform does not allow iframes or scripts.

Link code

<a href="https://californiacalculator.net/calculators/love" target="_blank" rel="noopener noreferrer">Open the Love Calculator</a>

Installation

Choose a maximum width, starting height, and accent color.
Select Copy HTML in the Embed code section.
Paste the code into an HTML or custom-code block in your website editor.
Preview the page on desktop and mobile before publishing.

The calculator loads over HTTPS, requires JavaScript, and resizes by exchanging height messages only with the California Calculator iframe.

Love Calculator for Your Website

Widget settings

Embed the calculator

Link to the full calculator

Installation