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

# URL Integration

> You can use the below pre-written code to quickly get started on adding a Sell Crypto button that opens the MoonPay widget in a new browser tab.

export const ExampleButtonSell = () => {
  const handleClick = () => {
    window.open("https://sell-sandbox.moonpay.com/?apiKey=pk_test_oxQY1qdAGKlItZrVIRQ9qpNwpfAPHjQ&theme=dark&defaultBaseCurrencyCode=eth&baseCurrencyAmount=0.05&colorCode=%237d01ff", "_blank");
  };
  return <div className="flex items-center justify-center">
      <button type="button" className="flex items-center justify-center" style={{
    backgroundColor: "#7d00fe",
    border: "none",
    color: "white",
    padding: "15px 10px",
    fontSize: "16px",
    cursor: "pointer",
    borderRadius: "4px",
    textAlign: "center",
    margin: "0 20px",
    minWidth: "300px",
    whiteSpace: "nowrap",
    height: "50px"
  }} onClick={handleClick}>
        <img src="https://images.crunchbase.com/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/jglje7ar0xc6j5lvai6t" alt="MoonPay" style={{
    width: "40px",
    height: "40px"
  }} />
        Off-ramp with MoonPay
      </button>
    </div>;
};

<Tabs>
  <Tab title="Sandbox">
    **URL**: `https://sell-sandbox.moonpay.com/?apiKey=pk_test_123`

    <CodeGroup>
      ```html sandbox.html theme={null}
      <!--Opens the MoonPay widget in a new browser tab-->
      <body>
          <div class="container">
              <button onclick="window.open('https://sell-sandbox.moonpay.com/?apiKey=pk_test_123', '_blank')">Buy with MoonPay</button>
          </div>
      </body>
      ```

      ```css sandbox.css theme={null}
      .container {
      background-color: #392a54;
      padding: 20px;
      text-align: center;
      }

      button {
      background-color: #7d00fe;
      border: none;
      color: white;
      padding: 15px 50px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 4px;
      background-image: url("https://images.crunchbase.com/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/jglje7ar0xc6j5lvai6t");
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain;
      }
      ```
    </CodeGroup>
  </Tab>

  <Tab title="Production">
    **URL**: `https://sell.moonpay.com/?apiKey=pk_live_123`

    <CodeGroup>
      ```html sandbox.html theme={null}
      <!--Opens the MoonPay widget in a new browser tab-->
      <body>
          <div class="container">
              <button onclick="window.open('https://sell.moonpay.com/?apiKey=pk_live_123', '_blank')">Buy with MoonPay</button>
          </div>
      </body>
      ```

      ```css sandbox.css theme={null}
      .container {
      background-color: #392a54;
      padding: 20px;
      text-align: center;
      }

      button {
      background-color: #7d00fe;
      border: none;
      color: white;
      padding: 15px 50px;
      font-size: 16px;
      cursor: pointer;
      border-radius: 4px;
      background-image: url("https://images.crunchbase.com/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/jglje7ar0xc6j5lvai6t");
      background-repeat: no-repeat;
      background-position: right center;
      background-size: contain;
      }
      ```
    </CodeGroup>
  </Tab>
</Tabs>

## Here's an example. Give it a try

<ExampleButtonSell />
