# 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FiE6UxgWevUKv6hZsoAP3%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.38.31.png?alt=media&#x26;token=2cbb31c8-eacc-4b79-88d4-7c128ed3540f" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2Fs5l3dFsxVHqDUz79k7qv%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.53.13.png?alt=media&#x26;token=4dbe1eea-7fca-4726-82d4-df3545a81dbe" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2Fo5xsA8yCfRHNtS3Rsoyg%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.39.46.png?alt=media&#x26;token=6a2139cf-9093-43d7-bdd8-6ce52803bafe" alt=""><figcaption><p>add dark theme element</p></figcaption></figure> <figure><img src="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2F2IZTDCjSyI4ZJSKbaiPk%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.39.25.png?alt=media&#x26;token=47b67ed9-32d6-40cc-86e1-def3cf5d9a4e" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FWkmfu8YTT2xE93K7Cj3l%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.49.52.png?alt=media&#x26;token=f9b39dfb-d0b4-4df3-9706-27b3ce30d79c" alt=""><figcaption><p>preview</p></figcaption></figure> <figure><img src="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FR91NAk86BJbUtZyVFNnU%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.48.58.png?alt=media&#x26;token=c40b024d-cbeb-4b62-b8cc-8c70fd4d5e6e" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FiE6UxgWevUKv6hZsoAP3%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.38.31.png?alt=media&#x26;token=2cbb31c8-eacc-4b79-88d4-7c128ed3540f" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2Fs5l3dFsxVHqDUz79k7qv%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.53.13.png?alt=media&#x26;token=4dbe1eea-7fca-4726-82d4-df3545a81dbe" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2Fo5xsA8yCfRHNtS3Rsoyg%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.39.46.png?alt=media&#x26;token=6a2139cf-9093-43d7-bdd8-6ce52803bafe" alt=""><figcaption><p>add dark theme element</p></figcaption></figure> <figure><img src="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2F2IZTDCjSyI4ZJSKbaiPk%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.39.25.png?alt=media&#x26;token=47b67ed9-32d6-40cc-86e1-def3cf5d9a4e" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FRRbbRnPdQmQN1qSr3uFj%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.57.24.png?alt=media&#x26;token=95e4d533-505d-4458-b1b3-ff20f1d13d4f" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FeUwD9wkvjS7iEPtkA8XJ%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2016.00.03.png?alt=media&#x26;token=07bdfc96-dec1-49d2-88f6-2d237900a57c" alt=""><figcaption></figcaption></figure> <figure><img src="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2F17XobKuaWTlA3A3HUslH%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.59.53.png?alt=media&#x26;token=6d4d4e0e-1b31-455e-937e-e736c9456056" 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="https://586651228-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNhBuH42h7BRRK3WLfzPM%2Fuploads%2FPV0KVkSWWQeQSZdFlTvm%2FCapture%20d%E2%80%99e%CC%81cran%202023-06-03%20a%CC%80%2015.58.35.png?alt=media&#x26;token=e7d8c0e1-7e21-435f-b47f-c368805b46d4" 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