> ## Documentation Index
> Fetch the complete documentation index at: https://docs.choosefloat.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product page widget

> Drop-in instalment messaging and a "How it works" explainer for product and cart pages - no API calls required.

The product page widget renders instalment messaging next to the price (e.g. "or as low as £200.00 over 3 months interest-free"), along with a built-in "How it works" explainer modal, all from a single script tag with no API call or signature required.

<Info>
  If your store runs WooCommerce, Shopify, or Magento with the [official Float plugin](/guides/plugins), instalment messaging is already included, so you don't need to add it yourself. This page is for [custom API integrations](/guides/accepting-payments).
</Info>

<Note>
  The UK widget bundle is rolling out. Until the UK host is live, render instalment messaging yourself from your [merchant config](/api-reference/get-config) and link the explainer page as described in [Accepting payments](/guides/accepting-payments). Talk to your Float contact if you want to be an early adopter.
</Note>

## Add the widget

Place a script tag wherever the messaging should render, typically directly below the price:

```html theme={null}
<script src="https://widgets.choosefloat.com/uk/widget.js?price=600&instalments=3"></script>
```

The script injects its own markup (logo, instalment breakdown, and a "How it works" link) at its own position in the DOM. There's no container element or JS SDK to set up.

<Frame caption="Two widgets on one page, each calculating from its own price and term.">
  <img src="https://mintcdn.com/choosefloat/8_gMd08Bg3w2xeme/images/product-widget.png?fit=max&auto=format&n=8_gMd08Bg3w2xeme&q=85&s=dca7735d7c129b7b6a5cbce8d262bf2b" alt="Two product cards, each showing the Float logo and 'Or as low as £200.00 over 3 months interest-free' and '£325.00 over 4 months' respectively" width="880" height="400" data-path="images/product-widget.png" />
</Frame>

## Parameters

| Param         | Required | Description                                                                                                                                             |
| ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `price`       | Yes      | The product's current selling price in Pounds, as a plain number (e.g. `600` for £600.00, not pence). Use the final, post-discount, tax-included price. |
| `instalments` | No       | Number of interest-free monthly instalments to advertise (e.g. `3`). Defaults to `3`. The American spelling `installments` is also accepted.            |

## Keep the price in sync

If the price can change without a page reload (a variant picker, a quantity stepper, a discount code), call `floatUpdate` on the rendered element:

```js theme={null}
document.querySelector('.float-w').floatUpdate(750);       // new price
document.querySelector('.float-w').floatUpdate(750, 4);    // new price and term
```

With several widgets on the page, scope the lookup to the product you're updating:

```js theme={null}
card.querySelector('.float-w').floatUpdate(newPrice);
```

Re-inserting a fresh `<script>` element also works, but `floatUpdate` avoids the re-fetch. Changing the `src` attribute on an existing script tag does nothing.

## Handle missing or zero price

Don't render the widget with `price=0` or blank. The script renders nothing at all in that case, rather than advertising `£0.00`. Suppress the widget for unpriced or out-of-stock items.

## Multiple widgets on one page

Category, search, and "related products" pages can safely render as many widgets as they like. Each one is scoped to its own instance and calculates from its own `price` and `instalments`.

## What's included

The "How it works" link opens a modal that's already wired up; you don't need to link to the explainer page yourself or build a lightbox. The modal reflects the actual product price, so a £600 product shows a £600 worked example, and it uses the UK copy and card requirements.

<Frame caption="The explainer modal for a £600 product.">
  <img src="https://mintcdn.com/choosefloat/8_gMd08Bg3w2xeme/images/product-widget-modal.png?fit=max&auto=format&n=8_gMd08Bg3w2xeme&q=85&s=534316d2fd3c4989c4c3a59de6e10cef" alt="The How it works modal with the Powered by Float badge, UK copy, and a worked example showing £200 paid today with £400 reserved, then £200 one and two months later" width="820" height="1500" data-path="images/product-widget-modal.png" />
</Frame>

Everything is served as static files from a CDN, and the logo, styles, and fonts are inlined into the script, so rendering the widget is a single request. Nothing further is fetched until a shopper opens the modal.

It only renders correctly from a real page served over HTTP(S); it won't work from a local static file preview.

<AccordionGroup>
  <Accordion title="Does this replace the accepting-payments checkout flow?">
    No, this widget is purely on-page merchandising. You still create a checkout and redirect the shopper as described in [Accepting payments](/guides/accepting-payments) once they choose Float.
  </Accordion>

  <Accordion title="Which instalment plan does the explainer describe?">
    The first instalment is charged at the time of purchase and the remainder of the purchase amount is reserved on the card, with the remaining instalments charged on the same day each month. If your account is configured differently, render your own messaging from your [merchant config](/api-reference/get-config) instead.
  </Accordion>

  <Accordion title="Will it slow down my product pages?">
    The script is about 13 KB gzipped, served from a CDN with a long cache lifetime, and makes no API calls. The explainer modal is only fetched if a shopper actually opens it.
  </Accordion>
</AccordionGroup>