If your business makes use of seasonal promotions, you likely already create Flipbooks that cater specifically to them. Did you know that you can enhance your seasonal catalogs by creating fun, and immersive, on-screen effects?
That's right – you can add audio and visual cues to your Flipbook using Custom Scripting. Take a look:
👀 Experience this seasonal effect in one of our live Flipbooks:
📖 This guide explains:
how to set up seasonal catalog effects, including:
What is Custom Scripting?
Custom Scripting is a feature that allows you to inject third party scripts into your Flipbook. Specifically, this feature allows you to add non-native scripts into the header and footer tags around your Flipbook.
You can read more about Custom Scripting works in iPaper, in our guide:
Enabling Custom Scripting on your account
Custom Scripting is enabled on the account level, rather than for individual Flipbooks, or folders. This means that, once enabled, you'll be able to inject custom scripts into any of your Flipbooks.
⚠️ Custom scripting is available on all iPaper accounts, but can only be accessed by account Administrators. If you’re unsure who your account administrator is, you can easily find out, using this method.
You can find a detailed walkthrough of how to enable Custom Scripting on your iPaper account, as an administrator, here:
How to set up the seasonal catalog effects
The snowfall effect ❄️
This guide shows you how to create a dynamic floating button that toggles:
an audio track
a visual, snowfall effect
⚠️ We recommend avoiding changing much of the code unless you have experience with JavaScript. As this is a third-party script, iPaper does not support, nor can guarantee that scripts will work as intended.
Putting the script into your Flipbook
This custom script draws on assets, such as the image that will form the floating button, and the audio track that will play when toggled.
Simply copy the script below, and paste it into the Scripts field in Custom Scripting:
<script src="https://viewer.ipaper.io/ViewFile1700200.js"></script>
<script>
// Define the URL for the "Effect Off" icon
var iconOFF = 'https://viewer.ipaper.io/ViewFile1699866.svg';
// Define the URL for the "Effect On" icon
var iconON = 'https://viewer.ipaper.io/ViewFile1699865.svg';
// Specify the URL for the background music
var soundURL = 'https://viewer.ipaper.io/ViewFile1934158.mp3';
// Set the autoStart option (true to enable, false to disable)
// Enabling this option will disable the Call to Action (CTA) and background music
var autoStartSnowFall = false;
</script>
For this seasonal effect, we've hosted the assets on the iPaper server, meaning you can draw from them without having to upload your own. However, if you would like to change the visual, or audio assets, you will need to provide these yourself, and edit the Configuration settings in the script.
Configuring the script with your own audio and visual assets
You can choose to host these assets anywhere you have access to, including on a server external to iPaper, but we recommend uploading your assets to your Media Library. Once uploaded, you'll want to use the file destinations to customize your seasonal catalog effect.
⚠️ We recommend avoiding changing much of the code unless you have experience with JavaScript. As this is a third-party script, iPaper does not support, nor can guarantee that scripts will work as intended.
There are a number of customizations you can apply to the script, by changing the values of:
Define the URL for the "Effect Off" icon var iconOFF = – this defines the image displayed when the seasonal effect is toggled OFF. To change this, enter the URL of your desired image between the ' ' marks.Define the URL for the "Effect On" icon var iconON =– this defines the image displayed when the seasonal effect is toggled ON. To change this, enter the URL of your desired image between the ' ' marks.
Specify the URL for the background music var soundURL =– this defines the audio that plays when the script is toggled ON. To change this, enter the URL of your desired audio track between the ' ' marks.
var autoStartSnowFall = false;– Enabling this option to TRUE will:disable the Call to Action (CTA) and background music
enable the snowfall effect to start automatically when a visitor lands on your Flipbook. The effect is untoggleable, meaning they cannot stop, or restart it.
Once you've pasted in your code and saved your changes, the seasonal effect will be live on your Flipbook!
The love hearts effect 💕
Putting the script into your Flipbook
This custom script draws on assets, such as the image that will form the floating button, and the audio track that will play when toggled.
Simply copy the script below, and paste it into the Scripts field in Custom Scripting:
<script src="https://cdn.jsdelivr.net/npm/tsparticles@2.9.3/tsparticles.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-heart@2.9.3/tsparticles.shape.heart.min.js"></script>
<script src="https://viewer.ipaper.io/ViewFile1762423.js"></script>
Remember to save your changes, and then you're done! Your Flipbook will now show with a cute, floating hearts effect.
The confetti effect
See this effect live in our demo Flipbook:
Putting the script into your Flipbook
This custom effect is fairly simple to implement, with a good degree of customizability, including:
the amount of confetti
the size of the confetti
the colors of the confetti
Simply copy the script below, and paste it into the Scripts field in Custom Scripting:
<script>
let autoStartConfetti = true;
let confettiColors = ["#223D34","#446B5F", "#fafafa"];
let confettiScale = 1;
let confettiInterval = 100;
createConfetti(autoStartConfetti, confettiColors, confettiScale, confettiInterval);
</script>
You can edit the variables in the following way:
Set
autoStartConfettito True for the effect to start automatically when visitors browses your Flipbook. If set to False, the visitors will have a toggle in the bottom-right corner with which they can toggle the effect.
In the
confettiColorsvariable, you can enter the hexadecimal color codes to set the color of your confetti. Each color must be enclosed in quotation marks and separated by commas.
The
confettiScalevariable determines the size of your confetti, and is presented as a percentage of a whole. 1 = 100% of the original size, 1.5 = 150% of the original size, etc.
The
confettiIntervalvariable determines how quickly your confetti effect will loop, and is presented in milliseconds. For example, 100 = 100 milliseconds (10 pieces created per second).
Remember to save your changes, and then you're done! Your Flipbook will be showered with confetti when a visitors browses it!
Enhance your seasonal catalog even more with a background
You've already given your Flipbook visitors an extra, immersive experience, with this seasonal effect, so why not further enhance it by applying a themed background to your Flipbook?
Read more on how to apply backgrounds to your Flipbook, below:
⚠️ Background images offer an extra, immersive layer for visitors browsing your Flipbook via a desktop browser. As such, please note that background images are not visible on mobile browsers.
Of course, if you're unsure about any of the steps above, reach out to us using the Messenger in the corner, and we'll be happy to help! ⛄