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

# Framer

> Add 1Price to Framer Landing Page

The following is a guide on how to integrate 1Price with Framer to have dynamic pricing.

<Warning>
  Ensure you have started an experiment to the status `In Progress` before
  following the guide
</Warning>

<Frame>
  <iframe autoplay width="700" height="394" src="https://www.youtube.com/embed/LAkAyY0L-XQ?si=Fghp85d6DmpUScdC" title="How to Add 1Price into Framer " frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />
</Frame>

## Step One: Copy Embeded Code

Navigate to the website settings and insert our script tag in the `Custom Code` section.

<CodeGroup>
  ```html HTML theme={null}
  <script
    src="https://widget.1price.co/script.js"
    data-1p="YOUR_WORKSPACE_ID"
    defer
  ></script>
  ```
</CodeGroup>

<Warning>
  Replace value of `YOUR_WORKSPACE_ID` with your unique `data_1p` found on
  [connect](https://app.1price.co/connect)
</Warning>

<Tip>
  We recommend only placing the script in the `/pricing` page of your website
  (or any place you have pricing) rather than the entire website. This will
  ensure more accurate results.{" "}
</Tip>

## Step Two: Dynamic Price Number

You can create `Code Components` on Framer in the `Assets Tab` by clicking `+`.

Then, use can the 1Price API to change the price value to match with your experiment.

Here is a template you can copy and paste to include as part of your `Code Component`.

<AccordionGroup>
  <Accordion title="[TEMPLATE] Dynamic Price " icon="code" iconType="solid">
    <CodeGroup>
      ```typescript 1Price.tsx theme={null}
      import * as React from "react"

      export function PriceDisplay(props) {
         const [priceDetails, setPriceDetails] = React.useState("")

         React.useEffect(() => {
             async function fetchDynamicPrice() {
                 try {
                     const response = await fetch(
                         "https://widget.1price.co/api/v2/price_value",
                         {
                             method: "POST",
                             body: JSON.stringify({
                                 one_price: $1Price,
                             }),
                         }
                     )
                     const data = await response.json()
                     // VARIES BASED ON PRICE EXPERIMENT
                     const price = data?.products[0]?.monthly?.price.toString()

                     setPriceDetails(price)
                 } catch (error) {
                     console.error("Error fetching US price:", error)
                     setPriceDetails("10") // TO CHANGE: FALLBACK PRICE
                 }
             }

             fetchDynamicPrice()
         }, [])

         return (
             <div
                 style={{
                     fontSize: "50px",
                     fontWeight: "bold",
                     fontFamily: "Inter, sans-serif",
                     color: "#333333",
                 }}
             >
                 ${priceDetails}
             </div>
         )

      }

      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>

## That's it!

There is no need, to track checkout sessions since **your users will likely purchase within your app, not on your landing page**.

<Note>The following are a couple other cases you might fall in:</Note>

<AccordionGroup>
  <Accordion title="For Stripe Payment Links" icon="stripe-s" iconType="solid">
    Add a function have all Stripe buttons tagged on the experiment.

    ```javascript updateButton() theme={null}
    <script>
    function updateButtonUrls() {
      var buttons = document.querySelectorAll('a[href^="https://buy.stripe.com"]');
      if (window.$1Price) {
        for (var i = 0; i < buttons.length; i++) {
          var btn = buttons[i];
          if (btn.href.indexOf("client_reference_id") === -1) {
            btn.href = btn.href + '?client_reference_id=' + window.$1Price;
          }
        }
      }
    }  setTimeout(updateButtonUrls, 1000);
    setTimeout(updateButtonUrls, 1900);
    setTimeout(updateButtonUrls, 2600);  window.addEventListener("$1Price_ready", function() {
      if (window.$1Price) {
        updateButtonUrls();
      }
    });
    </script>
    ```
  </Accordion>
</AccordionGroup>

## 🧪 ​{" "} Test Integration:

1. Start an experiment on 1Price <br />
2. Make a test purchase on your website
3. Ensure transaction was tracked on dashboard

> **BONUS:** You can create a 100% off coupon on Stripe and use that code to make the test purchase, so you do not get charged.

<Tip>
  You can always contact us via live chat or [email](hello@1price.co) and we can
  set up a price experiment together!
</Tip>