Embed Elements

Add marketplace elements to your own website with JamOnBread embeds!

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.

Get started with embed elements here on the link below.

• https://jamonbread.io/embed

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

Step 1: Global Configurations

Navigate to 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 for more info)

Step 2: Select Embed Element

You can choose from following elements:

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

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

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.

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.

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.

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.