All Collections
Live Displays
General Settings & Managing Displays
How do I embed my Digital Display on my website?
How do I embed my Digital Display on my website?
Devon Lind avatar
Written by Devon Lind
Updated over a week ago

Once you've created your event, you will have access to the event running page. At the top right of the screen you will see a button, hover over "View Display" > Select "Embed Display" .

Embed Display Popup

Step 1: Add a list of domains that you want to embed your display on - press enter.
Step 2: Place Photoboxx javascript library just before the closing </body> tag on every page.
Step 3: Place the embed snippet code wherever you would like your display placed.

**Note, this embed code converts into an iframe - use the class parameter to add any CSS styling classes as needed to the iframe.

Recommended HTML + CSS for Responsive Display Embedding
Wrap the <pbxx> tag with a div and add a class to the <pbxx> tag (see below)

<div class="display-container">
<pbxx
  type="display"
  displayType="mosaic"
  key="YOURAUTHKEY"
  eventId="YOUREVENTID"
  class="display">
</pbxx>
</div>

Add this into the css styles:

.display-container{
width: 100%;
position: relative;
display: inline-block;
}
/*
   For 16:9 Aspect Ratio padding-top: 56.25%;    
   For 9:16 Aspect Ratio padding-top: 177.8%
*/
.display-container:after{
padding-top: 56.25%; /* 16:9 Aspect Ratio */  
display: block;
content: '';
}
.display{
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

For optimal browser experience please ensure that you have cookies enabled and are using the latest version of Chrome, Safari, or Firefox. It’s very likely that the Photoboxx display also works on older versions of these browsers and potentially other up to date browsers like Opera and Microsoft Edge. If you continue to have issues properly viewing the Photoboxx Mosaic display, please refresh your page and/or download the latest version of Google Chrome.

Did this answer your question?