> ## Documentation Index
> Fetch the complete documentation index at: https://bruno-a6972042-mintlify-e71a9da4.mintlify.site/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 collection 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 collections from Git

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

<Info>
  Make sure you have [Bruno version **1.40.0** <strong><sup>↗</sup></strong>](https://www.usebruno.com/downloads) or above installed on your system
  to use this feature.
</Info>

### Things You Need

1. Bruno installed on your system.
2. A collection 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 Collection

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-mintlify-e71a9da4/hGIjL4lTnWcO9ANt/v2/images/screenshots/git-integration/share-collection/1-share-collection-overview.webp?fit=max&auto=format&n=hGIjL4lTnWcO9ANt&q=85&s=b4a298cf973fa69bc9e760840375e63b" alt="collection-settings" width="2594" height="1340" data-path="v2/images/screenshots/git-integration/share-collection/1-share-collection-overview.webp" />

3. Copy the generated link (HTML or Markdown).

<img src="https://mintcdn.com/bruno-a6972042-mintlify-e71a9da4/hGIjL4lTnWcO9ANt/v2/images/screenshots/git-integration/share-collection/2-share-link-html.webp?fit=max&auto=format&n=hGIjL4lTnWcO9ANt&q=85&s=ab6a77d1566c86131ba1e0c3966cf637" alt="share-option" width="2602" height="1368" data-path="v2/images/screenshots/git-integration/share-collection/2-share-link-html.webp" />

4. 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 Collection

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-mintlify-e71a9da4/hGIjL4lTnWcO9ANt/v2/images/screenshots/git-integration/share-collection/4-fetch-in-bruno.webp?fit=max&auto=format&n=hGIjL4lTnWcO9ANt&q=85&s=0e9efd79f29f25fc8bd54323114de3bb" alt="open-in-bruno" width="2604" height="1376" data-path="v2/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-mintlify-e71a9da4/hGIjL4lTnWcO9ANt/v2/images/screenshots/git-integration/share-collection/5-save-location.webp?fit=max&auto=format&n=hGIjL4lTnWcO9ANt&q=85&s=7fb0f69f8a8e366d6162e9ed3a287ffa" alt="collection-location" width="2594" height="1340" data-path="v2/images/screenshots/git-integration/share-collection/5-save-location.webp" />

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

<img src="https://mintcdn.com/bruno-a6972042-mintlify-e71a9da4/hGIjL4lTnWcO9ANt/v2/images/screenshots/git-integration/share-collection/6-cloning-collection.webp?fit=max&auto=format&n=hGIjL4lTnWcO9ANt&q=85&s=8c7afcf896a019e5f5e9debed5710f56" alt="clone-collection" width="2594" height="1340" data-path="v2/images/screenshots/git-integration/share-collection/6-cloning-collection.webp" />

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

### 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.

<Info>
  Make sure you have Bruno version **2.3.0** <strong><sup>↗</sup></strong> or above installed on your system
  to use these features.
</Info>

### 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