Add Multiple Galleries to Your Website

1. Click into the Publish Center and edit the first gallery that you want to add to your website.

2. Click "Generate Embed Code".

3. Copy the apiKey (in this example IWu1s51e3d7QKpSYubM0) and the widgetId from the embed code (in this example 3009604).

   

4. In the HTML of your webpage, place the following code where you want the first gallery to appear on your webpage. replace WIDGET_ID with the widgetId and API_KEY with the apiKey with you copied in step 3.

   Embed code for every gallery except the last gallery:

   <div id="pixlee-widget-WIDGET_ID"></div>
   <script type="text/javascript">
       window.pixleeArray = window.pixleeArray || [];
       window.pixleeArray.push(function() {
         Pixlee.init({apiKey:'API_KEY'});
         Pixlee.addSimpleWidget({
             widgetId:WIDGET_ID,
             containerId:"pixlee-widget-WIDGET_ID"
         });
       });
   </script>
   

5. Repeat step 1 - 4 for every gallery you wish to embed on the same page except for the last gallery

6. Embed the last gallery on the webpage using the following code by pasting it where you want the gallery to appear and swapping out WIDGET_ID and API_KEY for yours.

   Embed code for the last gallery on the webpage:

   <div id="pixlee-widget-WIDGET_ID"></div>
   <script type="text/javascript">
       window.pixleeArray = window.pixleeArray || [];
       window.pixleeArray.push(function() {
         Pixlee.init({apiKey:'API_KEY'});
         Pixlee.addSimpleWidget({
             widgetId:WIDGET_ID,
             containerId:"pixlee-widget-WIDGET_ID"
         });
       });
       window.PixleeAsyncInit = function() {
         for (i = 0; i < window.pixleeArray.length; i++) {
           window.pixleeArray[i]();
         }
       };
   </script>
   <script src="//assets.pxlecdn.com/assets/pixlee_widget_1_0_0.js"></script>
   

For more details about our widgets, you can view our Widget User Guide. We recommend using no more than 3 displays on your page.