Skip to main content
Drop zones let you place an external app in a configured area of Fluid Admin, checkout, the slideout cart, or order confirmation. Fluid renders the app from its external URL, so you can extend an experience without changing the surrounding Fluid page.

Choose the right surface

Use Fluid Admin to create, update, activate, and place drop zones for your company. There is no generated reference for the management surface. Its current contract is not reliable enough to publish, so do not treat it as a supported external integration contract. For a direct REST integration, use List drop zones. It is the canonical public Checkout reader. The FairShare SDK uses its own SDK-internal List public drop zones reader. If you are building a direct REST integration, use the Checkout reader instead. Both public readers return the same active zones: those placed on checkout, the slideout cart, or order confirmation.

Embed external content safely

Each drop zone renders content from an external embed URL. Keep your embed responsive, accessible, and able to fail without blocking the surrounding page.

Pick a zone

A drop zone sits on one page, in one zone of that page. These are the zones Fluid’s own pages render. Each table says which column the zone sits in, so your embed can match the background around it.

Checkout

Checkout has two columns. The order summary is on the left, on a light gray background (#f9fafb). The checkout form is on the right, on white (#ffffff).

Order confirmation

Order confirmation uses the same two columns: the order summary on gray on the left, the order details on white on the right.

Admin detail pages

The product, order and customer detail pages in Fluid Admin each have the same four zones: left_column_top, left_column_bottom, right_column_top and right_column_bottom. The slideout cart has zones of its own. Pick them in Fluid Admin. In the Mist CLI, name a zone as <page>__<zone>, for example checkout__below_total or order_detail__right_column_top. See Integration points.

Set the height

A drop zone’s frame starts at the height set on the drop zone, or 120 pixels when none is set. To fit your content, post a resize message from your embed to the parent page:
The frame takes the height you send plus 16 pixels. Fluid accepts the message only from your embed’s own origin and frame, and only for a height above 0 and below 10,000.

Handle context by surface

Checkout embeds receive context for the current cart. Admin detail embeds can receive signed context for the record beside them. These contexts are not interchangeable. Treat every context token as sensitive, validate it on your server, and do not infer broader API access from it. Fluid adds these with ?, so give the drop zone an embed URL without a query string of its own. Embed URLs must use HTTPS. Checkout doesn’t render an embed URL that doesn’t. The admin token names your company, the record type (product, order or customer) and the record’s ID. For a customer, it also carries the member’s ID. Some droplet-installed zones on admin detail pages receive dri and session_token instead, the same values a droplet’s admin embed gets. See Authentication in Mist apps. To react to cart changes in a checkout embed, see Checkout cart events.