Embedded iFrame

The method of implementing STYLE PTTRNS as an embedded iframe on your website requires only a little bit of HTML and CSS to be included.

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

HTML

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

<iframe
  loading="lazy"
  allow="camera; web-share"
  scrolling="no"
  class="recommender-iframe"
  src="https://eyewear-uat-v2.pttrns.ai/?language=en-EN&shopId=$yourshopidhere"
>
  <p>Your browser does not support iframes.</p>
</iframe>

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 “height” property is required to display the content correctly.

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

@media only screen and (max-width: 767px) {
  .recommender-iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
  }
}