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.

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

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.

Last updated