You can do some amazing things with your Custom Embed widgets, including adding menus, images, social media tools!
Adding a Custom Menu
To place a custom menu in next to your Flipbook in the widget area, first go to Manage Flipbooks view and click Edit Folder.
Click on Widgets > Custom Embed > Activate to activate the custom embed widget.
Here's a sample code to place a customized HTML/CSS link table in the widget area of your flipbook reader. You will need to change all values in BOLD to your own customized colors, fonts,settings, web URLs. See the comments within the /* and */ for explanation of the custom changes required. Best to try it out and experiment with different colors and settings to get your desired link table look.
<!-- START COPYING HERE //-->
<html>
<head>
<style type="text/css">
body, html
{
background-color:#eeeeee;
/* Widget background color: replace "#eeeeee" with your flipbook background's hexadecimal HTML color code, found in Folder settings>appearance/options */
}
/* For each of the four link states below, change to your custom value: #FFFFFF to the color you want for your link, 16 to the size of the link text, verdana to your desired font style */
a:link {color:#FFFFFF; font-size:16; font-family: verdana;}
/* link appearance before any clicks*/
a:visited {color:#FFFFFF; font-size:16; font-family: verdana;}
/* link appearance if already visited*/
a:hover {color:#FFFFFF; font-size:16;font-family: verdana;}
/* link appearance while mouse cursor is on top */
a:active {color:#FFFFFF; font-size:16;font-family: verdana;}
/* link appearance during click */
td { vertical-align: middle;}
div.link{
background-color:#333333; height:40px;}
/* Link area background color, choose your hexadecimal/HTML color code and your height pixels*/
</style>
</head>
<body>
<br><br><br>
<!--Below are the defined link areas and link destination settings. You must change the values within each div area. The values you must change are the web addresses within the quotes which is the destination if the link is clicked, and the Link Text values which is what will appear on the screen as a link. If you would like more links or fewer links, add or remove an entire <div class="link">......</div> section. Remember to include or remove a line break <br> between each div section. This example contains 5 link areas //-->
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext1webaddress.com" target="_blank">
<center>Link Text 1</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext2webaddress.com" target="_blank">
<center>Link Text 2</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext3webaddress.com" target="_blank">
<center>Link Text 3</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext4webaddress.com" target="_blank">
<center>Link Text 4</center>
</a></td></tr></table></div>
<br>
<div class="link"><table height="100%" width="100%"><tr><td>
<a STYLE="text-decoration:none" href="http://linktext5webaddress.com" target="_blank">
<center>Link Text 5</center>
</a></td></tr></table></div>
</body>
</html>
<!-- END COPYING HERE //-->
Copy the code and paste it in the Widget section within the Folder you want to modify.
Click Update Folder to save the new widget OR click GO BACK to get back to the Manage Folders & Flipbooks screen and discard the changes.
The result of the above unchanged code looks like this:
Adding Images to your Custom Embed
Please replace the bold font with both the URL that your image will link to and the URL where your image is stored.
<a href="LINK DESTINATION" target="_blank">
<IMG SRC="IMAGE SOURCE URL" >
</a>
Make sure that the width of the actual image is slightly smaller that the widget's size.
Click in 'Update Folder' and your widget will display to end users in the Flipbook. Click GO BACK to cancel and discard the changes.
Once updated, you can click on the PREVIEW EYE to see the new widget in action!
Linked images are a great way to advertise or to highlight any kind of content on your Flipbook. It's like a regular website banner. The link could lead to a conversion point (shopping cart, application, etc).
Comments
0 comments
Please sign in to leave a comment.