# How to export your Widget

It is controlled by the "Use wallet connection inside the widget - Local Signer" switch on the export page. This choice determines the implementation method;

### 1. Local Signer

Local Signer, is an option with a separate session within the Widget for those looking for simplified implementation. The widget handles the wallet connection and the transaction signing.

### Steps

1. Configure the widget according to your preferences.
2. Copy the iframe embed code.
3. Paste the code in your application code.
4. That’s it!

### 2. Parent Signer: 

Parent Signer, is a more advanced option and aims to use the existing Parent App's session; it does not need a separate session for the users. If you want to use your existing wallet connection in the widget, you need to install our JS SDK for easy integration.

### Steps

1. First, install the SDK with npm: 

```
npm install @tinymanorg/tinyman-swap-widget-sdk
```

2. (optional) To get the function parameters easily, you can copy the `Parameters Object` on the export page. 
3. Then, you should use `generateIframeUrl` to generate the iframe URL, for example:

```
const widgetIframeUrl = WidgetController.generateWidgetIframeUrl({
  platformName: "Platform name",
  // should be `true` if you will use your own wallet
  useParentSigner: true,
  // :exclamation:update `accountAddress` value with the real value of the connected account address
  accountAddress: "ADDRESS_OF_SIGNER_ACCOUNT",
  network: "testnet", // "testnet" or "mainnet"
  themeVariables: {
    shouldDisplayTinymanLogo: true
    // you can customize more styles, please refer to configuration page
  },
  parentUrlOrigin: window.location.origin, // or your app url origin e.g. "https://myapp.com"
  assetIds: [0, 10458941]
});
```

4. Use this URL to add the iframe element to your page:

```
<iframe title="tinyman swap widget"
src=`${widgetIframeUrl}`
style="width: 415px; height: 440px; border: none;"
sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
/>
```

5. Now you should be able to see the widget on your page, but still, you need to establish communication between the application and the widget. We use the `postMessage` API for this. Create an instance of `WidgetController` and set up event listeners with your own callbacks. This way, your application will get a message when the widget needs a signature on a transaction, or when there is an error. And you can send the transaction back to the widget after it’s signed.&#x20;

Please follow our quick start guide here: <https://github.com/tinymanorg/tinyman-swap-widget-sdk#quick-start>


---

# 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.tinyman.org/swap-widget/how-to-export-your-widget.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.