# Website Integration

NMKR Pay can be integrated to any website by adding a HTML snippet to your website.\
Besides the single Token payment, you can also [add quantity options](https://docs.nmkr.io/nmkr-studio/set-up-sales/nmkr-pay/website-integration#pay-button-with-quantity-options) where your customer selects the amount of tokens he want to buy from the dropdown.

{% hint style="info" %}
NMKR Pay won't work embedded in a HTML iframe tag. If you embed NMKR Pay in an iframe it won't be able to communicate with your browser extensions.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/bv1NlCoA0UqqILhTF1t0/blobs/9CmGC0W2IV7BpoxbfOm2/Pay_website_integration.gif" alt=""><figcaption></figcaption></figure>

### Standard Pay button integration

For the NMKR Pay integration, please go to the [price list settings](https://docs.nmkr.io/nmkr-studio/set-up-sales/manage-prices-pricelist) of your project and  to the NMKR Pay integration tab.

<figure><img src="https://content.gitbook.com/content/bv1NlCoA0UqqILhTF1t0/blobs/BUJ9gvLUAEbDgjvJ8vcs/Screenshot%202022-11-20%20at%2017.35.59.png" alt=""><figcaption><p>The NMKR Pay integration tab is right below your price list</p></figcaption></figure>

After you [created your prices](https://docs.nmkr.io/nmkr-studio/set-up-sales/manage-prices-pricelist/create-new-prices) and [set up NMKR Pay](https://docs.nmkr.io/nmkr-studio/set-up-sales/nmkr-pay/set-up-nmkr-pay), you are now ready to integrate NMKR Pay to your website.

#### specify pay button design

The NMKR Pay button comes in three different designs and three different colours that can be selected in the dropdown. Depending on your selection the button link and also the HTML snippet that you can see below the links changes.

<figure><img src="https://content.gitbook.com/content/bv1NlCoA0UqqILhTF1t0/blobs/hNCd7BRzkpOCoFrvg5uY/Screenshot%202022-11-20%20at%2017.39.13.png" alt=""><figcaption></figcaption></figure>

#### Copy and paste the HTML snippet

Click on "copy code to clipboard" and paste the code on your website.

<figure><img src="https://content.gitbook.com/content/bv1NlCoA0UqqILhTF1t0/blobs/QF1yXSVewdN7vjsQP2wX/Screenshot%202022-11-20%20at%2017.41.54.png" alt=""><figcaption></figcaption></figure>

If you're new to HTML or haven't edited website code before:

* **HTML** (HyperText Markup Language) is the foundation of every webpage. It uses simple tags like \<div>, \<button>, or \<section> to place and organize elements (text, images, buttons, etc.).
* The NMKR Pay snippet is self-contained JavaScript + HTML that renders the button and handles wallet/fiat interactions. You only need to insert it into the right spot on your page—typically inside the \<body> section, often within a \<div> or custom block for positioning.
* Most website builders (WordPress, Wix, Squarespace, Webflow, Shopify) have a "Custom HTML", "Embed", or "Code" block/widget where you can paste it directly. For custom sites, open your HTML file in a text editor and paste between \<body> and \</body>.

For a beginner-friendly explanation of HTML structure, tags, and how to add custom code to a page, check out this free guide from [WebsitePlanet](https://www.websiteplanet.com/blog/html-guide-beginners/)

It covers essentials like:

* Basic page structure (\<!DOCTYPE>, \<head>, \<body>)
* Common tags (\<h1>, \<p>, \<img>, \<a>, \<div>)
* How to place elements exactly where you want them

This resource is straightforward, example-heavy, and perfect for understanding where to safely insert the NMKR Pay snippet without breaking your layout.

**Quick Placement Tips**

* **In a website builder:** Look for an "HTML" or "Embed Code" element and paste the snippet there.
* **In raw HTML:** Add it like this for better control:

HTML

```
<section class="payment-section">
  <h2>Purchase Your NFT</h2>
  <!-- Paste your NMKR Pay snippet here -->
  <div class="nmkr-pay-wrapper">
    [YOUR COPIED NMKR PAY HTML/JS SNIPPET]
  </div>
</section>
```

* **Important:** Do **not** place the snippet inside an \<iframe>, as it prevents communication with browser wallet extensions (e.g., Nami, Solflare).

If you want to test it before you embed it to your website, try it with an [online HTML tool](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default). \
The following is an example HTML snippet that you would copy and paste it directly to your website.

```html
<img src="https://studio.nmkr.io/images/buttons/paybutton_1_1.svg" onclick="javascript:openPaymentWindow()">

<script type="text/javascript">
            function openPaymentWindow() {
                const paymentUrl = "https://pay.nmkr.io/?p=7e221683f55e48b9a1f9e2666c6551b7&c=1";

                // Specify the popup width and height
                const popupWidth = 500;
                const popupHeight = 700;

                // Calculate the center of the screen
                const left = window.top.outerWidth / 2 + window.top.screenX - ( popupWidth / 2);
                const top = window.top.outerHeight / 2 + window.top.screenY - ( popupHeight / 2);

                const popup =  window.open(paymentUrl, "NFT-MAKER PRO Payment Gateway",  `popup=1, location=1, width=${popupWidth}, height=${popupHeight}, left=${left}, top=${top}`);

                // Show dim background
                document.body.style = "background: rgba(0, 0, 0, 0.5)";

                // Continuously check whether the popup has been closed
                const backgroundCheck = setInterval(function () {
                    if(popup.closed) {
                        clearInterval(backgroundCheck);

                        console.log("Popup closed");

                        // Remove dim background
                        document.body.style = "";
                    }
                }, 1000);
            }
        </script>

```

### Pay Button with quantity options

<figure><img src="https://content.gitbook.com/content/bv1NlCoA0UqqILhTF1t0/blobs/KqIFZiprlXIuRwBFA7mt/Pay_website_integration_quantity_option.gif" alt=""><figcaption></figcaption></figure>

To integrate a quantity option to your NMKR Pay integration simply add the following snipped and extend with the quantity options (\<option value="n">n\</option>) you need for your project.

```html
<p style="text-align:center;">  

<select id="NFT">
<option value="None">-- Select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
  
<br><br>
</script> </p> 
```

The second step is to change the parameter for the amount of the link in the HTML snippet that was copied from NMKR Studio from c=1"; to c="+NFT.value;

<figure><img src="https://content.gitbook.com/content/bv1NlCoA0UqqILhTF1t0/blobs/6RbVV4mAlNQC8owFHzD4/Screenshot%202022-11-20%20at%2017.50.33.png" alt=""><figcaption><p>Change the amount defining ending of the payment link in your HTML snippet</p></figcaption></figure>

It will now look like this:

```html
const paymentUrl = "https://payment.nmkr.io/?p=29e512...039&c="+NFT.value;
```

{% hint style="warning" %}
Only price/amount-pairs that are previously specified in the [price list](https://docs.nmkr.io/nmkr-studio/set-up-sales/manage-prices-pricelist) will work with the quantity options.
{% endhint %}

The following shows an example of an HTML integration with quantity option 1-5 NFTs per transaction.

```html

<p style="text-align:center;">  

<select id="NFT">
<option value="None">-- Select --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
 
<br><br>

</script> </p>

<img src="https://pro.nft-maker.io/images/buttons/paybutton_1_1.svg" onclick="javascript:openPaymentWindow()">

<script type="text/javascript">
            function openPaymentWindow() {
                const paymentUrl = "https://pay.nmkr.io/?p=cec3419ddf2c4c5ca9b3abdbc719ff29&c="+NFT.value;

                // Specify the popup width and height
                const popupWidth = 500;
                const popupHeight = 700;

                // Calculate the center of the screen
                const left = window.top.outerWidth / 2 + window.top.screenX - ( popupWidth / 2);
                const top = window.top.outerHeight / 2 + window.top.screenY - ( popupHeight / 2);

                const popup =  window.open(paymentUrl, "NFT-MAKER PRO Payment Gateway",  `popup=1, location=1, width=${popupWidth}, height=${popupHeight}, left=${left}, top=${top}`);

                // Show dim background
                document.body.style = "background: rgba(0, 0, 0, 0.5)";

                // Continuously check whether the popup has been closed
                const backgroundCheck = setInterval(function () {
                    if(popup.closed) {
                        clearInterval(backgroundCheck);

                        console.log("Popup closed");

                        // Remove dim background
                        document.body.style = "";
                    }
                }, 1000);
            }
        </script>
```

### Useful parameters for the payment link

By adding the parameter \&pm=wallet or \&pm=fiat at the end of your payment link, you would skip the step where the user selects what payment method he wants to use.[<br>](https://pay.nmkr.io/?p=c6392d1f6047461993b5a5ff48d56d3e\&c=1\&pm=wallet)\
\&#xNAN;**\&pm=wallet** would lead directly to the payment via Cardano Wallet\
\
\&#xNAN;**\&pm=fiat** would lead directly to the [FIAT payment option, if enabled](https://docs.nmkr.io/nmkr-studio/set-up-sales/nmkr-pay/fiat-eth-and-sol-payment).

#### Example

```
https://pay.nmkr.io/?p=c6392d1f60474xyz5a5ff48d56d3e&c=1&pm=wallet
```
