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

# Fetch in Bruno Button

export const BrunoButton = ({collectionUrl, width = 160, height = 40, className = '', style = {}}) => {
  const encodedUrl = encodeURIComponent(collectionUrl);
  const buttonUrl = `https://fetch.usebruno.com?url=${encodedUrl}`;
  return <div style={{
    display: 'flex',
    justifyContent: 'center',
    width: '100%',
    margin: '2rem 0',
    ...style
  }} className={className}>
      <a href={buttonUrl} target="_blank" rel="noopener noreferrer" style={{
    textDecoration: 'none',
    display: 'inline-block'
  }}>
        <img src="https://fetch.usebruno.com/button.svg" alt="Fetch in Bruno" width={width} height={height} noZoom style={{
    width: `${width}px`,
    height: `${height}px`,
    display: 'block',
    cursor: 'pointer'
  }} />
      </a>
    </div>;
};

Bruno allows you to share your Git-synchronized workspace and collections via an embedded "Fetch in Bruno" (FiB) button turning the import/cloning process into a single click!

This button can be placed in websites, articles, and documentation, with support for both HTML and Markdown formats.

## Import workspace and collections from Git

This feature helps you to share your workspace and collections in an easy and flexible way - meeting the user wherever they are. Once imported, the user now has a Git-synced collections and can seamlessly pull down new changes as updates are made.

1. [How to share your collections](#how-to-share-your-collections)
2. [How to share your workspace](#how-to-share-your-workspace)

### Things You Need

1. Bruno installed on your system.
2. A collection or workspace that has been initialized as a Git repository [either through the UI](https://docs.usebruno.com/git-integration/using-gui/provider#initializing-git) or from [the CLI](https://docs.usebruno.com/git-integration/using-cli#initializing-git-in-bruno-collection).

### How to Share Your Collections

1. Open Bruno.
2. Either go to the collection Overview tab or click on the `...` and select `Share`.

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/01-share-option.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=fa36b611bb507520bf4a521d14344b04" alt="collection-settings" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/01-share-option.webp" />

3. Go to **Embed** tab and copy the generated link (HTML or Markdown).

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/02-share-embed-markdown.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=905740b8c68239de9f44ba814ea84d4e" alt="share-option" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/02-share-embed-markdown.webp" />

### How to Share Your Workspace

1. Go to workspace settings (double tap on the workspace name) and click on the `...` and select `Export`.

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/07-export-workspace.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=84f1975104141a9bf68394d5fb37e30f" alt="export-workspace" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/07-export-workspace.webp" />

2. Go to **Embed** tab and copy the generated link (HTML or Markdown).

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/08-workspace-export-tab.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=2c010c25ac063b471d7f94b0900902c3" alt="workspace-export-tab" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/08-workspace-export-tab.webp" />

Embed the link into your website, article, or documentation(e.g. GitHub Readme).

<BrunoButton collectionUrl="https://github.com/usebruno/github-rest-api-collection" width={160} height={40} />

### Manual Embedding Options

#### HTML Format

```html theme={null}
<div
  class="bruno-fetch-button"
  data-bruno-collection-url="https://linktoGitCollection.git"
></div>
<script src="https://fetch.usebruno.com/button.js"></script>
```

#### Markdown Format

```
[<img src="https://fetch.usebruno.com/button.svg" alt="Fetch in Bruno" style="width: 130px; height: 30px;" width="128" height="32">](https://fetch.usebruno.com?url=https://linktoGitCollection.git "target=_blank rel=noopener noreferrer")
```

### How to Open Your Shared Workspace and Collections

<Note>
  The same process will follow for both workspace and collections.
</Note>

1. Click on any Fetch in Bruno button.
2. A popup will appear. Click on **Open In Bruno**.

<img src="https://mintcdn.com/bruno-a6972042/lK4oxIJsFt1GYUhN/images/screenshots/git-integration/share-collection/4-fetch-in-bruno.webp?fit=max&auto=format&n=lK4oxIJsFt1GYUhN&q=85&s=795338999dd1ffb583b69642e1d70bd6" alt="open-in-bruno" width="2604" height="1376" data-path="images/screenshots/git-integration/share-collection/4-fetch-in-bruno.webp" />

3. Choose the location where you'd like to store your collection.

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/04-import-dialog.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=810572be73dc8eb44c0d431a0f0c025f" alt="collection-location" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/04-import-dialog.webp" />

4. You will see a list of available Bruno collections in the repository.

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/05-clone-git-dialog.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=ede3b803ae0252dca66a0b7b7fc703a1" alt="clone-collection" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/05-clone-git-dialog.webp" />

Once the collection is loaded in Bruno, you'll be able to see the folder, requests, and all associated parameters.

<img src="https://mintcdn.com/bruno-a6972042/V3LtOSG-Boioz6Xl/images/screenshots/git-integration/share-collection/06-after-fetch.webp?fit=max&auto=format&n=V3LtOSG-Boioz6Xl&q=85&s=6da733cf86f4ac2983a3e9319f9618e0" alt="after-fetch-in-bruno" width="2596" height="1122" data-path="images/screenshots/git-integration/share-collection/06-after-fetch.webp" />

### Customizations

You can replace the Fetch in Bruno title and logo with your preferred logo and name. Simply follow the changes below in the markdown link:

```bash theme={null}
[<img src="your-custom-image.svg" alt="your-custom-name"]
```

Make sure to keep everything else as it is.

## Import collections from OpenAPI Specifications

In addition to importing Git repositories, the Fetch in Bruno button now supports importing OpenAPI specifications directly. This allows you to easily convert any OpenAPI specification into a Bruno collection with a single click.

### How to Use

1. Choose your preferred embedding format:

#### HTML Format

```html theme={null}
<div
  class="bruno-fetch-button"
  data-bruno-collection-url="https://linktoOpenAPIspec.json"
  data-bruno-source-type="openapi"
></div>
<script src="https://fetch.usebruno.com/button.js"></script>
```

#### Markdown Format

```
[<img src="https://fetch.usebruno.com/button.svg" alt="Fetch in Bruno" width="130" height="30">](https://fetch.usebruno.com?url=https://linktoOpenAPIspec.json&type=openapi "target=_blank rel=noopener noreferrer")
```

2. Replace `https://linktoOpenAPIspec.json` with your OpenAPI specification URL.
3. Embed this code in your website, documentation, or any HTML page.

When users click the button, Bruno will automatically:

* Fetch the OpenAPI specification from the provided URL
* Convert it into a Bruno collection
* Open it in the Bruno app and prompt the user to choose a location to save the collection