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

# Swap in Safe Apps

> With over , Safe is a multi-signature wallet that allows users to manage their assets in a secure and decentralized way.

Safe Dapps, are third party interfaces that live inside the [Safe Wallet Web](https://app.safe.global) and allow users to interact with deFI protocols with a customised user experience.

[CoW Protocol Widget](https://widget.cow.fi) has a deep integration with Safe Dapps, which allows anyone building a Safe Dapp to seamlessly add trading functionality.

This is interesting for Safe Dapps because:

* 🧱 Cut the development costs, building a good trading experience is hard!
* ☔️ Offer users all CoW Protocol innovations, like protection from MEV, just-in-time path finding (optimised for Multisigs), batching of transactions and more.
* 🤑 Create a revenue model for your Dapp by using the `partnerFee` (see [Fees](/governance/reference/fees#partner-fees)).

The easiest way to get started is to follow the steps below.

## Demo

Before you start, you can get a feel of the Safe App example. Feel free to skip this step!

The example shows:

* How to make a new Safe App
* How to make Swaps, Limit orders and TWAPs
* How to control programatically the swap widget
* How to detect trade parameters (token selection, amounts, etc.)
* How to define a dynamic fee
* How to customize the colors, tokens, sounds, etc

To use the demo, just follow the instructions in [Add your custom dapp in Safe Wallet](#add-custom-dapp) below, but instead of adding the URL `http://localhost:9999`, use the URL `https://safe.widget.cow.fi`.

<img src="https://mintcdn.com/cowswap/CRuDHZdY9OcJfwkr/images/cow-protocol/tutorials/assets/images/safe-custom-apps-0-1d0303ae727bd3bfdf44b7315525fc64.png?fit=max&auto=format&n=CRuDHZdY9OcJfwkr&q=85&s=2d8dc1d54cccfad485dd69978eb78999" alt="Safe custom dapps 0" width="3188" height="1584" data-path="images/cow-protocol/tutorials/assets/images/safe-custom-apps-0-1d0303ae727bd3bfdf44b7315525fc64.png" />

## Fork the project

You can use the **safe-app-example** to start with some basic boilerplate code.

Go to [https://github.com/cowprotocol/safe-app-example](https://github.com/cowprotocol/safe-app-example) and fork it.

<img src="https://mintcdn.com/cowswap/CRuDHZdY9OcJfwkr/images/cow-protocol/tutorials/assets/images/fork-b468d55b422e94710529528d2d87f205.png?fit=max&auto=format&n=CRuDHZdY9OcJfwkr&q=85&s=ad9ae4d6cb6e01649cde81237c8521e7" alt="Fork project" width="2800" height="354" data-path="images/cow-protocol/tutorials/assets/images/fork-b468d55b422e94710529528d2d87f205.png" />

This will create a copy of the project so you can safely make modifications on it.

## Clone boilerplate code

Once you have forked the project, clone it to your local machine.

```
git clone <your-repo-url>
```

## Run app locally

Launch the Dapp on port 9999 (for example).

```
# Install dependenciesyarn# Run the appPORT=9999 yarn start
```

The app should be running on [http://localhost:9999](http://localhost:9999).

## Add your custom dapp in Safe Wallet

Go to [https://app.safe.global](https://app.safe.global) and create a safe if you don't have one for Sepolia network (convenient for testing).

Then navigate to: `Apps` > `My Custom Dapps`.

<img src="https://mintcdn.com/cowswap/CRuDHZdY9OcJfwkr/images/cow-protocol/tutorials/assets/images/safe-custom-apps-1-3b9705ecf97607f26754ecef7a6701a5.png?fit=max&auto=format&n=CRuDHZdY9OcJfwkr&q=85&s=39877af6220763af48808060ec7acd70" alt="Safe custom dapps 1" width="3434" height="1338" data-path="images/cow-protocol/tutorials/assets/images/safe-custom-apps-1-3b9705ecf97607f26754ecef7a6701a5.png" />

Add your custom dapp: [http://localhost:9999](http://localhost:9999).

<img src="https://mintcdn.com/cowswap/CRuDHZdY9OcJfwkr/images/cow-protocol/tutorials/assets/images/safe-custom-apps-2-60def2d21f485a8ba7605d13601148c2.png?fit=max&auto=format&n=CRuDHZdY9OcJfwkr&q=85&s=0ba9257c9810cf1613408760cb699ab1" alt="Safe custom dapps 2" width="2932" height="1590" data-path="images/cow-protocol/tutorials/assets/images/safe-custom-apps-2-60def2d21f485a8ba7605d13601148c2.png" />

The dapp should be added in your local browser.

<img src="https://mintcdn.com/cowswap/CRuDHZdY9OcJfwkr/images/cow-protocol/tutorials/assets/images/safe-custom-apps-3-c23426c516c4a73e5b74679f2bcc05e0.png?fit=max&auto=format&n=CRuDHZdY9OcJfwkr&q=85&s=488e10eadd92d73d94c7e3a1e2c8413f" alt="Safe custom dapps 3" width="1568" height="808" data-path="images/cow-protocol/tutorials/assets/images/safe-custom-apps-3-c23426c516c4a73e5b74679f2bcc05e0.png" />

Open the app:

<img src="https://mintcdn.com/cowswap/CRuDHZdY9OcJfwkr/images/cow-protocol/tutorials/assets/images/safe-custom-apps-4-aec790973093a4d97b6aa040ec3f0839.png?fit=max&auto=format&n=CRuDHZdY9OcJfwkr&q=85&s=fe015fd78a73561f641220418ec149f2" alt="Safe custom dapps 4" width="1836" height="1574" data-path="images/cow-protocol/tutorials/assets/images/safe-custom-apps-4-aec790973093a4d97b6aa040ec3f0839.png" />

Try to make your first trade! You might need some tokens, or Sepolia Ether (you could use this [faucet](https://sepolia-faucet.pk910.de)).

## Explore the code

Explore the code and try to make modifications!

It's your code now, try to make something useful for Safe users.

## Follow Up

From here, try to get more familiar with [CoW Protocol](/) and [Safe](https://docs.safe.global), and enhance your application.
