How Can I Display an Optional Extra on My Website? – LoveAdmin

Navigation: Payment Options > Optional Extras

Before you can display your optional extra on your website you will need to enable the settings for the optional extra to either display as a standalone option on your registration page or attached to a stand-alone option.

To enable your optional extra to be viewable, follow these steps:

Displaying an Optional Extra as a Stand-alone Option

To display the optional extra as a selectable option on your registration form, please follow these steps:

Step 1: Go to the optional extra settings by hovering over ‘Payment Options’ and selecting ‘Optional Extras’.

Step 2: To create a new optional extra click ‘Add new’ or to edit an existing one click on ‘Edit' to the right-hand side of the screen next to the optional extra you wish to display.

Step 3: A Pop-up box will appear with the optional extra settings. One of the questions that you will be asked is ‘Display the option for people to register for this optional extra: Via a stand-alone registration form?’. Here you will need to select ‘Yes’.

Step 4: The question ‘Request payment at the point of registration?’ will appear. If you would like payment made as they register, then select ‘Yes’. If not, then select ‘No’ and the person will need to be vetted and will appear in the group ‘Online registrations awaiting approval’ once they have completed their registration.

Step 5: You will now need to save your changes, scroll to the bottom of the window and select ‘Save and Finish’.

Displaying an Optional Extra as a Registration Form

Step 1: Go to the optional extra settings by hovering over ‘Payment Options’ and selecting ‘Optional Extras’.

Step 2: To create a new optional extra click ‘Add new’ or to edit an existing one click on ‘Edit' to the right-hand side of the screen next to the optional extra you wish to display.

Step 3: A Pop-up box will appear with the optional extra settings. One of the questions that you will be asked is ‘Display the option for people to register for this optional extra: On your registration form?’. Here you will need to select ‘Yes’.

Step 4: The option to ‘Select your registration form’ will appear. Click on this to choose which form the Optional Extra can be selected from.

Step 5: The question ‘Request payment at the point of registration?’ will appear. If you would like payment made as they register, then select ‘Yes’. If not, then select ‘No’ and the person will need to be vetted and will appear in the group ‘Online registrations awaiting approval’ once they have completed their registration.

Step 6: You will now need to save your changes, scroll to the bottom of the window and select ‘Save and Finish’.

Embedding the registration page on your website

The next stage is to make sure that you have the correct links to embed onto your website. Here are the steps you need to follow to embed registration forms, the login page and event pages into your website.

Settings > Account

Step 1: Login to your account and hover over ‘Settings’ at the top of the page. Then, select ‘Account’.

Step 2: Towards the bottom of the ‘Settings’ page you will see the ‘Navigation’ section where there will be 3 URLs - one for the registration page, one for the login page and one for the events page.

Step 3: To display your optional extra on your website, you will need to copy the registration page URL.

Step 4: Paste the URL into an <iframe> tag in the following manner (you can adjust width and height as per your preference):

Step 5: Copy the <iframe> code into the body of your web page HTML source - it should look like this:

$(document).ready(function () {

iFrameResize({ autoResize: true }, '#ifrmresize');

})

</script>

It should now look like this:

Note - To make the page load back at the top of the form you will also need to add the following script.

jQuery(document).ready(function ($) {

iFrameResize({

autoResize: true,

initCallback: function(){

$('html, body').animate({

scrollTop: $("#ifrmresize").offset().top

}, 500);

'#ifrmresize');

});

</script>

Once this is done, you will be able to access your registration form and the optional extra

from within your website.

Alternatively, you can embed a single optional extra into your website for use on a specific page relating to it.

To do this, follow these steps:

Step 1: Login to your account and hover over ‘Settings’ at the top of the page. Then, select ‘Account’.

Step 2: Towards the bottom of the ‘Settings’ page under ‘Navigation’ you will see, ‘Registration form URLs’ – click on ‘Select’.

Step 3: Several URLs will then appear each relating to a specific form you have created and chosen to appear as a Stand-alone option. Select the one for the optional extra you wish to embed or the form the optional extra is displaying on and copy it.

Step 4: Paste the URL into an <iframe> tag in the following manner (you can adjust width and height as per your preference):

Step 5: Copy the <iframe> code into the body of your web page HTML source - it should look like this:

$(document).ready(function () {

iFrameResize({ autoResize: true }, '#ifrmresize');

})

</script>

It should now look like this:

Note - To make the page load back at the top of the form you will also need to add the following script.

jQuery(document).ready(function ($) {

iFrameResize({

autoResize: true,

initCallback: function(){

$('html, body').animate({

scrollTop: $("#ifrmresize").offset().top

}, 500);

'#ifrmresize');

});

</script>

Having individual form URL’s embedded can be useful to separate and direct prospects to the right form from an area of your website.

For example, if they are looking to register a for a pre-school session you can send them straight to the pre-school form, and those looking for Optional Extras for older children can then be directed straight there too.

Well done! If you followed these steps correctly, you have now successfully embedded your form into your website.