> For the complete documentation index, see [llms.txt](https://docs.symm.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.symm.io/exchange-builder-documentation/setting-up-a-frontend-with-symmio.md).

# Setting up a Frontend with SYMMIO

To integrate a frontend with Symmio, follow the steps below. This is a general outline that assumes familiarity with the Symmio ecosystem, smart contract interaction, and frontend development.

### 1. Clone or build the frontend application

Start by cloning the official Symmio Frontend SDK repository, or build your own frontend using the SDK and docs. The SDK handles most of the work of talking to Symmio's APIs and smart contracts. See the Frontend SDK setup guide for how to clone and configure it, or to roll your own.

### 2. Register as an affiliate

In v0.8.5 every frontend trades through the shared **AccountLayer**, and you register as an affiliate so users can create accounts under you and your trades earn fees. Registration is two steps:

1. Request registration with your frontend name, brand color, admin address, fee stakeholder configuration, and the Symmio core instance(s) you'll use.
2. A protocol `APPROVER_ROLE` holder approves it. On approval, an **AccountManager** proxy is deployed for you (deterministic CREATE2), a fee distributor address is generated, and your affiliate is registered on each allowed core.

Once your affiliate is `ACTIVE`, users can create SubAccounts under it, and your affiliate address is what tracks volume and routes platform fees on trades that go through you:

* **User volume tracking:** the affiliate fee system tracks trading volume per affiliate, giving you insight into activity and engagement.
* **SubAccounts and VirtualAccounts:** users create SubAccounts to organize their trades, with per-position isolation handled by the AccountLayer.
* **Automated fee claiming:** trades carry your affiliate address, so collected fees route to your fee distributor automatically.

The auto-deployed AccountManager also exposes the old MultiAccount-style API (`addAccount`, `_call`, and so on) as a backward-compatible entry point. See Building a New Frontend for the account model, and Upgrading from MultiAccount (0.8.4) if you're moving an existing deployment.

### 3. Provide frontend URLs for whitelisting

When your frontend is ready to deploy, share its URL(s) with the team for whitelisting. Provide the production address so it's added to the CORS whitelist; if you have test or staging environments, share those too and the team will whitelist them for development. Whitelisting is required for features like Instant Execution, where a session key signs trades through the Instant Layer for near-instant confirmations.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.symm.io/exchange-builder-documentation/setting-up-a-frontend-with-symmio.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.