> For the complete documentation index, see [llms.txt](https://docs.tresori.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tresori.xyz/embedded-wallet.md).

# Embedded Wallet

The **Embedded Wallet** section allows users to configure and customize the embedded wallet user interface for their application and generate the required integration code. This feature enables seamless wallet experiences within applications without requiring users to manage external wallets or private keys directly.

**Step-1: Select Project**

At the top of the screen, users must select a project to proceed with embedded wallet configuration.

<figure><img src="/files/vKnVSGsGspEyVGvhxZGU" alt=""><figcaption></figcaption></figure>

* The **Select Project** dropdown lists all eligible and enabled projects.
* A project must be selected before any embedded wallet settings can be configured.
* If no project is selected, the system displays a prompt instructing the user to choose a project.

> **Note:** Embedded wallet configuration is project-specific. Each project can have its own wallet UI settings and integration setup.&#x20;

Once the user selects that specific project, the wallet-specific related configuration will also be enabled, as shown in the image below.

<figure><img src="/files/00WJlGrJN661xrciBGcQ" alt=""><figcaption></figcaption></figure>

#### Wallet Type Selection

**MPC (Multi-Party Computation)**

When **MPC** is selected:

* The wallet is created using **distributed key shares**
* No single private key ever exists in full
* Signing operations require multiple cryptographic parties
* Keys are protected even if one component is compromised

<figure><img src="/files/FX1Dy7tY1NMnn2ikVsrE" alt=""><figcaption></figcaption></figure>

When the user selects the MPC, they need to provide the Specific details for the wallet configuration as well.

**Step-1:** **Select Blockchain**

This dropdown defines **which blockchain ecosystem** the embedded wallet will operate on.

* **ARBITRUM**
* **AVALANCHE**
* **BASE**
* **BLAST**
* **BSC** (Binance Smart Chain)
* **CELO**
* **CONFLUX**
* **ETH** (Ethereum)
* **KALP**
* **LINEA**
* **MANTLE**
* **OPBNB**
* **OPTIMISM**
* **PALM**
* **POLY** (Polygon)
* **SCROLL**
* **SEI**
* **STARKNET**
* **SWELLCHAIN**
* **TRON**
* **UNICHAIN**
* **ZKSYNC**

> Note: The displayed list of chains dynamically depends on the blockchain networks that the user has enabled for the selected project.&#x20;
>
> For more: Go to [Chain & Networks](/chain-and-networks.md)

**Step-2:**&#x20;

Once the user selects a blockchain, the associated networks are automatically displayed, allowing the user to proceed with the required configuration settings.

<figure><img src="/files/PaqF6QtxRd7xocNK6Sed" alt=""><figcaption></figcaption></figure>

**Smart Wallet**

When **Smart Wallet** is selected:

* Wallets are deployed as **on-chain smart contracts**
* Transactions are executed via programmable logic
* Supports automation, policies, and gas abstraction
* Enables account-abstraction-style user experiences

The configuration is organized into multiple tabs:

<figure><img src="/files/lJOSNMHnCEeckfjme6NQ" alt=""><figcaption></figcaption></figure>

* **Theme**: Customize colors, typography, and visual styling.
* **Branding**: Configure logos and brand identity elements.
* **Layout**: Control wallet UI structure and positioning.
* **Features**: Enable or disable supported wallet capabilities.

#### Color Theme

The **Theme** section under Embedded Wallet allows users to customize the visual appearance of the embedded wallet UI to match their application’s branding. All changes are reflected instantly in the **Live Preview**, enabling real-time visualization before deployment.

<figure><img src="/files/Ok0R8njtzSwaBY25Mdki" alt=""><figcaption></figcaption></figure>

This section allows users to define the wallet’s look and feel:

* **Primary Color** – Used for main action buttons and highlights.
* **Secondary Color** – Applied to secondary actions and accents.
* **Background Color** – Sets the overall wallet background.
* **Text Color** – Controls readability and contrast.
* **Border Radius (px)** – Adjusts the roundness of UI components.
* **Font Family** – Selects the typography style for the wallet UI.
* **Dark Mode Support** – Toggle to enable or disable dark mode compatibility.

These settings ensure visual consistency with the host application.

### Live Preview

The **Live Preview** panel displays a real-time representation of how the embedded wallet will appear to end users.

<figure><img src="/files/A0xNq4Dhc7zFqAIZ9MRp" alt=""><figcaption></figcaption></figure>

* Reflects all theme changes instantly.
* Displays wallet login options such as:
  * Social login (e.g., Google)
  * Email or phone-based login
  * External wallet connections (e.g., MetaMask, WalletConnect)

This allows users to validate UI changes before saving or deploying them.

#### Branding Configuration

The **Branding** section allows users to customize the embedded wallet interface with their organization’s identity. This ensures the wallet experience feels native to the application and builds user trust through consistent branding.

**Step-1: Provide Logo URL**

<figure><img src="/files/DRmd8R9EcujoRhkMeuoo" alt=""><figcaption></figcaption></figure>

* Allows users to provide a direct URL to their company logo.
* The logo is displayed within the embedded wallet interface.
* Recommended formats include PNG or SVG for optimal clarity.

**Step-2: Set Company Name**

* Displays the organization’s name within the wallet UI.
* Helps reinforce brand identity during user authentication and wallet interactions.

Once the company name is entered, it automatically appears in the live preview panel, allowing users to instantly see how it will look.

<figure><img src="/files/GZT9CEZciKlMjflYg0N1" alt=""><figcaption></figcaption></figure>

**Step-3: Show Logo**

* Toggle to enable or disable the display of the company logo in the wallet UI.

<figure><img src="/files/HQ1bppcypXOWzNi6V1cR" alt=""><figcaption></figcaption></figure>

* When disabled, the wallet is displayed without custom branding imagery.

<figure><img src="/files/eQTqjfHG4ie98h3MsCJZ" alt=""><figcaption></figcaption></figure>

**Step-4: Show “Powered by Kalp Studio”**

* Controls the visibility of the “Powered by Kalp Studio” attribution.

<figure><img src="/files/X6SwzHMSenWIhCCg8VQY" alt=""><figcaption></figcaption></figure>

* Can be enabled or disabled based on branding and compliance requirements.

<figure><img src="/files/Jr4jPxc2FVY9jaAzfGEP" alt=""><figcaption></figcaption></figure>

**Step-5: Enable T\&C & Privacy Policy**

* When enabled, users are required to acknowledge the Terms & Conditions and Privacy Policy.

<figure><img src="/files/tfrgRN69U2UqdQHueU8W" alt=""><figcaption></figcaption></figure>

* This is recommended for regulatory compliance and transparency.

#### Layout & Behavior

The **Layout & Behavior** section allows users to control how the embedded wallet interface is structured and how login options are presented to end users. This helps tailor the wallet experience based on user preferences, security needs, and application design.

**Logo Position**

<figure><img src="/files/9R25ehGthvEumA6N1dIJ" alt=""><figcaption></figcaption></figure>

* It allows users to define where the logo appears within the wallet UI. This gives them two options:
  * **Left-Allign**

<figure><img src="/files/q2WOYMlnPzic9coDK5Mr" alt=""><figcaption></figcaption></figure>

* **Centre-Allign**

<figure><img src="/files/GdGgsyH1nOol1G4xlm0i" alt=""><figcaption></figcaption></figure>

**Show Social Login**

* When it is enabled, social authentication options such as Google will be displayed, reducing onboarding friction and improving user adoption.

<figure><img src="/files/fwuBhha5B3XP9NvKwH41" alt=""><figcaption></figcaption></figure>

* When it is disabled.

<figure><img src="/files/RhEguWzTbeOrKLfKG7pZ" alt=""><figcaption></figcaption></figure>

**Show External Wallet**

The Show External Wallet option allows users to enable or disable support for connecting third-party wallets within the embedded wallet interface. When this option is enabled, end users can authenticate and interact with the application using external wallets such as MetaMask and WalletConnect, in addition to other available login methods.

**Enable**

When it is enabled, it gives the option to connect the wallet with third-party wallet applications, as shown below.

<figure><img src="/files/B6QQFyAdWjSVCdFzt8Ih" alt=""><figcaption></figcaption></figure>

**Disabled**

When it is disabled, it only gives the default configuration of user onboarding as shown below in the image.&#x20;

<figure><img src="/files/piPwSPWqFmhGsSVWsJnA" alt=""><figcaption></figcaption></figure>

#### Features&#x20;

The **Features** tab allows users to configure which **external wallet providers** can be used alongside the embedded wallet, giving end users flexibility in how they connect and authenticate.

<figure><img src="/files/trJmXt0C0nk5qNapMglG" alt=""><figcaption></figcaption></figure>

Let users **select and manage third-party wallet integrations** that will be available to end users during login.\
**Available Wallet Providers:**

* **MetaMask**
  * Enables users to connect using the MetaMask browser extension or mobile wallet.
* **WalletConnect**
  * Allows users to connect a wide range of mobile wallets via QR code or deep linking.

Each wallet provider includes an **on/off toggle**, allowing precise control over which external wallets are supported.

#### **Toggle Behavior**

* **Enabled (ON):**
  * The selected wallet appears as a login option in the embedded wallet UI. Users can authenticate using their existing external wallet.

<figure><img src="/files/tMjYvn9ZC5avxrfTLyZX" alt=""><figcaption></figcaption></figure>

* **Disabled (OFF):**
  * The wallet option is hidden from the login screen.

<figure><img src="/files/bjop6huBjGAxrZ31kYpJ" alt=""><figcaption></figcaption></figure>

All changes are applied **instantly** and reflected in the **Live Preview** panel.

#### Integration Code

The Integration Code section provides ready-to-use code snippets that allow users to embed the Tresori wallet directly into their application. The generated code automatically reflects the selected project, enabled wallet features, and UI configurations.

Tresori supports two integration approaches:

* **HTML / JavaScript** – For plain HTML, vanilla JavaScript, or any web framework.
* **React / TypeScript** – For modern React-based applications.

Users can switch between these options using the tabs provided.

<figure><img src="/files/GjluqsiYXFnIadISJLAw" alt=""><figcaption></figcaption></figure>

#### Save & Reset Actions

The **Save Configuration** action stores all current theme and UI customization settings for the selected project. Once saved, these settings are applied to the embedded wallet and reflected in the generated integration code, ensuring consistency across all environments where the wallet is used.

The **Reset** action restores all theme customizations to their default values. This allows users to discard any unsaved changes and quickly return to the default configuration, making it for correcting unintended modifications.

<figure><img src="/files/9XIckA3i7nM6PXrANKbJ" alt=""><figcaption></figcaption></figure>