Skip to content

Site integration

Identify staging server

1 - Locate the php theme of the page : https://artloversaustralia.com/shop/joie-de-vivre/

2 - Add this line into the header of the page. 

<head>
    …
    <link rel="stylesheet" type="text/css" href="https://arify.hoverlay.com/public/css/hoverlay.css">
    …
<head>

Mock-up "View In My Room" position/style on mobile

Add code

1 - Edit Php code

Programmatically add a button next to each poster. Include this code snippet html code :

button onclick="location.href='https://view.hoverlay.com/v1/image?height=[HEIGHT]&amp;frame=[FRAME]&amp;url=[ESCAPED_IMAGE_URL]&amp;origin=[ESCAPED_ORIGIN_URL]'" title="View in my room"">
        <div>
            <i style="vertical-align: middle; font-family: hoverlay" class="hoverlay_icon-hoverlay_logo"></i>
            <div style="display: inline-block;">
                View in my Room
            </div>
        </div>
</button>

  • [FRAME] You can decide if you want a frame or not Value can be "no" if you don't want any frame or "default" if you want one.

  • [HEIGHT] : Physical height of the artwork in meter. Height parameter is optional. If no height is provide we assume height is 1 meter Value example : 0.92

  • [ESCAPED_IMAGE_URL] : Link to your jpg or png image located on https server. The url has to end with .jpeg or .png This parameter is mandatory. The Url need to be escaped Value example : https%3A//artloversaustralia.com/wp-content/uploads/2019/01/Joie-de-vivre-26.1118-latest-contrast-600x449.jpg

  • [ESCAPED_ORIGIN_URL] : Original page on your website. Users will be taken to this url when pressing the back button. The URL need to be escaped Height parameter is optional.

2 - Make sure the link only works with mobile device (calling the hoverlay link should only works on mobile)

3 - Size (metrics) – add test (missing value, faulty value) frame/no frame parameter

Example : make sure values are correct and reasonnable. Height should not be lower than 0.20 meter

Example

If we take this page : https://artloversaustralia.com/shop/joie-de-vivre

The hoverlay button should redirect to : https://view.hoverlay.com/v1/image?height=0.92&frame=default&url=https%3A//artloversaustralia.com/wp-content/uploads/2019/01/Joie-de-vivre-26.1118-latest-contrast-600x449.jpg&origin=https%3A//artloversaustralia.com/shop/joie-de-vivre/

The information contained in this is confidential, privileged and only for the information of the intended recipient and may not be used, published or redistributed without the prior written consent of Hoverlay Inc.