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:

what is Custom Scripting
- how to enable it on your account
how to set up seasonal catalog effects, including:
how to enhance your seasonal catalog effect with a background

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:

Custom Scripting: What is it, and what can you use it for?

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 enable Custom Scripting on your account

How to set up the seasonal catalog effects

The Easter Bunny 🐰

This seasonal effect places a customizable Easter egg into your digital catalog. As your visitors interact with your catalog, they'll be surprised by a friendly bunny!

⚠️ 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

Simply copy the script below, and paste it into the Scripts field in Custom Scripting:

<script src="https://viewer.ipaper.io/ViewFile1979188.js"></script>

<script>
let bunnyColor = "#fff";
let ribbonColor= "#C02325";
let bowtieColor = "#e93d40";
let eggColor= "#2A3586";
let eggSpotsColor= "#FFD71B";
let buttonColor = "#2A3586"
let ButtonIconColor = "#FFD71B"
let position = "left";
let scaleFactor = 2;
let showOnMobile = true
let showBunnyButton = true

window.onload = CreateBunny(bunnyColor, ribbonColor, bowtieColor, eggColor, eggSpotsColor, buttonColor, ButtonIconColor, position, scaleFactor, showOnMobile, showBunnyButton);
</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

This seasonal effect offers a number of variables that can be customized to personalize the experience:

bunnyColor: Specifies the bunny's color. Use a string wrapped in quotes (e.g., "#FF69B4" for pink).
ribbonColor: Specifies the ribbon's color. Use a string wrapped in quotes (e.g., "#FF6347" for tomato red).
bowtieColor: Specifies the bowtie's color. Use a string wrapped in quotes (e.g., "#4682B4" for steel blue).
eggColor: Specifies the egg's color. Use a string wrapped in quotes (e.g., "#FFFF00" for yellow).
eggSpotsColor: Specifies the color of the egg's spots. Use a string wrapped in quotes (e.g., "#32CD32" for lime green).
buttonColor: Specifies the main color of the button that displays the bunny. Use a string wrapped in quotes (e.g., "#FFA500" for orange).
buttonIconColor: Specifies the icon color on the button that displays the bunny. Use a string wrapped in quotes (e.g., "#FFFFFF" for white).
position: Determines the position of the bunny and the button. Accepts "left" or "right" as a string wrapped in quotes.
scaleFactor: Controls the size of the egg and bunny. Use a number (do not wrap it in quotes). For example:
- 1 represents 100% of the original size.
- 2 represents 200%, and so on.
showOnMobile: A Boolean value (true or false) that determines visibility on devices under 693px:
- true: The egg will be visible at half its size.
- false: The egg will not be visible.
showBunnyButton: A Boolean value (true or false) that controls whether a button appears to reopen the bunny when it's closed:
- true: A button will appear.
- false: No button will appear.

⚠️ Do not wrap true or false values in quotes.

Remember to save your changes to set the seasonal effect live on your Flipbook.

The snowfall effect ❄️

This guide shows you how to create a dynamic floating button that toggles:

an audio track
a visual, snowfall 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://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>

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.

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:

The confetti effect

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 autoStartConfetti to 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 confettiColors variable, 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 confettiScale variable 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 confettiInterval variable 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:

How to add a background image to your Flipbook

⚠️ 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! ⛄

Custom Scripting: What is it, and what can you use it for?