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

# AdsAgreementElement

> Signs the Whop Ads Services and Payment Authorization Agreement for an account. Saving the account's ad-spend billing opens the agreement; until an authorized representative signs it, no campaign can launch. The signer types their full legal name and, optionally, their title, accepts the terms, and the typed signature is filed with the agreement. Once it is signed this shows who signed it and when; before billing is set up there is nothing to sign and it says so. `campaign-creator` opens this over the builder by itself when a launch needs a signature, so mount it yourself only to offer signing ahead of time — on a settings or onboarding page, say.

<Info>This page documents `@whop/elements@1.9.0` and `@whop/elements-react@1.9.0`.</Info>

*Since `v1.9.0`.*

Mounts inside [`Ads`](/elements/beta/ads/overview). `accountId` and `accessToken` come from there. Pass props and callbacks through the create options or React props.

<Note>You can mount this element **inline** (`create`) or open it as a **modal** overlay (`createOverlay`).</Note>

<div data-whop-split style={{ display: "flex", gap: "1.5rem", alignItems: "flex-start", flexWrap: "wrap" }}>
  <div style={{ flex: "1 1 26rem", minWidth: 0 }}>
    <div data-whop-usage="ads/ads-agreement">
      <CodeGroup>
        ```tsx React theme={null}
        import { WhopElements, Ads, AdsAgreementElement } from "@whop/elements-react";
        import { loadWhop } from "@whop/elements";

        function Example() {
          return (
            <WhopElements elements={loadWhop()}>
              <Ads /* options */>
                <AdsAgreementElement onSigned={(e) => console.log(e)} />
              </Ads>
            </WhopElements>
          );
        }
        ```

        ```html JavaScript theme={null}
        <script src="https://cdn.whop.com/elements/amber/elements.js" data-whop-elements></script>
        <script type="module">
          const ads = window.WhopElements().ads.create({ /* options */ });
          ads.create('ads-agreement', { onSigned: (e) => console.log(e) }).mount('#ads-ads-agreement');
        </script>
        ```
      </CodeGroup>
    </div>
  </div>

  <div style={{ flex: "1 1 20rem", minWidth: 0 }}>
    <div data-whop-demo-shell style={{ position: "relative", minHeight: "320px", transition: "min-height 200ms ease" }}>
      <div data-whop-demo-skeleton style={{ position: "absolute", inset: "0", borderRadius: "12px", background: "rgba(140, 140, 140, 0.12)", pointerEvents: "none", transition: "opacity 200ms ease" }} />

      <div data-whop-demo-native="element:ads/ads-agreement" data-whop-elements-version="1.9.0" style={{ position: "relative" }} />
    </div>

    <p style={{ fontSize: "0.8125rem", opacity: 0.7 }}>Example data. [Open the Playground](/elements/beta/ads/overview#playground).</p>
  </div>
</div>

## Props

*This element takes no consumer props.*

## Events

Pass callbacks in the create options or React props.

### `onSigned`

The agreement was signed and recorded. `agreementVersion` is the version that was signed; `acceptedAt` is when, as an ISO 8601 timestamp. A modal closes on this event.

<ResponseField name="payload" type="object">
  <Expandable title="properties" defaultOpen={true}>
    <ResponseField name="agreementVersion" type="string | null" required />

    <ResponseField name="acceptedAt" type="string | null" required />
  </Expandable>
</ResponseField>

### `onLoaderStart`

Runs after the loading skeleton first paints and before `onReady`.

### `onReady`

Runs after the element's first complete paint.

### `onError`

Runs when the element fails to load or crashes. The fallback remains visible. Use `code` for programmatic handling. `sourceKey` identifies a failed host-state source.

<ResponseField name="e" type="object">
  <Expandable title="properties" defaultOpen={true}>
    <ResponseField name="message" type="string" required />

    <ResponseField name="code" type="string" />

    <ResponseField name="sourceKey" type="string" />
  </Expandable>
</ResponseField>

## Methods

Call these on the handle returned by `create`, or through a React `ref`.

### `mount`

Mounts the element in `target` and starts loading. React components mount themselves.

**Parameters**

<ResponseField name="target" type="string | HTMLElement" required />

### `destroy`

Removes the element and releases its frame and subscriptions. You can call it more than once. React removes the element automatically.

### `update`

Merges new props into the mounted element. In React, change the component props instead.

**Parameters**

<ResponseField name="options" type="Partial<AdsAgreementElementProps>" required />

## Styling

This element doesn't expose class names for styling. Use `appearance` (theme, accent color, variables) to restyle it.


## Related topics

- [AdsAgreementElement](/elements/latest/ads/ads-agreement.md)
- [Ads](/elements/beta/ads/overview.md)
- [CampaignCreatorElement](/elements/beta/ads/campaign-creator.md)


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