All Collections
VIRTUAL PHOTO BOOTH
Customization & Branding
How to embed the Virtual Photo Booth into your own website using IFRAMES
How to embed the Virtual Photo Booth into your own website using IFRAMES
Seye Omisore avatar
Written by Seye Omisore
Updated over a week ago

Overview

This guide will show you how to embed a virtual photo booth into your own custom website using IFRAMES.

Note: You need to be on the AGENCY plan of PicPic Social. If you are not on the AGENCY plan, please upgrade your account and then come back to this guide.

Steps Needed

  1. Submit your Virtual Booth Embed Request form

  2. Retrieve your Prefix URL Virtual Booth URL

  3. Update your Virtual Booth URL

  4. Update the IFRAME code with your Updated Virtual Booth URL

  5. Input the IFRAME code into the website

1. Submit the Virtual Booth Embed Request form

If you are on the AGENCY plan, submit your request to get access. Allow 24-48 hours for your request to be processed.

2. Retrieve your Prefix URL

When your Virtual Booth Embed request is complete, you will receive an email with your Prefix URL. You will need to use your Prefix URL every time you want to embed the virtual photo booth to a new site. Keep it somewhere easy to retrieve.

Your Prefix URL will look something like this:

http://prefix.boothlinks.com

3. Update your Virtual Booth URL

Create your virtual booth as normal. When you create and save your virtual photo booth, you will be given your URL.

Your link will look something like this:

https://events.picpicsocial.com/123456789/booth

or it may look like:

https://events.picpicsocial.com/custom-slug/booth

Replace the first half of the virtual booth URL with your prefix URL.

Your Updated Virtual Booth URL will look like this:

http://prefix.boothlinks.com/123456789/booth

or it may look like:

http://prefix.boothlinks.com/custom-slug/booth

4. Update the IFRAME code with your Prefix URL

In the code below you will see boothURL. Replace boothURL with your Updated Virtual Booth URL:

<iframe src="boothURL" frameborder="0" allow="camera" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>

The final IFRAME code will look something like this:

<iframe src="http://prefix.boothlinks.com/123456789/booth" frameborder="0" allow="camera" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"></iframe>

5. Input the IFRAME code into the website

When complete, input the IFRAME code into your website. If you have any issues, contact support.

Did this answer your question?