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

# Playground

> Restyle a Connect widget and take the embed code with you.

The playground runs the real Connect widget on sample data.
Change the brand colour, corner radius and which sections appear, click through the widget itself, and copy the embed code that reproduces what you built.

It opens in its own tab, because a widget with a verification wizard and a withdrawal flow inside it needs more room than a documentation page has.

<a className="ss-launch" href="https://app.sideshift.app/widget/demo/playground" target="_blank" rel="noopener noreferrer">
  <span className="ss-launch__body">
    <span className="ss-launch__title">Launch the playground</span>

    <span className="ss-launch__sub">
      Payout and pay-in, live, with the embed snippet
    </span>
  </span>

  <span className="ss-launch__arrow" aria-hidden="true">↗</span>
</a>

<Note>
  No access token is involved and nothing there moves money.
  The widget's API calls are answered from sample data in your browser, so the balances, payment methods and history are invented.
</Note>

## What you can change

The controls mirror what the Connect settings screen itself offers, so anything you can set there you can try here first.

| Parameter                                                                           | Values                   | Default  |
| ----------------------------------------------------------------------------------- | ------------------------ | -------- |
| `primaryColor`                                                                      | hex, with or without `#` | `3D8CFA` |
| `borderRadius`                                                                      | `0`-`50`                 | `12`     |
| `buttonGradient`                                                                    | any CSS gradient         | none     |
| `showBalance`, `showHistory`, `showWithdrawHeader`, `showKycHeader`, `showKycSteps` | `false` to hide          | shown    |
| `showQuickAmounts`, `showFeeBreakdown`                                              | `false` to hide          | shown    |

Three of those toggles act on screens you only reach by clicking: `showWithdrawHeader` on the withdraw panel, `showKycHeader` and `showKycSteps` on the verification wizard.
Turn one off, then walk into that screen, and you will see what it removes.

The widget accepts a great deal more - per-colour overrides, typography, spacing, button and card styling, and per-label text.
Those are real and documented in full on [Embedding and customization](/connect/widgets), but nothing in the Connect dashboard sets them, so they are left out of the playground rather than implying a configuration screen that does not exist.

## Two things that surprise people

**Only the literal string `false` hides a section.**
`showBalance=0` and `showBalance=no` both read as true.

**A radius outside `0`-`50` is discarded, not clamped.**
`borderRadius=99` falls back to the 12px default rather than rendering at 50.

There is no `theme=auto`.
The value is accepted but resolves to the light palette.
To follow the reader's system or page theme, detect it yourself and set `theme=light` or `theme=dark` on the iframe URL.