Put Your Rental Shop on Your Website

1. 1
   Allow your website

   In Rentals → Shop → Settings, add your site's address under Allowed embed origins (for example https://yourcompany.com). Browsers refuse to show the shop inside any site that isn't on this list.
2. 2
   Customize the embed

   Open Customize embed on the same page. Pick what to show, the spacing, the background colour and how the frame is sized. The preview shows the result.
3. 3
   Paste the code

   Press Copy code and paste it into your website where the shop should appear.

That covers most websites. The rest of this article is for when you want more: buttons on your own pages that open a category or put gear on the visitor's request, or a layout of your own on phones.

The embed is an ordinary link to your shop with options in the query string. The customizer writes these for you; you only need them by hand to build your own links.

https://productionpal.io/shop/<your-shop>?embed=1&pad=0&bg=f4f6f8&lang=da

The same link can open the shop on a category, a search or a set of filters. These are the options the shop itself writes into the address bar while someone browses, so the easiest way to get one is to set the filters in your shop and copy the address.

Add add= to the link to put gear straight onto the visitor's request list, for a “Rent this” or “Add to cart” button on your own page.

Gear is added on top of what the visitor already picked, never more than you have, and only gear that is listed in the shop. The option is removed from the address once it has been used, so a reload or a shared link doesn't add it again. Nothing is booked: the visitor still reviews and sends the request.

The ids are the gearId of each item in your shop's public data:

https://api.productionpal.io/public/shop/<your-shop>

A link reloads the frame. Your page can instead send the shop a message, and it switches view in place. The shop and your page talk with postMessage:

A button that opens a category, using the message when it can and a new link when it can't:

<button data-shop="cat=Lighting">See our lights</button>

<script>
  const frame = document.querySelector('#pp-shop-your-shop');
  const origin = new URL(frame.src).origin;
  let canOpen = false;

  window.addEventListener('message', (e) => {
    if (e.source !== frame.contentWindow || e.origin !== origin) return;
    if (e.data?.type === 'pp-shop:ready') canOpen = (e.data.accepts || []).includes('open');
  });

  document.addEventListener('click', (e) => {
    const button = e.target.closest('[data-shop]');
    if (!button) return;
    const search = button.dataset.shop;
    frame.scrollIntoView({ behavior: 'smooth' });
    if (canOpen) {
      frame.contentWindow.postMessage({ type: 'pp-shop:open', search }, origin);
    } else {
      // Not loaded yet: load it on that view instead (keeps embed, pad, bg, lang …)
      const url = new URL(frame.src);
      new URLSearchParams(search).forEach((v, k) => url.searchParams.set(k, v));
      frame.src = url.href;
    }
  });
</script>

On a long one-page site, a shop in the middle is hard to use on a phone: visitors scroll past thousands of pixels of gear to reach the rest of the page, and the request bar can't stay pinned. A pattern that works well:

1. 1
   Split the page on small screens

   Show two tabs, for example Home and Shop. The Shop tab shows only the frame.
2. 2
   Give the frame the screen

   On the Shop tab, add fit=0 to the frame's src and make it exactly as tall as the screen below your header. The shop scrolls inside, with its search bar and Review request bar pinned.
3. 3
   Send shop links to the tab

   Make your “See the gear” and “Rent this” links switch to the Shop tab, and let the phone's Back button return to Home.