Embedding: How it works for your members
Your WebCollect pages are displayed within your website. Members can browse through the WebCollect pages, without leaving your site. Once they get to the secure checkout pages, the page breaks out into the WebCollect site for security reasons. Embedding the WebCollect pages within your organisation's website provides a smooth and seamless experience for your members whilst browsing your events or membership subscriptions.
Techy details
For those who are interested in the technical details, the embedding uses an <iframe> in your website. The layout is liquid, so will resize itself to fit the width of your site. It should work well for widths between 800 and 1200px.
Your members will be able to navigate your WebCollect site within the <iframe>. This includes all of the steps right through checkout, with the exception of the pages on Paypal and GoCardless sites, where purchasers complete their payment details. If you are using either of those payment methods, please see the section below on Embed URL.
You may want to consider changing your website to https. See the Security section below.
HTML Code for embedding
In the administration panel, in the section called "Connect WebCollect", click on the link to Embed WebCollect. Select the initial page to show in the iframe below and then copy/paste the html source code shown into your external website. The possible initial pages you can select are:
- Your organisation's home page on WebCollect
- Your subscriptions page (useful if you are only using WebCollect for subscriptions and not for events or other features)
- An event category
- A specific event page
In the case of the last 2, select the option. You will then see a further dropdown showing possible pages to select from.
Once you have made your selection, you will see the html code appear in a box below.
Embed URL - Important
If you are using the embed option, you need to provide the url (webpage address) of the page on your site, where you have embedded your WebCollect pages. If you have embedded WebCollect in multiple pages on your site, pick the one that is most appropriate for members to return to, once they have completed checkout.
We need the details of the url on your site, because members paying via Paypal or GoCardless, have to pop out of the embedded pages onto the Paypal/GoCardless site. Once they have completed their details on those sites, we need to know where to send them back to on your webiste. If we don't have the url to pop the member back into embedded mode, then we will show them the final checkout page on WebCollect without embedding. Not a problem, but it won't look the same.
You can configure the Embed URL by clicking on the Customise your Organisation link. Then select the configuration tab. Make sure you include the full url (including the https:// at the beginning)
Security
You may have noticed that all WebCollect pages are https, not http. That means that all pages on WebCollect are protected by https encryption. Full site encryption is being rolled out on many sites, including Google and Facebook.
What that means for your members, is that their interaction with WebCollect within the embedded iframe is fully secure, regardless of whether your website is secure.
We do however recommend that you consider changing to full site encryption (if you haven't already) for 2 reasons:
- It has become best practice, and many companies, large and small, are strongly encouraging sites to switch. This helps prevent certain types of security attacks, for example Firesheep. See here for details.
- Your members will be able to see the closed lock symbol, while they are in checkout. Many people have become more aware of what to look for, to make sure they are protected. If you embed WebCollect and your site is http, then they won't see the closed lock. So, even though the iframe is fully secure, and they are protected, they might be concerned that, the lock is not showing.
Embed the Calendar
The calendar embed uses an <iframe>. Follow the instructions below to obtain the html code to copy into the page of your website where you want to display the calendar. The layout is liquid, so will resize itself to fit the width of the frame on your site. It should work well for a minimum width of 270 pixels. The height by default, is 700 pixels, although down to 450 pixels should work fine.
In the administration panel, go to the section called "Connect WebCollect" and click on the link to "Embed/export calendars". Select the event category you want to embed (select Home if you want to embed the calendar for all events). Copy the html code in the iFrame section and paste it into the webpage on your site where you want to display the calendar.
Premium Feature
We have tried to keep the price of WebCollect as low as possible (we know that many clubs and societies have small budgets). However, this feature is more expensive for us to maintain. So we have had to put an additional charge on this feature. It's not a lot more expensive, and we think that you will find it worth the price! Click here to find out our current charges.
Organisations that embedded WebCollect before 21/10/14
Please click here for details of changes made to the embedding feature.
