Splash Page Drag-and-Drop Editor

The Drag and Drop splash page editor is the easiest way to create a great looking splash page your guests will see when they access your guest WiFi. Easy to use and feature rich allowing you to create the design you want to represent your business. The drag and drop builder works on the idea of dragging content blocks onto a page from an element selector. The content block HTML can also be edited allowing for near limitless creative possibilities.

To access your splash pages in the dashboard on the menu to the left go to the Network>Splash Pages tab.

To start editing your splash page login to the dashboard and go to Network> Splash Pages and click the edit button to open the drag and drop builder.

Tips and Suggestion

1. Please disable Grammarly or any addons like it before creating content.
2. We recommend an background image size of 1200×900 for optimal resolution on most devices.
3. Images on a splash page can not exceed 1MB.
4. Images must be saved in an standard image format. Documents like PDFs cannot be uploaded as an image.
5. The Walled Garden must be adjusted to accommodate any external content included on the splash page.
6. Advanced content on Email Campaign Templates

Table of Content

1. Drag and Drop Builder element definitions
2. Template and Element selector definitions
3. Simple Splash Page creation instructions
4. Tips and Suggestions
5. Upgrade from Classic builder
6. How To? Drag and Drop splash page video

Drag and Drop builder element definition

1. 1. Pages Tabs- There are a total of four configurable pages to the Drag and Drop builder.
      • • New Guest- This is the page guests will see upon their first connection to your guest WiFi.
          
        • Return Guest- This is the page guests will see after their first connection with a social login.
          
        • Terms & Conditions- This is the message that will appear in the dialog box when a guest clicks on the Terms & Conditions button on your splash page. You will inherit our default Terms & Conditions but you can add any additional language necessary for your business.
          
      • Privacy Policy- This is the message that will appear in the dialog box when a guest clicks on the Terms & Conditions button on your splash page. There is no default text inherited so to use this feature you will need to add content here.
        
      • Guest Device Support- This is the page that will be displayed to guests who click the {$DeviceSettingsSplashPage} key on the Random MAC Address Detection pop up notification. A default template offering instructions on how to disable the feature and a ‘go back’ link configured to restart the captive portal process is included.
        
   2. Merge Codes: Merge codes can be used to simplify splash page creation and add personalization to return guest connections.
      • [VENUE_NAME] Automatically Merges Venue Name when Displayed to Guest
      • [ADDRESS] Automatically Merges Venue Address when Displayed to Guest
      • [PHONE_NUMBER] Automatically Merges Venue Phone Number when Displayed to Guest
        Return Guest Merge Codes
      • [GUEST] Automatically Merges Either the Guest’s First Name, Email Address or Phone Number
      • [FIRST_NAME] Automatically Merges Guest’s First Name when Displayed to Guest
      • [LAST_NAME] Automatically Merges Guest’s Last Name when Displayed to Guest
      • [EMAIL] Automatically Merges Guest’s Email Address when Displayed to Guest
      • [PROFILE_PHONE] Automatically Merges Guest’s Phone Number when Displayed to Guest
   3. Clone: The Clone button will automatically copy all of your content from the New Guest tab to the Returning guest tab so it’s easy to create a similar page for your returning guests. If you click the ‘Next’ button and you have no content in your Returning Guest tab then you will be prompted to clone your New guest page.
   4. Reset: The reset button will clear all of the contents on the current tab so you can start over. This will not clear the background image, you would clear that using the background button.
   5. Set Background: The set background button will allow you to upload a background image and you can even adjust background colors and tints. You can also create a gradient background overlay.
   6. Preview: The preview button will pop-up a page where you can preview what your splash page will look like on various devices. Note: The merge values and connection options may not match your settings in the preview but when the page is saved, the values will be displayed on your Smart WiFi hotspot.
   7. Next: The next button will forward you to the Returning Guest splash page tab. You will NEED to create a splash page for both New Guests and Returning guests before saving your page. Be sure to include connect options on each page.
   8. Close: The close button will close the Drag-and-Drop editor WITHOUT saving any changes. If you want to Save your changes, you will save those from the Returning Guests tab.

   9. Save: The Save button (located on the Returning Guests tab) will Save your splash page design and will be running on the selected Smart WiFi hotspots.

Template and Element Selector definition

Click the grey arrow to open the template and elemental selector. Use the pull-down menu to select the elements that you would like to include on your splash page. We offer a variety of templates that are ready-to-go! Simply drag the elements or pre-created templates to the left hand side to add to the Splash page. You can edit any of the text and images in the editor area.

1. 1. Templates – Ready to go templates available for you to use. Update the template settings to match your venue and save.
   2. Guest Device Support- Ready to use template providing details about MAC address privatization and how it can be disabled on most devices.
   3. Profile Management-This content block can be used by Guests to access their Guest Profile Management page.
   4. Touchless Menus- Ready to go templates available for your menu. Update the template settings to match your venue and save.
   5. Health & Safety Tips- blocks as well as a template of safety tips for guests visiting your venue.
   6. All- This will display all of the splash page content blocks in order of this list.
   7. Titles & Subtitles- block templates containing different font sizes and separation
   8. Connect Buttons- blocks containing different style connect buttons.
      

      Your return guest splash page must have a Connect Button.

   9. Action Buttons- blocks containing different style action buttons.
      

      Action buttons are used with Guest Flows. A splash page with an action button not used in a flow will be treated as a connect button.

   10. Social Connect Buttons- blocks containing the different available social login options as well as the ‘Opt-In’ checkbox, ‘Opt-Out and Connect’ button & the ‘Social Connect’ button used for splash pages with an email form field.
   11. Terms & Conditions Buttons- blocks containing different style Terms & Conditions buttons.
   12. Privacy Policy- blocks containing different style Privacy Policy buttons.
   13. Images- single block templates containing different size and layout image arrangements.
   14. Images with Captions- block templates containing different size and layout image arrangements with text.
   15. Cards- block templates in a condensed “card”format. Some of these templates may not be ready-to-go.
   16. Contact Info & Maps- block templates allowing you to place your contact info and location on a map on the splash page.
   17. Highlights- block templates advertising multiple services on a single splash page.
   18. Separators- blocks containing different style of separators.
   19. Footers- block templates containing different style footer notes. Most templates contain buttons that can be linked to different social media platforms.
   20. Form Builder
   21. Ads4WiFi Ad-Spaces

Simple Splash Page creation instructions

1. Login to the SmartWiFiPlatform.
2. On the navigation bar to the left, click Network> Splash Pages.
3. Click the blue edit button next to the splash page you want to edit.
4. Your Menu will be loaded in the Drag and Drop builder in a separate window.

   The steps beyond this are just to demonstrate how the drag and drop builder works. You can use the template you want for your Touchless Menu or use the tools inside the builder to design your own.

5. If the template preloaded for you is not one you like, press the yellow reset button at the bottom of the builder to clear the page.
   
6. Click the template and element selector drop down menu to the right and select ‘Templates’.
   
7. You can select the template of your choice or no template at all.
   For this guide I’ll be using this template.
   
8. You can update the text at the top and bottom of the template to what suits your business. Use the toolbar to the left to change standard text formatting settings.
   
9. Click the template and element selector drop down menu to the right and select ‘Images’.
   
10. Drag the single image content block to the splash page.
    
11. Upload a picture of your menu by hovering the cursor over the template image and pressing the blue camera button.
    

    • Files cannot exceed 1mb in size.
    • Images must be saved in an standard image format. Documents like PDFs cannot be uploaded as an image.



12. You can change content blocks out with a different one if you would like. For this guide we will remove the Terms & Conditions block by pressing the red X.
13. Click the element selector drop down menu to the right and select Terms & Conditions. Drag the ‘Terms & Conditions’ block you like into the page.
    
14. To allow guests to opt out of marketing materials, you can add a opt out check box. Using the element selector select ‘Social Connect Buttons’ and drag the Opt out check box into the page.
    
15. Add a background image by pressing the purple ‘Set Background’ button at the bottom of the builder. Upload your own image by pressing the grey link button. Click Apply when ready.
    
16. Press the green ‘Preview’ button at the bottom of the builder to open a new tab showcasing a preview on different device screen sizes. Close the tab when finished.
    
17. When satisfied with your work, press the grey ‘Clone’ button and click OK on the pop up notification that follows then press the ‘Next’ button to go to the return guest splash page.
18. On the return guest splash page for this guide I used a merge code to update the text to read “Welcome back [GUEST]”, and I changed the connect button to one that matches my colors. You can preview this page as well using the same button.
    
19. When satisfied with your return guest page, press the blue ‘Save’ button.
20. You will be given the chance to update the name of this page.
    Press the green ‘Submit’ button and your Splash Page is ready.

Upgrade from Classic Splash Page