> For the complete documentation index, see [llms.txt](https://docs.zero-code.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.zero-code.io/web3-builder/minting-experience-using-wix.md).

# Minting Experience using WIX

##

There are two ways to add a minting experience to your WIX app using Zero-Code. After selecting a theme, either dark or light, for the minting experience, you can choose to implement it directly in the body of the page or utilize a lightbox that opens a pop-up when the user clicks on the mint button. In this tutorial, we will guide you through step-by-step instructions for implementing the mint experience in both ways specifically for your WIX app.

### Implementing the Minting Experience in the Body

#### Step 1: Select a Theme 

Choose between a dark or light theme for the minting experience, considering the design that complements your WIX app's aesthetics.

<figure><img src="/files/cv7946o5QenLPQ8VzfOo" alt=""><figcaption></figcaption></figure>

#### Step 2: Copy the Embeddable&#x20;

Link In the Zero-Code interface, find the option to copy the embeddable link for the minting experience. Click on it to copy the provided link to your clipboard.

#### Step 3: Access WIX Editor&#x20;

Log in to your WIX account and navigate to the WIX Editor for the app where you want to implement the minting experience in the body.

<figure><img src="/files/0PS7cJJlmuTGEtwcQ35m" alt=""><figcaption></figcaption></figure>

#### Step 4: Edit Your Page&#x20;

Select the page or section within your app where you want to add the minting experience. Enter the editing mode for that page.

#### Step 5: Add HTML Element&#x20;

In the WIX Editor, find the HTML element in the elements panel and drag it to the desired location on your page.

<div><figure><img src="/files/KI3IN1E6KfTtHRC3ihZv" alt=""><figcaption><p>add dark theme element</p></figcaption></figure> <figure><img src="/files/gkeXDkvjCYNoWdnC9VfA" alt=""><figcaption><p>add light theme element</p></figcaption></figure></div>

#### Step 6: Edit HTML Element&#x20;

With the HTML element selected, click on the settings gear icon. In the settings panel, choose "HTML Settings" and paste the previously copied embeddable link into the HTML code section.

#### Step 7: Save, preview and publish&#x20;

Save your changes and preview your WIX app. Verify that the minting experience appears in the selected location and functions as expected.

<div><figure><img src="/files/rKA70kd0upMwM57pzR0b" alt=""><figcaption><p>preview</p></figcaption></figure> <figure><img src="/files/q5WOyJ8ckYFfIcfg4su8" alt=""><figcaption><p>publish</p></figcaption></figure></div>

### Implementing the Minting Experience using a Lightbox

#### Step 1: Select a Theme&#x20;

Similarly, choose a dark or light theme for the minting experience that suits your WIX app's design.

<figure><img src="/files/cv7946o5QenLPQ8VzfOo" alt=""><figcaption></figcaption></figure>

#### Step 2: Copy the Embeddable Link&#x20;

Copy the embeddable link for the minting experience from the Zero-Code interface, as described in the previous method.

#### Step 3: Access WIX Editor&#x20;

Log in to your WIX account and navigate to the WIX Editor for the app where you want to implement the minting experience using a lightbox.

<figure><img src="/files/0PS7cJJlmuTGEtwcQ35m" alt=""><figcaption></figcaption></figure>

#### Step 4: Add a Button&#x20;

In the WIX Editor, find the button element in the elements panel and drag it to the desired location on your page.

#### Step 5: Edit Button Properties&#x20;

Select the added button, click on the settings gear icon, and customize the button's design and text according to your preference. For example, label it as "Mint" or "Create NFT".

<div><figure><img src="/files/KI3IN1E6KfTtHRC3ihZv" alt=""><figcaption><p>add dark theme element</p></figcaption></figure> <figure><img src="/files/gkeXDkvjCYNoWdnC9VfA" alt=""><figcaption><p>add light theme element</p></figcaption></figure></div>

#### Step 6: Add a Lightbox&#x20;

In the WIX Editor, locate the "Lightbox" element in the elements panel and drag it to the desired location on your page.

<figure><img src="/files/LrLEr7d4hbHBpycF1i9E" alt=""><figcaption></figcaption></figure>

#### Step 7: Configure the Lightbox&#x20;

Customize the lightbox settings by selecting it and clicking on the settings gear icon. Set the lightbox to open when the button is clicked.

<div><figure><img src="/files/p3WXxRxcrgXvCHxG6p7d" alt=""><figcaption></figcaption></figure> <figure><img src="/files/StSICDGbG0LaFnsg79kk" alt=""><figcaption></figcaption></figure></div>

#### Step 8: Insert HTML Code&#x20;

Within the lightbox settings, select the "HTML" option and insert the HTML code provided by Zero-Code for the minting experience. This HTML code will embed the minting experience directly into the lightbox.

<figure><img src="/files/4C6uS4uPbczDfkHGMqfv" alt=""><figcaption></figcaption></figure>

#### Step 9: Save and Preview&#x20;

Save your changes and preview your WIX app. Verify that clicking the mint button opens the lightbox, displaying the minting experience to users.

By following these step-by-step instructions, you can seamlessly integrate a minting experience into your WIX app using Zero-Code. Whether you choose to implement it directly in the body or