Let’s apply a Landing Page script with gift boxes from the Yellow Web. It increases the CTR of the order form and motivates a user to submit a request.
You can also opt for a roulette script instead: https://cpa.rip/stati/roulette-script/
The script is not applicable in Europe:
Free Landing Page Downloader
Download the landing page you like with our Landing Page Downloader. Follow the link for a step-by-step guide on the downloader.
Here’s a landing page we downloaded (the design may be locally distorted, but it will open on the server as is):
GiftBoxes Script from the Yellow Web
Follow the link to download the ready-made script from github: https://github.com/dvygolov/YWB.GiftBoxes.JS
The script was modified by the author for convenience.
What’s It For?
- It supports two gift box styles: standard and fancy. You can ask your designer to create custom gift box images and drop them into the “bimg” folder. Name them the same as the files in the folder, adding an enumerator at the end of each file’s name. It might look like “closed3.png”, “opened3.png”, etc.
- The script won’t create a form. Use it on any landing page with an EXISTING form. It is enough to specify the selector of the form and the script will automatically hide it until the user opens the “winning” box.
- The script automatically replaces all links with BTN so that the scrolling leads to the box block instead of the form hidden by the script.
How to Enable the Script?
Open the archive with the downloaded landing page and find the index.phpfile
- The JQuery must be enabled
If it is disabled, you must fix it yourself. You can load it directly from code.jquery.com by inserting the following line: <script src="https://code.jquery.com/jquery-3.6.0.min.js"> (library version at will).
- Next, upload the files of the downloaded box script to the landing page root:
- Enable the script by inserting the following script link:
<script src="ywbboxes.js"></script>:
- Find the landing page submission form in the code and add the
<div>tag before it. Specify any submission form ID, like<div id="boxesMain"></div>
- The form (or the entire block with the form) must also have its ID, for example, formMain
How to Configure the Script?
- Insert the code below to the page and configure it as you like
</div>
<script>
initBoxes({
selectors:{
boxes:"#boxesMain",
form:"#formMain"
},
texts:{
instructions: "Click on any box and try to find one with a 50% discount 👇",
lastTry:["Warning!","This is your LAST TRY."],
congratulations:["Congratulations!","You can order the product with a 50% discount!"]
},
product:{
price: 1990,
currency:"$"
},
style:2
});
</script>
- The whole setup is made in the Drewlex script style and follows the initBoxes method. There are two selectors: for the box block (
"#boxesMain") and for the form ("#formMain"). - Next, add texts for the header of the box block and notifications. Also, specify the product price and currency. The last block includes the style index number.
It’s done! Let’s check it. A block with gift boxes appeared on the landing page instead of the order form. After “playing”, a notification about the user’s win/discount will pop up along with an order form.
Troubleshooting
In some scenarios, there may be issues with the display of the boxes or others. For example, the script may interfere with the CSS styles of the landing page. In our case, both closed and open boxes were displayed at the same time:
To find the style that interferes, inspect the element. Select the box and check the styles it interferes with. The landing page style files are highlighted in red. Disable them one by one until you find the interfering element:
We’ve captured it. This is display: block; in line 181 of the style_9503_2.css file. Nevertheless, it is important to check that the landing page won’t crush if you disable this parameter. Remove the parameter.
Check that the error is fixed.
Roulette Script
Previously, we posted a roulette script and a step-by-step guide to enable it here: https://cpa.rip/stati/roulette-script/
As with the boxes, this element is designed to increase conversions. Feel free to test it and increase your profit.
