This article provides a detailed explanation of the Virtual Booth page creation process and an overview of the many options that can be applied to customize and enhance your users' experience.
To create a new Virtual Booth website, login to your Photo Party Upload account and navigate to the "Virtual Booth" tab. In the "Virtual Booth Sites" section, click the "Create New" link.
If you want to make changes to a site you've already created, click the "Edit" link in the table that's in the same row pre-existing site to which you want to make changes.
Once inside the creator, you'll see the different "pages" that are part of a Virtual Booth website listed on the left, as well as a "Realtime Preview" window on the right, which you can reposition, resize, or close as needed.
When you close the Realtime Preview window, a button will appear on the right which that you can use to reopen it.
The Realtime Preview window is an extremely useful tool, because...
- It shows you what each section of your Virtual Booth will look like once it's published and shared.
- As you click on each section listed on the left, you'll see that the Realtime Preview updates accordingly, showing you each page while you're working on it.
- Changes you make on each page will update in the Realtime Preview (you guessed it) in real time.
- Resizing the Realtime Preview window itself will show you how the graphics will respond to different-sized browser windows, and you can scale it such that you can see how it would look on different mobile device displays, as well.
For instance, here's how a page might look on a desktop browser...
And here's the same page, resized to the way it might look on a mobile phone:
Now, let's talk about the different tools and options you have available to make your Virtual Booth website look the way that you and/or your client wants it to look, in order to create a customized "guest" experience.
The first section listed on the left is the GLOBAL menu. Click there to open up the options menu. This section allows you to edit the aspects and features that apply to the whole website.
- Activate Site: If this box is checked (and the site has been saved), then the website will be accessible and usable via its URL. If this is not checked (and the site has been saved) then the website will not function.
- Name: Enter the name of your Virtual Booth website in this field. If you are using the "Default URL" option (see below) then, this name will become part of the URL, there can be no blank spaces. Use an underscore "_" or a dash "-" instead.
- Website URL: This field displays the web address URL for your Virtual Booth page. If you are using the "Default URL," your site Name will be added to the end of our Virtual Booth's default server domain. If you opt to "Use Custom Domain URL" (see below) then you can enter a custom address for a domain that you own.
- Use Custom Domain URL / Use Default URL (link): Click this link to toggle between the Custom Domain URL and Default URL link options.
- AI Background Removal: Virtual Booth uses a powerful "A.I." (aka "artificial intelligence" well... sorta) software to automatically remove the background from guest photos that are taken/uploaded using Virtual Booth, and replace the background with the background/GIF you've provided for your guest to select. Checking this box enables this option for your Virtual Booth website.
- NOTE: Enabling this option will remove the PAGE 2 (a)/(b) sections in the website creator below, since those sections are only used for manual background removal, not AI.
- Animation IDs: This section will list all of the animations (aka image and GIF graphics) that are available in your account which can be used on your Virtual Booth website(s). For information on how to create animations, check out our tutorial HERE. Select only the graphic(s) that you want to use on this particular site. Select as many or as few as you like. You are required to select at least one in order to save changes to your Virtual Booth site.
- Admin Email: This is the email address provided as being the administrator of your Virtual Booth. This will auto-populate with your PPU account email address.
- Background Color: This option allows you to select the background color that will be used for every page in your Virtual Booth website. You can do this by either a) clicking to open the color selector, or b) entering a specific hexadecimal code for the color that you want to use.
- Loading Page Phrase: Use this field to customize the text that appears when the different pages of your website are loading. We provide "Please Wait..." by default, but you can customize it to your heart's content.
The LOGOS and META TAGS sub-menus can be expanded/collapsed by clocking on the +/- symbols next to each one.
- FavIcon: A "FavIcon" is the tiny image appears when your website is "Favorited" in a browser, and may appear under other circumstances, as well, depending on the browser used to view the site. You don't have to use one, but if you would like to, make sure that it is a "*.ico" file. (Note that you will not be able to see this in the Realtime Preview).
- Logo - Top: Here you can upload any standard image file to serve as your "Logo" (essentially a Header) that appears at the top of Page 1, as well as above the Share options on Page 4. Once uploaded successfully, this will appear in your Realtime Preview.
- Logo-Bottom: Use this option to upload any standard image file to serve as the logo which will appear along the bottom of every page of your Virtual Booth website. Once uploaded successfully, this will appear in your Realtime Preview.
- Logo Tooltip: This is the text that appears when your guest hovers their cursor over the logo image on the site.
- Meta Title:
- Meta Description:
- Meta Keywords:
Next is the PAGE 1 section. Click on the name to expand the menu. This is the first page that your "guest" will see when using your Virtual Booth website. The settings available here can be customized to create a simple, attractive starting point for the Virtual Booth experience.
- Header: Use this field to customize your header text for Page 1 of your site. You can see how your text will look using the Realtime Preview.
- Upload Your Photo Btn: Here you can customize the text that appears in the button guests will use to initiate either taking or uploading their photo. Changes you make here will be reflected in your Realtime Preview.
- Website URL: There's a website link below the Photo Btn on Page 1. Enter any website that you wish to link to your Virtual Booth website. For instance, you may want to use your company's or your client's home page -- but it's up to you! Use the Website URL Text field below to determine what the link actually says on your Virtual Booth site.
- Website URL Text: Enter customized text that will appear on your Virtual Booth's first page and link to the URL entered in the field above.
- Enter Your YouTube Link: Here, you can enter a link to a YouTube video which will be embedded and can be played right here on your Virtual Booth website. You might use this to include your own, customized instructions about how to use the Virtual Booth (featuring your unique content), or you can use it to link any YouTube video that you or your client would like!
Next is the PAGE 2 (a) - PREPARING IMAGE section. Click on the name to expand the menu. (NOTE: If you have enabled AI Background Removal in the GLOBAL menu, this menu is made irrelevant and will have been removed)
If you're not using AI Background removal in your Virtual Booth, then guests can use a simple process of "drawing" on the screen using their mouse or their finger on a touchscreen to tell the Virtual Booth what is "foreground" (to keep) and what is "background" (to be removed). Here, you'll setup the page where they are instructed to do just that.
You can customize the instructions for how to do so, as well as many other features of this page in your Virtual Booth website using the menu options in this section.
- Sidebar Color: This option allows you to select the color that will be applied to the sidebar where the editing opions appear on this page. You can do this by either a) clicking to open the color selector, or b) entering a specific hexadecimal code for the color that you want to use.
- Instructions Title: When the guest arrives on this page, a dismiss-able instructions prompt will appear. Here, you can edit the title of this prompt, written along the top. Feel free to leave it as "Instructions" or change it however you like. Once you start typing in this field, the prompt will appear in your open Realtime Preview.
- Image Prep Instructions: Here you can edit the text that appears in the instructions prompt that appears when your guests arrive on this page. It's helpful to explain how background removal works so that your guests have the best possible experience. We've provided some basic instructions on all new sites, by default, but feel free to customize or change this text as you see fit.
- Image Prep Error Message: If guests don't complete the background removal process, the site won't successfully process their image and proceed to the next page. Here, you can change the message that appears when that's the case. Or, feel free to leave our default text if that works for you.
- Next Btn: The "Next" button appears at the bottom of the page and will progress the guest to the (you guessed it) next page! But you can change the text to say whatever you want, and here's where you do that.
Next is the PAGE 2 (b) - PROCESSING IMAGE section. Click on the name to expand the menu. (NOTE: If you have enabled AI Background Removal in the GLOBAL menu, this menu is made irrelevant and will have been removed)
After your guests use this feature to remove the background and foreground, following the instructions provided on PAGE 2 (a), the image will be processed accordingly. "Page 2 (b)" is the second phase of this process where you can provide additional instructions, like suggesting that they make further changes if the processed background removal isn't quite to their liking.
You can customize the instructions for how to do so using the menu options in this section.
- Drawing Image Title: Much like the "Instructions Title" above, a prompt appears once the image has been processed and the background removed, and this is the title that appears at the top of that prompt. Enter whatever text you like! Click into this field to see the prompt in the Realtime Preview.
- Drawing Image Text: Inside the prompt that appears after the image is first processed, you may want to provide additional instructions which explain that the guest can re-try any areas that don't look quite right, as well as explaining how to proceed. We have some default text here that you are welcome to use, or change, as you see fit. Click into this field to see the prompt in the Realtime Preview.
Now we come to PAGE 3 - SELECT ANIMATION & SAVE GIF. Once the background has been removed from the captured or uploaded guest photo, this page appears allowing the guest to choose from the backgrounds or animations that you've included in this Virtual Booth website. They can also reposition, rotate, or scale their image in relationship to whichever available image or GIF animation background they choose.
Once again, feel free to customize the instructions to reflect your Virtual Booth's own unique style!
- Resize Photo Instructions: The prompt containing these instructions appears when the guest arrives at this page, on the background has been removed from their image. This is where you can provide instructions on how to resize and reposition the image, as well as select from the different graphics available on your site. Click into this field to see the prompt in the Realtime Preview.
- Save Btn: At the bottom of this page is a button that will save the image changes made above, and progress the guest to the Share page. You can change the text of this button using this field.
The final section is PAGE 4 - SHARE THE GIF. This menu allows you to customize the last page in the Virtual Booth experience and the responses and instructions associated with each share option. All sharing options are enabled for every Virtual Booth. These are Facebook, Twitter, Instagram, SMS (text), and Download.
(section continues in screenshot below)
- Share Creation: When your guests arrive on this page, another Instructions prompt will appear (using the "Instructions' title from Page 2a, above). This field allows you to edit the text that appears in the prompt, instructing your guests on how to share their creation!
- Create Another Gif Btn: At the bottom of this page is a button that will restart the whole process, and this is where you customize what that button says.
- Close Btn: On the different sharing prompts that appear, there's a small button in the lower-right which allows the guest to dismiss the prompt if they want to choose another option, instead. You can change the text used for that button here.
- Tweet Instruction Title: This is the title of the prompt that appears when the guest selects the Twitter share option on this page.
- Twitter Message: This is the content of the prompt that appears when the guest selects the Twitter share option on this page.
- Twitter Success Msg: This is the message that appears when the guest has successfully shared to Twitter.
- ADVANCED: This option opens an additional sub-menu of options which you can use to customize the Twitter share experience even more.
- Twitter Success Tab: This is the header of the prompt that appears when a Twitter share is successful.
- Twitter Error Tab: Here you can customize the text that appears if the Twitter share failed for some reason.
- Post to Twitter Btn: You can customize the text that appears in the button the guest uses when they are posting to Twitter.
- Text Me Title: This field customizes the header text of the prompt that appears when the guest chooses the Text share option.
- Enter Mobile: Customize the text next to the mobile number field.
- Send SMS Btn: Customize the text in the button which sends the text in this prompt.
- Invalid Mobile: If someone enters an invalid phone number when attempting to text their content, this will be the message that appears.
- Valid Mobile: When a valid number is entered, this is the text that appears next to a "checkmark" graphic in the in prompt.
- SMS Message: This is the actual text that will appear in the text message along with the content being sent to your guest's mobile.
- SMS Success: When a text has been sent successfully, this is the message that will appear for your guests.
- Download Gif Body: When the guest selects the "Download" option on a mobile device, these instructions will appear, explaining how to save their creation.
- Email Image Title: Customize the text in the header of the email sharing prompt that appears when the email option is selected.
- Enter Email: Customize the text next to the field where guests enter their email address.
- Send Email Btn: Customize the text that appears inside the button that, when clicked, will send the email.
- Enter Email: Customize the text that appears if the guest does not enter a valid email address when attempting to share.
- Email Subject Line: Customize the subject line of the email that the guest will receive, containing their shared content.
- Email Success Msg: Customize the message that appears when the guest has successfully shared their content via email.
- Email Error Msg: Customize the text that appears when for some reason the email has failed to send successfully.
- Email Gif as Video Body: Customize the instructions that appear when your guest is sending a GIF that they've created, explaining that it will be sent as a video file.
- Email Gif as Video Title: Customize the header of the prompt that appears when your guest is sending a GIF file that will be converted into a video.
- Email Body - Gif as Video: Customize the body of the email that will be received by the guest when they've shared a GIF file that will be/has been converted into a video.
- Instagram: When a user selects the Instagram share option, the email settings are used, sending them a version of their content which can be uploaded to Instagram from their PC or mobile device. Unfortunately Virtual Booth cannot (at this time) upload directly to Instagram.
Once you've customized the pages of your Virtual Booth website, be sure to click the SUBMIT button at the bottom to save it all.
There's also a CANCEL option if you want to scrap everything and return to the Virtual Booth section of Event Manager without saving. Please note that if you click CANCEL, all changes made during this visit to the editor will be lost and cannot be recovered.
Check out MORE VIRTUAL BOOTH TUTORIALS!
Questions? Contact email@example.com