# \<Signup />

## Create an API Client with limited scopes

1. Go to **Settings >** **API Clients** in Bunny
2. Create a new client and **only** grant the following scopes:

   * `signup:read`

   * `signup:write`

   > **Important:** Do **not** add any other scopes. This ensures you don’t unintentionally expose broader data in Bunny to the public.
3. Copy the **token** (the client’s access token), as you’ll need it to construct the URL.

For more detailed instructions on creating and managing API clients, click [here](https://docs.bunny.com/guide/tour/access-control/api-clients).

## Usage

Because Signup must use a special token, it should have its own BunnyProvider that is not a child of any other BunnyProvider.\
\
The default parameters like defaultFirstName, defaultLastName, etc will have their value inserted by default into the signup fields.\
\
If a valid coupon code is passed in for couponCode parameter, it will automatically be applied for the customer.

```typescript
import { BunnyProvider, Signup } from "@bunnyapp/components";

function App() {
  return (
    <BunnyProvider token={tokenWithSignupScope} apiHost={apiHost}>
      <Signup
        priceListCode="business-monthly"
        returnUrl="https://acme.com/dashboard" // The customer will be led to this url after signing up
        couponCode="FREECARROTS2025"
        defaultFormValues={{
          firstName: 'John',
          lastName: 'Doe',
          email: 'john.doe@example.com',
          accountName: 'Example Account',
          billingCountry: 'US',
          billingState: 'New York',
          billingCity: 'New York',
          billingZip: '10001',
          billingStreet: '123 Main St',
          taxNumber: 'US-12345678',
        }}
        requiredBillingDetails={{ // Specify billing details that should be collected during signup
          billingCountry: true,
          billingState: true,
          billingCity: true,
          billingZip: true,
          billingStreet: true,
          taxNumber: true
        }}
        // Require a payment hold before quote is accepted. Once accepted the hold amount is collected.
        paymentRequiredToAcceptQuote=true
        documentTemplateId="1" // A document template to apply to quote
      />
    </BunnyProvider>
  );
}
```

<figure><img src="/files/iJF6yGT99Gc2yGqIuDi9" alt=""><figcaption></figcaption></figure>

## Using signup with an existing account

To do this, simply replace the signup token with a portal session token ([portalSessionCreate](/developer/using-the-graphql-api/mutations/portalsessioncreate.md)). \<Signup /> will automatically see that the token references an existing account and load existing account data into the component.

## Using signup on your portal page

Instead of embedding the Signup component and creating your own page, you can do this easily with the Bunny portal page. Refer to [these docs](/developer/customer-portal/account-signup.md).

### What happens after signup?

After a user arrives at the Bunny signup page and submits the form, two outcomes are possible:

1. User completes the form but **does not** make a payment
   * **A new account of type “prospect”** is created in Bunny.
   * **No subscription** is created, since no payment was made.
   * You can configure **follow-up workflows** (e.g., automated emails or reminders) to convert these prospects into paying customers.
2. User completes the form **and** makes a payment
   * **A new account of type “Customer”** is created in Bunny.
   * Inside this new account, Bunny will create:
     * **A new billing contact**, containing the user’s name and email.
     * **A new tenant** for the user’s data.
     * **A new payment method** to charge future invoices.
     * **A new subscription**, corresponding to the `priceListCode` you included in the URL.

<figure><img src="/files/7MqtSU39YaDlMwH7qCAS" alt=""><figcaption><p>The accounts page in Bunny. This is where all new accounts from signups will be shown.</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bunny.com/developer/less-than-signup-greater-than.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.