Widget panel

Use the following to inject the iframe in your code (you will need to add your OEM key, so please double check the iframe src attribute) :

<div id="gqwindow">
    <iframe id="gqframe" src='<https://oem-front-dot-smartdata-systems.appspot.com/oem/${OEM_KEY}>'><iframe>
</div>

#gqwindow {
    display: block;
    height: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    right: 0;
    background-color: #111;
    overflow: hidden;
    transition: 0.5s;
    transform: translateX(0%);
    width: 400px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#gqframe {
    background: transparent;
    width: 100%;
    height: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 2px solid transparent;
    background: linear-gradient(180deg, #E94243 0%, #F9B000 36.98%, #2BB4A1 69.79%, #905FA4 100%) border-box;
}

Once this is added, you will have to wait for the iframe to finish loading before trying to open it. This can depend on which front framework you are using.

With simple javascript, you can for exemple add an event listener on the 'load' event and trigger a flag to tell the page that it is safe to open GetQuanty iframe panel :

const gqframe = document.getElementById('gqframe');
gqframe.addEventListener("load", () => { isGqFrameLoadedGlobal = true });