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

# Framer

> Add a Pocketsflow buy button, link or product card to a Framer site with a code component and its property controls.

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

<Steps>
  <Step title="Copy the component">
    In the dashboard, open **Integrations → Site builders**, choose **Framer**
    and click **Copy component code** (or **Download**).
  </Step>

  <Step title="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.
  </Step>

  <Step title="Place it">
    Drag **PocketsflowBuyButton** from Assets onto the canvas and fill in its
    properties. The dashboard lists the exact values to type.
  </Step>

  <Step title="Publish">
    The checkout opens on your published site and in Framer's preview. On the
    canvas, a click selects the layer instead.
  </Step>
</Steps>

## Properties

| Property | What it does |
| - | - |
| **Store** | Your subdomain (`yourstore`) or your custom domain (`shop.example.com`). |
| **Product ID** | The product or subscription to sell. |
| **Type** | Product or Subscription. |
| **Style** | Button, Link or Card. |
| **Label** | The button text. |
| **Checkout** | Overlay (on top of the page) or New tab. |
| **Button**, **Text**, **Radius**, **Font** | The button's colour, text colour, corner radius and font. |

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](/selling/embed-buy-button) as every other integration.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.