There are many reasons you need to place a call to action button on your site. For example, you may be interested in collecting emails for sending out newsletter. The challenge here is to find an attractive position for the button so that users click and act on it. Floating button is a simple solution to this placement problem which floats on a fixed position when the users scroll down the page. This will help to increase the visibility and click through rate on the button. In this article let us discuss on how to create a CSS floating slideout widget which will slide out when user hovers on the floating button image.
How the Widget will Look?
Before going forward, below is how the widget will look like. You can place the floating subscribe button image on the left side with the newsletter element code inside the slideout. The newsletter form will slideout on hover and users can subscribe easily.
You can place any custom code inside the slideout and below are some examples of use case:
- Floating contact us button with the contact form embedded in the slideout. You can also send users to separate contact page by linking to the page.
- Feedback button with any third part contact form embedded.
- Any type of widgets like clock, weather, calendar, etc. as slideout.
How to Create CSS Floating Slideout with Call to Action Button?
The widget is made of three components:
- An image
- CSS code
- HTML code
#1 – Preparing Image
Below is the image we used on the demo widget. You can prepare similar image with approximate size of 50 x 200 pixels.
You can use any image processing tools like Snagit or Photoshop to create quality images. Else you can make use of tools like Paint available freely on all Microsoft PCs. Also you can download creative commons buttons from internet which can be used freely on your site.
Once the image is ready, navigate to “Theme > Edit HTML/CSS > Assets” section on your Weebly editor. Upload the image to your site and the URL to access the image should be like “http://yoursite.com/files/theme/image-name.jpg“.
#2 – CSS Code
There are two ways to use the widget – one is to place site wide so that the widget will appear on all pages of your site and the second is to place the widget only on certain pages of your Weebly site.
For site wide, copy the below code, paste it under “Settings > SEO > Header Code” section of your Weebly site and save your changes. For page level, paste the CSS code under “Pages > Select the Page > SEO Settings > Header Code” section.
<style type="text/css">
/* Slideout outer button */
#slideout {
position: fixed;
z-index: 1;
top: 80px;
left: 0;
padding: 25px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* Slideout inner widget area */
#slideout_inner {
position: fixed;
top: 80px;
left: -305px;
background: #ffeb3b;
width: 250px;
padding: 25px;
height: 200px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
/* Hover alignment */
#slideout:hover {
left: 300px;
}
#slideout:hover #slideout_inner {
left: 0;
}
</style>#3 – HTML Code
Drag and drop an “Embed Code” element anywhere on the site and insert the below HTML code:
<div id="slideout">
/* Insert Weebly Image */
<img src="Your Weebly Image URL" alt="Subscribe" />
<div id="slideout_inner">
<div>
/* Insert Code for Content Shown in Slideout */
</div>
</div>
</div>If your CSS is effective at site level then the HTML code can be embedded on any page of your site. If your CSS code is effective only on particular page then insert the HTML code on that specific page.
The HTML code has two parts:
- Image – add you own Weebly site’s image URL from step 1.
- Widget code to be shown on slideout. Here you can add any third party embed codes as it is. If you want to use Weebly’s default elements like newsletter or contact form then read on further.
Getting HTML Code of Default Weebly Element
Here we explain with newsletter element and the process remains same for other elements like contact and RSVP forms. Insert a newsletter element on a page and publish your site. If you already have an existing newsletter element then you can reuse the same element. Now open the page with newsletter on the browser go to developer view by right clicking and choosing inspect element option.
Hover over the code and copy the entire block of code related to the newsletter element. On browsers like Chrome, you can just click the first div tag and press “control + v” or “command + v”. This will copy the entire block of code for the selected newsletter element. Learn more on how to view source code in Google Chrome. Use this code inside HTML code for the slideout widget and the complete HTML code will look like below:
<div id="slideout">
<img src="https://img.webnots.com/2016/04/Subscribe-Button.png" alt="Subscribe" />
<div id="slideout_inner">
/* START OF NEWSLETTER ELEMENT CODE */
<div>
<form enctype="multipart/form-data" action="https://widgetcode.weebly.com/ajax/apps/formSubmitAjax.php" method="POST" id="form-100440182464484169" accept-charset="UTF-8" target="form-100440182464484169-target-1480443240994">
<div id="100440182464484169-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="100440182464484169-form-list">
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="input-885026583907653749">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="input-885026583907653749" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="_u885026583907653749">
</div>
<div id="instructions-885026583907653749" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="display:none; visibility:hidden;">
<input type="text" name="wsite_subject">
</div>
<div style="text-align:center; margin-top:10px; margin-bottom:10px;">
<input type="hidden" name="form_version" value="2">
<input type="hidden" name="wsite_approved" id="wsite-approved" value="approved">
<input type="hidden" name="ucfid" value="100440182464484169">
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px"><a class="wsite-button" onclick="document.getElementById('form-100440182464484169').submit()"><span class="wsite-button-inner">Subscribe to Newsletter</span></a>
</div>
</form><iframe name="form-100440182464484169-target-1480443240994" id="form-100440182464484169-target-1480443240994" style="display: none;"></iframe>
</div>
/* END OF NEWSLETTER ELEMENT CODE */
</div>
</div>You can use contact and RSVP forms in similar manner as explained above. Ensure not to delete the original newsletter or contact form element from your site, if the original form is deleted then the embedded code inside the widget will not work. For a site wide implementation, you can add the HTML code in site’s footer layout so that you don’t need to embed the code on each single page.
Customizing the Widget
The widget code is very flexible and you can customize according to your need by changing the parameters. Here are some options you may need to fit the widget on your site:
- Fixed height – the fixed height of the floating button is 80px as defined using “top” in the #slideout and #slideout_inner CSS classes. You can change to any required height as per your need.
- Width of the slideout – the slideout width is defined as 300px in total. You can adjust the width by modifying the “left” parameter in #slideout, #slideout_inner and slideout:hover CSS classes.
- Colors – adjust the slideout color by changing the “background” in #slideout_inner class.
- Slideout image and widget – you can use any images of your own and embed any third party widget code instead of newsletter element as explained above.
2 Comments
Leave your reply.