Embedded Buy Button

Buy Now buttons live inline with the article content, next to the product mentions. When the reader clicks, the checkout opens as a slide-in panel, modal, or sticky bottom-sheet — the article stays visible behind it. After purchase, the reader closes the panel and continues reading.

​​ When this fits

​​ What the publisher owns

​​ How the embed works

The embed is HTML data attributes on the publisher’s own elements plus one Firmly loader script on the page — there is no Firmly-specific shortcode syntax. The publisher marks up each product mention (a link or button) as a Firmly Buy Now element; Firmly’s loader script resolves the product and wires the click to the checkout drop-in.

At minimum, the publisher-authored element opts in with data-firmly-enabled and points at the product (via its href). When the loader script runs, it resolves the product and sets the remaining attributes it needs on that element at runtime:

• data-firmly-product-url — canonical product URL
• data-firmly-merchant-domain — the merchant the product belongs to
• data-firmly-affiliate-url — the affiliate link (expanded if shortened)
• data-firmly-buy-now-url — the resolved buy target the drop-in acts on

<!-- A product mention in the article, tagged as a Firmly Buy Now element -->
<a
  href="https://<merchant>.com/products/play-gym"
  data-firmly-enabled="true"
>
  Buy Now
</a>

<!-- Firmly loader script — included once per page, loads asynchronously -->
<script
  src="https://<firmly-loader-host>/api/v1/pc-loader/<publisher-domain>"
  async
></script>

When the reader clicks a tagged element, the loader checks that the resolved data-firmly-buy-now-url and data-firmly-merchant-domain are present, prevents the default navigation, and opens the Firmly checkout drop-in as a slide-in panel over the article — the reader never leaves the page.

​​ Fitting it into a CMS

The markup above is what the page renders; how the publisher produces it depends on the CMS. Whatever the authoring surface, the output is the same tagged element plus the site-wide loader script.

The publisher’s editorial workflow stays the same — writers pick a product, the CMS renders the tagged element, and the loader script (added once, site-wide) does the rest.

​​ Cart persistence across multiple Buy Now clicks

For roundup articles where the reader adds multiple items:

• Same cart session — every Buy Now click on the same article session adds to the same cart
• Cross-article carts — if the reader navigates to a different article on the same publisher, the cart persists according to publisher policy. Firmly supports both per-article scoping and cross-article persistence.
• Cart badge updates — increment the badge after each successful Add

​​ Constraints to plan for

• Panel responsiveness. Slide-in panel must work on narrow mobile viewports; design for thumb-reachable controls and a clear close button.
• Article layout interaction. When the panel is open, the article content behind should be inert (no accidental scroll-through). Restore scroll position when the panel closes.
• Cart abandonment. Some readers will add items then close the panel without checking out. Decide whether the publisher offers email capture or other recovery options.
• Multiple Buy Now clicks → confused readers. Clear feedback after each Add (“Added to cart — click cart icon to review”) prevents readers from double-tapping.

​​ Related

• Shoppable Article use case
• Curated Product Roundup use case
• Single Product Purchase Flow
• Dedicated Landing — alternative pattern