Skip to main content

Embed a Pricing iFrame

Let visitors buy credits without ever leaving your own website.
The iFrame shows your Pricing page, but still checks out through Quoflo and Stripe.

1 Pick which products to show​

  1. In Settings → Connections → Pricing iFrame choose whether you want a drop-down that lets visitors switch between products.
  2. If you disable the drop-down you can lock the iFrame to a single product.

2 Copy the embed code​

Click Installation Code and copy everything—including the <script> tag.

<iframe
  id="quoflo-pricing-iframe"
  style="
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 800px;
    margin: 0 auto;
  "
></iframe>
<script>
  const params = {
    parentDomain: window.location.origin,          // your site
    commerceTypeId: "YOUR_PRODUCT_ID",             // leave blank for “all”
    commerceTypeSelectDisabled: "false",           // “true” hides the drop-down
  };
  const qs = new URLSearchParams(params).toString();
  const iframe = document.getElementById("quoflo-pricing-iframe");
  iframe.src = "https://YOUR-SUBDOMAIN.quoflo.com/iframe/host-pricing?" + qs;

  // auto-resize & scroll helpers
  window.addEventListener("message", (e) => {
    if (e.origin === "https://YOUR-SUBDOMAIN.quoflo.com") {
      const { height, scrollToTop, scrollToIFrame } = e.data;
      if (height) {
        iframe.style.maxHeight = height + "px";
        iframe.style.height    = height + "px";
      }
      if (scrollToTop) {
        window.scrollTo({ top: 0, behavior: "smooth" });
      }
      if (scrollToIFrame) {
        const top = iframe.getBoundingClientRect().top + window.pageYOffset;
        window.scrollTo({ top, behavior: "smooth" });
      }
    }
  });
</script>

3 Paste into your site​

Add the snippet to any page, anywhere you can paste HTML—most site builders (Squarespace, Webflow, Wix, etc.) have a “Code Embed / HTML block” element.

Need to style it?​

The iFrame inherits your own page width.
Use the inline max-width / max-height styles in the snippet above, or move them to your site’s CSS if you prefer.