Skip to main content
The Pocketsflow code component puts a buy button, a link or a product card on any Framer page. Set it up once, then configure each instance from Framer’s properties panel.

​
Install

1

Copy the component

In the dashboard, open Integrations → Site builders, choose Framer and click Copy component code (or Download).
2

Add it to your project

In Framer, open Assets → Code, click + and create a new file. Name it PocketsflowBuyButton, replace its contents with the copied code and save.
3

Place it

Drag PocketsflowBuyButton from Assets onto the canvas and fill in its properties. The dashboard lists the exact values to type.
4

Publish

The checkout opens on your published site and in Framer’s preview. On the canvas, a click selects the layer instead.

​
Properties

A Card reads the product’s public name, price and cover from the Pocketsflow API. No API key is needed or stored in Framer. Subscriptions show as a button.

​
Framer Marketplace

Framer lists components and plugins in its Marketplace after Framer reviews them. Until a Pocketsflow listing is published there, the code component above is the way to add Pocketsflow to a Framer site; it is the same component a listing would install.

​
For developers

The component source lives in the monorepo at integrations/framer/PocketsflowBuyButton.tsx. It loads the same embed script as every other integration.