FitEz Integration Guide

Integrate the FitEz size recommender modal into your product pages in four easy steps:

1. Add Modal Styles

Add the following styles to your page's <head> section:


<style>
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
}

</style>

2. Add Modal HTML

Insert this HTML where you want the size recommender trigger to appear:


<!-- Trigger button -->
<a href="#" onclick="openModal()">Know Your Size</a>

<!-- Modal container -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal()">×</span>
        <iframe id="modalFrame" style="width: 100%; height: 400px; border: none;"></iframe>
    </div>
</div>

3. Add JavaScript Functions

Add these functions to handle modal interactions:


<script>
function openModal() {
    document.getElementById('modalFrame').src = 'size_recommender.html';
    document.getElementById('myModal').style.display = "block";
}

function closeModal() {
    document.getElementById('myModal').style.display = "none";
}

window.onclick = function(event) {
    const modal = document.getElementById('myModal');
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

4. Create Recommender Page

Create a new file named size_recommender.html in the same directory and add your recommender form code. Contact us to get a sample code.

Required Credentials

You'll need the following credentials to use the FitEz API:

Contact Us

Schedule a demo today and discover why FitEz is your smartest tech investment this year. Embrace AI-driven precision to delight your customers and boost profits.