Making images and advertising content for your captive portal
In this tutorial, we'll be going over the programs we use to make our advertisements for our FreeLynk captive portal. We'll also go over some of the creative process from when we acquire a new customer to adding his advertisement to the captive portal.
There is absolutely thousands of ways to create different kinds of content that would work on our captive portal. For this example we'll show our process using regular web surfing and a film creator called FILMORA. If you're looking for something easy to use and pretty inexpensive that allows you to do most simple animations, then FILMORA is great. Apple and Windows products come standard with movie making software which both work fine. We primarily use the the following file formats on our portals.
Mp4, GIF, JPEG, PNG, WAV, Mp3
This tutorial will begin from a point as if a local Las Vegas restaurant called Casa Di Amore were to become our advertising customer. Some customers will have their own ideas of what they would like to showcase on their ad space. We always honor their requests and so should you. Sometimes however a business may not know what they want or trust you enough to do it for them. In this case we're going to assume the ladder and build something entirely from scratch. Quick tip: Be careful what images you source from the internet, the owner may not want you using their photos. We have permission in this case to use all the photos that we do.
1. Lets commence the recon. Find out everything we need to know about the business and start looking for some good photos to use. Take note of hours of operation, specials, promotions or interesting tid bits.
2. Here you can see we've picked our favorite couple photos we could find for this business. We tried to make sure each photo was high definition to make a visual standout to the free internet user that will eventually see it. Its in our best interest to make sure every business we advertise for is shown off in the best light to our abilities. If you dont, they won't see any new business from the advertising campaign and will most likely cancel their subscription with you.
3. Now we're in FILMORA, and we have our pictures we've found imported in. Lets put them onto the film strip. Click the plus in the center of the images to get them into the strip.
4. From here you can add whatever transitions, text or information you think will be informative and look good. We normally add a special, their location/hours and something about their business.
5. Make sure to keep your ads time conscious. Too long of a movie will make the image too large and take too long to load your captive portal. Which in the worst cases can lead to a decreased user experience when using your network.
6. You can use other images to paste text on top of as transitions.
7. Add a little bit of text to allow the FreeLynk users to get the most out of the quick ad. It makes sense for us as the creator to do our best here on their ads. Its a direct reflection of us as the network provider and them as the business being showcased. Without doing a good job, the users will assosiate that with the business and us. Lowering the business we drive to the one we're campaigning for, more than likely not giving them a reason to renew their monthly subscription. Do a great job and take your time.
8. When you think you're ad is finished, export it to your computer.
9. Keep your resolution and image size small. The ads as we showcase them will be on the smaller side for the most part, so long as your trying to put more ads next to them. The size of your file matters a lot. What is showing here is inaccurate, ours came out to be able 1.3Mb, which is still very large for what were trying to do. Keeping your file size less than 600Kb is what you should be shooting for.
10. After you create the file, import it to your web controller using the SFTP method from earlier in the tutorial series. Then once its uploaded, use the MV command to move the new file to your captive portal images folder. Then navigate back to your app-unifi-hotspot-portal folder.
11. Once the new ad file is in the images folder, open your index.html file with nano by typing "nano index.html"
Once inside the index file, navigate down to the images we put in earlier and replace the source (src) with the file name of the new file we just uploaded. In our case we replaced "images/milli.gif" with "images/Casa.gif."
Save your changes when you're finished to apply the new images.
12. Navigate over to the WEB GUI of your AWS Controller, and check the guest control settings. If you see your newly created advertisement then you've succeeded in adding your created content to the CP. Congrats!
When you're feeling comfortable with working inside of the index.html file, try changing the sizes of the images to see what fits best!