# Swap Integration

We created a component, which is easy to integrate & customize, for use with any website. This allows developers to directly allow swapping of either a selected token or all tokens directly on their site.

### Tutorial

1. Visit [muesliswap.com/creator/embedded-swap](https://muesliswap.com/creator/embedded-swap)
2. Configure to your liking on the right or bottom of the page
3. Copy the generated code (placed below the configuration) into your clipboard
4. And paste it at the corresponding location in your html file
5. You are done! 🥳

<figure><img src="/files/XevFOGYxEvTuTct6NhX9" alt=""><figcaption><p>The embed swap creator page</p></figcaption></figure>

### Configuration

* *Select Base Token / Select Quote Token:* Change the tokens which will be selected after load. Be careful: prices will be quoted in the base token and not in the quote token.
* *Auto Connect to Last Wallet:* Automatically reconnect to the last wallet connector used inside the iframe. This option is not intended to be used in combination with selective auto connecting.
* *Theme:* Let either the website determine the theme (*Detect*) through the system preferences or force the usage of a certain theme (*Dark / Light*). In the future more options will be added here.
* *Hide Background:* Makes the background of the iframe see-through to make it easier to cleanly integrate
* *Tight Layout:* If enabled this option will remove all surrounding paddings and margins of the iframe. This e.g. can be used to stretch the swap modal to the borders of the iframe.
* *Use Recommended Size:* This will set the recommended minimum width and height. We do not recommend going below these defaults.
* *Height / Width:* Make sure to hardcode your width and size here, these arguments will be processed internally. Therefore you should not change the iframe width and height manually!

### Advanced Configuration

You can automatically connect to any (injected) wallet of your choosing by passing the key to a CIP-30 compliant object in `window.cardano` as the first argument. See the explanatory text in the second script element for more details. This should not be used in combination with the *Auto Connect to Last Wallet* option.

To integrate in any framework, please look into how to import and use external javascript files in your framework. Please refrain from downloading and storing the `embed.js` file locally, in case we ever update or change the internally used interface.


---

# 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.muesliswap.com/muesli-api/swap-integration.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.