Widgets - integrating Wild Apricot into another website

Wild Apricot software can be used in a variety of ways:
1) As your new main website - All-in-one turnkey solution with content management, membership management and event registration tools, online donation form, email blasts etc. (Recommended option - best experience for your website visitors and members)
2) With your existing website - use Wild Apricot administration backend to setup specific functions and embed them into your existing website using Wild Apricot widgets.
3) As a secondary / specific-purpose website: you keep your existing website and then use Wild Apricot website for seminar or conference registration, as online member self-service portal etc.

Let's look in more detail at option 2 - integrating Wild Apricot functions within your existing website - via Wild Apricot Widgets. By definition, a web widget is a portable chunk of content or interactive functionality provided by website ABC that can be installed and run within any HTML-based web page on a site XYZ, without having to install any software on site XYZ web server. Other common terms used to describe a web widget include gadget, badge, module and snippet.

In such a setup, Wild Apricot becomes an invisible provider of interactive functionality for your website - without your website visitors having to actually leave your main website for Wild Apricot website!

You can tweak your embedded Wild Apricot widget to use colors and styles to match the website where you are embedding this widget in - thus it will look like a seamless part of your website. First, choose a visual theme (Website themes) - and for more detailed options, use CSS Customization.

Wild Apricot widget code is available within your account under Settings > Widgets > Get widgets code.

Widget limitations Widgets are still pretty new in Wild Apricot and as with any new and complex piece of software there is always a possibility that it will work differently than expected and intended in a particular setup. Keep that in mind, feel free to contact us at support@wildapricot.com with questions and feedback anytime - we will be happy to help you to make Wild Apricot widgets work in your setting. Some known current limitations include: If you use widgets to embed membership application, event registration or donation and you process payment via PayPal or Google Checkout, widget will simply display a button to open application in new window. This is due to PayPal/Google security restrictions - they do not allow payment to be processed within an iFrame. (Authorize.Net payment works in the embedded mode just fine) Return link on PayPal page will take people to your Wild Apricot site instead of the page where the widget is embedded. Widgets 'hidden' within restricted access sections do not work under administrator logins - only under member logins You cannot embed two WA widgets into the same page You cannot embed widget on the page of the same site Using the "Forgot Password" link will take users to your Wild Apricot site

You can get the HTML code to copy-paste into your website for the following functions:

Online member application form

This will be displayed as an online member application form according to how you have customized your Wild Apricot member database. (See Customizing your member database). If the user fills the form out and selects membership level requires payment, then (according to your Payment settings) they will be directed to an online payment page.

Searchable member directory

This widget will display your member directory (according to the settings you have selected within Wild Apricot - sorting, fields for detailed profile pages, intro message, default view, which levels to include). This is a searchable list of members from your Wild Apricot member database (each member can opt-out from being included and can control which fields to show for his record). See Member directory

Secure member profile

This widget will show a login box and upon login will display member profile, including functions to renew membership, upgrade membership and edit profile to update member record. If they initiate a payment transactions, then (according to your Payment settings) they will be directed to an online payment page. See also Member - renew or change level

List of events

This widget displays a list of events from your Wild Apricot events database. Users can proceed to a particular event details page (see Event page below). See Events database

Event page

This widget will display a specific event from your events database in Wild Apricot and users can proceed to registration right here, fill out the registration form and (if your event requires payment and according to your Payment settings) will be directed to an online payment page.
See Customize event registration form

Online donation form

This corresponds to a regular Wild Apricot donation page (Online donation form). Users can use the widget to fill out the form and then (according to your Payment settings) will be directed to an online payment page.

Experimental features

Widgets page provides the code to embed most common Wild Apricot functions. If you look at the code closely, you will see that we have re-architected Wild Apricot system so that actually any webpage or function available to the public or members via a Wild Apricot website can be embedded as a widget. For example a regular member profile page is accessible at "<your_WildApricot_site>/Content/Members/MemberProfile.aspx", while a widget code for this page is <iframe width='670px' height='400px' frameborder='no' src='<your_WildApricot_site>/widget/Content/Members/MemberProfile.aspx'></iframe>. The only difference is adding the "/widget" part right after the domain - and then wrapping this in an iFrame. Thus, feel free to expriment if you want to embed other Wild Apricot webpages as widgets into another website - a blog module page or any content page.

Adding A "Login" Or "Navigation" Widget

There is currently no login widget you can directly embed on your non-Wild Apricot site, so the workaround is to embed a restricted member-only page instead - you will automatically be forced to log in if the embedded Wild Apricot page is in a members-only section.

Wild Apricot widgets are basically the same pages as those available for people on your Wild Apricot site, minus the header, footer and menu. Thus, each Wild Apricot widget corresponds to a particular function - because it does not have a menu, the widget cannot by itself be used to go to another function. 

Let's assume that you want to provide access to a secure Member Directory and to Member's own profile editing.

Create 3 pages on your existing non-Wild Apricot website:

1) Member services area - Here you can provide basic introduction about online services and links to these 2 pages (Member Directory and Member Profile) 

2) Member directory - Embed the  Wild Apricot directory widget on this page. (To make it secure this directory must be stored in a member-only section on the Wild Apricot site)

3) Personal profile - Embed Wild Apricot member profile widget. 

Now people can start at page 1) or go directly to 2) or 3). In either case they will be asked to log in before seeing any of the secure Wild Apricot pages, and they only need to login once.