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
Submit your Virtual Booth Embed Request form
Retrieve your Prefix URL Virtual Booth URL
Update your Virtual Booth URL
Update the IFRAME code with your Updated Virtual Booth URL
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.