Pop-over Iframe

The STYLE PTTRNS front-end has been designed with this implementation in mind. This simply looks best and more importantly allows you to trigger the STYLE PTTRNS flow from different pages without leaving the page. E.g., when a user is on your Product Listing Page and clicks a button that has been added – like “Want to know which frame suits you best?” – a user can stay on the PLP and doesn’t have to go through a landing page.
This does however require a small bit of JavaScript to be added to your webpage in addition to HMTL and CSS code.

Visual example of STYLE as a Pop-over Iframe

The URL of the iframe that you will need to include can be found in this part of the document: URL structure.

HTML

For the sample implementation below, a modal with a grey background is used. There is no default src in the iframe tag. It is added in the JavaScript portion so that the browser does not have to load the STYLE PTTRNS front-end until a button created on your website is clicked.

Ensure the iframe has allow=”camera; web-share”.

<div
  id="modal-background"
  class="modal-container modal-container--hidden modal-container--faded"
>
  <div class="modal-content">
    <iframe
      loading="lazy"
      allow="camera; web-share"
      scrolling="no"
      class="recommender-iframe"
    >
      <p>Your browser does not support iframes.</p>
    </iframe>
  </div>
</div>

<div id="button-container">
  <button id="modal-open-button">Open Modal</button>
</div>

CSS

The iframe has an optimal desktop size of at least 1280x720, with a preferred aspect ratio of 16:9. Below a width of 1024 pixels the view will switch to a tablet-oriented view. Below 768 pixels wide it will switch to a mobile view where it will go into full-screen mode.

The iframe content needs guidance to know how big it should be. Setting a "width" and a “height” property is required to display the content correctly.

.modal-container {
  display: flex;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: auto;
  transition: all 0.25s linear;
}

.modal-container--hidden { 
  display: none; 
}

.modal-container--faded { 
  opacity: 0; 
}

.modal-content {
  position: relative;
  margin: auto;
  border-radius: 0px;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 720px;
  margin-left: calc((100vw - 767px) * 0.2);
  margin-right: calc((100vw - 767px) * 0.2);
}

.recommender-iframe {
  border-width: 0px;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 720px;
}

@media only screen and (max-width: 768px) {
  .modal-content {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin-left: 0px;
    margin-right: 0px;
    overflow-y: hidden;
  }

  .recommender-iframe {
    max-width: none;
    max-height: none;
  }
}

JavaScript

The following code will add functions to open and close the modal on the page. Update the ID in the click event listener that opens the modal to ensure this code runs correctly.

var modal = document.getElementById('modal-background');

document.getElementById('modal-open-button').addEventListener('click', () => {
  openModal();
});

window.onclick = function(event) {
  if (event.target == modal) {
    closeModal();
  }
};

window.addEventListener('keydown', function (event) {
  if (event.key === 'Escape') {
    closeModal();
  }
});

window.addEventListener(
  'message',
  (event) => {
    if (event.data.type === 'closeIframe') {
      // Called if the iframe close button has been clicked.
      closeModal();
    }
  },
  false
);
  
function openModal() {
  const iframe = document.getElementsByClassName('recommender-iframe')[0];

  if (!iframe.src) {
    iframe.src = 
'https://eyewear-uat-v2.pttrns.ai/?language=en-EN&shopId=$yourshopidhere';
  }

  modal.classList.remove('modal-container--hidden');

  setTimeout(function() {
    modal.classList.remove('modal-container--faded');
  }, 100);
}

function closeModal() {
  modal.classList.add('modal-container--hidden', 'modal-container--faded') ;
}