# Embed Elements

JamOnBread embeds are a free tool that allows you to easily add marketplace functionalities directly to your own website!

With this tool, you can easily add list, buy, and offer action buttons to your collection browser, generate an embed iFrame for an entire collection, add a collection graph, or allow your users to place collection offers directly from your website.

As our smart contract supports revenue-sharing, you can add your own on-chain affiliate code and earn ADA rewards from all JoB native sales and listings led through your website!

Thanks to the versatile settings, this tool is ideal for both plug-and-play and custom integrations.

{% hint style="info" %}
Get started with embed elements here on the link below.

* <https://jamonbread.io/embed>
  {% endhint %}

See example integration of Collection iFrame by ADAPunks: <https://adapunks.net/adapunks-marketplace>

### Step 1: Global Configurations

Navigate to [Embed](https://jamonbread.io/embed) page to start creating elements for your website / platform.

In the Global Configuration you can choose to generate the code for embed elements either in React or vanilla JS. \
\
Select your preferred color theme, add your own branding and unique affiliate code to earn ADA rewards from JamOnBread native listings. (see [On-chain Affiliate Program](/jamonbread/marketplace/on-chain-affiliate-program.md) for more info)

### Step 2: Select Embed Element

You can choose from following elements:

{% tabs %}
{% tab title="Embed Buttons" %}
Embed Buttons are ideal for custom integrations, allowing you to generate action buttons (BUY / LIST / OFFER) for a specific asset by inputting its asset ID.

Thanks to Extra Elements, you can also generate elements with the NFT price and image, which can be added to your website.

You can customize the design of each button type directly in the generator or in your code editor by adding custom CSS.

There is no need to have your own wallet connector, as all transactions are finalized in a new window with an integrated wallet connector. There is always a preview of your element and a test button to see how the integration will work.

Once you’ve configured your settings, you can generate the code for the style, elements, and script. Further changes can also be made in your code editor.

* **Display Offer Button**
  * Option for Buy Button - if asset is not listed for sale, displays offer button instead
* **Always Display Button**&#x20;
  * Option for Buy Button - display buy button even if asset is not listed for sale
  * Has no effect, when display offer button is checked
* **Automatic Transaction Popup**

  * Option for Buy, Offer, List button
  * Finalizing modal is displayed right after clicking action button

  You can make further changes in your code editor as well.

<figure><img src="/files/vrwkg06LXkiJqtiqDfuY" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Collection iFrame" %}
The Whole Collection iFrame is ideal for plug-and-play integrations, allowing you to embed an entire collection by simply adding the policy ID.

The iFrame includes a built-in wallet connector, but note that not all wallets support iFrame, so only select Cardano wallets are available.

All transactions are finalized directly on the JamOnBread marketplace, where all wallets are available.

<figure><img src="/files/W9EoYMMEJuEyUpYQoS40" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/sgzpsTNiCY6deSmYOwUz" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Collection Offer Button" %}
Collection Offer Buttons allow users to place collection offers directly from your platform.

You can customize the design of your Collection Offer Button directly in the generator or in your code editor by adding custom CSS.

When the button is clicked, a new window opens with collection stats and a wallet connector, allowing users to place offers. Collection offers are placed at JamOnBread marketplace, and can be further managed in the user's profile directly on JamOnBread.

<figure><img src="/files/ILb0vylBECccH9xTmQnA" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/uDYDoeG1h0hreTaCHE6g" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Stats Graph" %}
To display a graph with stats for a particular collection, you can embed the stats graph on your website by simply adding the policy ID.

You can also customize the design and select the time frame of the graph.

<figure><img src="/files/ZQZKOTtQZfDAuMMBREGg" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Step 3: Customization and Code Generation

Once you're satisfied with the changes in the generator, click on "Generate Code" to implement the embedded elements on your website or platform.

You can also make further design and configuration customizations directly in your code editor.

When integrating multiple elements on your website, it's sufficient to include the script tags just once before the closing body tag (\</body>).\
\
For support, you can contact us via a ticket on our [Discord](https://discord.com/invite/2TS58QxxwW).


---

# 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://jamonbread-io.gitbook.io/jamonbread/tools/embed-elements.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.