You may have noticed that PayWhirl widgets auto-scroll to the top of the widget between page loads. We do this because it provides for a more seamless experience, especially on mobile devices, when switching between widgets and other customer portal views.
There are two settings for auto-scrolling with the widgets. These options can be toggled off or on in the Advanced Settings when editing a widget. Changing these settings will change the embed code for that widget.
Note: Every time you make a change to these settings, you will need to re-embed the widgets on your site for it to take effect!
The first option is the 'Autoscroll on page load'. When enabled, the browser will automatically scroll down to where the widget is on the page. If you have additional text above the widget, it might be best to leave this setting off.
The second option is the 'Autoscroll on secondary widget pages'. When enabled, the browser will automatically scroll to the top of the widget sections as the customer moves through the checkout process.
The autoscroll can also be manually configured by adjusting the embed code. For example, if you are using the same widget on multiple pages, you might want it to scroll on one page but not on the other.
In the examples below, the setting 'autoscroll' refers to the secondary widget pages, while 'Initial_autoscroll' refers to the autoscrolling on the page load.
Auto Scroll - OFF (autoscroll: 0, initial_autoscroll: 0):
<script type="text/javascript" id='pw_56f48611de6ec' src="https://app.paywhirl.com/pw.js"></script>
<script>paywhirl('widget',{ autoscroll: 0, initial_autoscroll: 0, domain:'paywhirl-8427' ,uuid:'2f524745-5d5e-4676-af61-59ddd14cda1e'},'pw_56f48611de6ec'); </script>
Auto Scroll - ON (autoscroll: 1, initial_autoscroll: 1):
<script type="text/javascript" id='pw_56f48611de6ec' src="https://app.paywhirl.com/pw.js"></script>
<script>paywhirl('widget',{ autoscroll: 1, initial_autoscroll: 1, domain:'paywhirl-8427' ,uuid:'2f524745-5d5e-4676-af61-59ddd14cda1e'},'pw_56f48611de6ec'); </script>
Auto Scroll with Custom Offset (120px) - ON (autoscroll: 120):
You Can also control the height offset (in Pixels) of the scrolling effect. This will help ensure the autoscroll doesn't cut off any important elements on the page (titles, pictures, etc) above the widget.
<script type="text/javascript" id='pw_56f48611de6ec' src="https://app.paywhirl.com/pw.js"></script>
<script>paywhirl('widget',{ autoscroll: 1, initial_autoscroll: 120, domain:'paywhirl-8427' ,uuid:'2f524745-5d5e-4676-af61-59ddd14cda1e'},'pw_56f48611de6ec'); </script>
NOTE: The embed codes above are just example to illustrate how to change the autoscroll property in your own widget embed code(s). You will need to edit the autoscroll value in your embed code(s) as needed per widget.
Related Articles:
Please let us know if you have any questions.
Sincerely,
The PayWhirl Team