If you’re a web designer, you probably prefer to just code your own HTML splash templates, rather than use one of our built-in templates and WYSIWYG. We totally understand.
So we made it really easy to get your beautiful work loaded into Wavespot with our “Upload ZIP file” button.
Just take all your files, put them into a neat little folder (you can even organize your assets into as many sub-folders as you want), then compress everything into one .ZIP file. You can edit the uploaded code anytime using our in-place editor.
While designing a custom splash page, we need to understand a few important elements of the page, first.
1. The laptop, mobile and tablet template file should be named as splash.html, mobile_splash.html and tablet_splash.html respectively where splash.html is a mandatory file.
2. Practice absolute path while referencing to images, CSS, and javascripts.
3. Please include jquery javascript library in the head of the splash template
4. You can name the thumbnail (to identify your template under dashboard) as preview_splash.jpg or preview_splash.png
5. Implementation of the Social Login element on the Wavespot splash page can be implemented in the following combinations -
Facebook Connect: This includes the FB Connect button, that will enable your customers to log in using their FB credentials and access the Internet at your location. Encouraging your customers to connect their FB account will help you to get more demographic information about them, and also to market your products among their FB friends using out automatic message posting feature on FB Timeline.
In case you've kept a provision for the visitor to 'Like' your Facebook page, then the FB Connect button will change into a 'Like' button once the visitor has logged in using his Facebook account.
Short code to use at the location where FB Connect button needs to be implemented:
<fblogin> <fbloginlong>
Twitter Connect: This includes the Twitter Connect button, that will enable your customers to log in using their Twitter credentials and access the Internet at your location.
Short code to use at the location where Twitter Connect button needs to be implemented:
<twlogin> <twloginlong>
Both Facebook and Twitter Connect: There can also be provisions to include both Facebook and Twitter Connect options, and to allow your customers to access the Internet by using either of the social services.
Wavespot allows your patrons to go online at your locations using Access Codes, or Email addresses, as well. However, this feature is optional.
In case a text box is provided to accept the access code, it should have only the CSS style, along with the Submit button.
The text box for taking access code or email should have an id attribute as pin
<input type="text" value="" title="Email Address" name="pin" id="pin" />
The submit button should have an id attribute according to the access you want to provide:
The id attribute should be access in case of Access Code and email in case of Email address to be used as login.
<input type="submit" value="Go" title="Login" name="gologin" id="access" class="btn_go" />
or
<input type="submit" value="Go" title="Login" name="gologin" id="email" class="btn_go" />
To support the click and go functionality on a button or link, configure the id attribute of the button or link as cng
<input type="button" value="Click and Go" id="cng" class="btn_go" />
or
<a href="javascript:void(0)" id="cng"> Click here to Click and Go </a>
or
<button id="cng"> Click here to go </button>
Note: The POST event will be automatically inserted by Wavespot's scripts. Do not add the <form> tag.
Steps to Upload Zip Template
1. Navigate to User Settings >> Private Template
2. Choose a .zip to upload
3. Press Upload Button
In-Place editor to review the design code. Please confirm the paths for the assets. If you want to make any changes to the design, you can make it here. After making changes press "Save Changes". If you just want to preview the template you have uploaded, press "Preview"
Preview of the uploaded template
You can choose this template to be your splash template by clicking "Choose Template" or directly from "User Settings >> Splash Templates".
Edit Existing Template Code Design
Choose the "List Uploaded Files" under User Settings >> Private Template
You can edit the selected Splash Template by clicking "Edit" on the respective template.
If you are getting any issues while uploading, please take care of the following -
1. Make sure that none of your filenames have special characters in them. Alpha-numeric works best.
2. The upload is case sensitive, so make sure your code matches your filenames.
3. Do any of your HTML files or images have spaces in the filename? If they do, rename your files without spaces or special characters.
4. If the above points aren't the issue and you don't get an error code when you try to upload, this means there's an issue with your HTML code. When the system encounters non-unicode UTF-8 characters, it can't process them and reads the HTML as blank. To see if your template contains junk characters, open up your .html in a browser and manually change your character encoding settings to "Unicode". In Firefox, you do this by going to View > Character Encoding > Unicode (UTF-8). The faulty characters should stand out as a diamond with a question mark inside.
5. If none of those are the issue, you'll need to take a look at your HTML code for any errors or invalid code which can also prevent the zip file from uploading properly.
6. All the above mentioned short codes have been implemented correctly.
7. The folder that contains all the files of the splash template has been archived in .zip format, and not in any other format, like .rar.
8. If everything uploads but you can't see your images in the preview, make sure that your HTML points to the absolute filename only. So pic123.jpg in images folder would work like /images/pic123.jpg.