Widgets - integrating Wild Apricot into another website

Wild Apricot can be used in a variety of ways, most commonly:
1) as all-in-one solution: Wild Apricot is your main website - with content management plus all the integrated features: membership management and event registration tools, online donation form, email blasts etc.
2) as a secondary / specific-purpose website: you keep your existing website and then use Wild Apricot for some specific functions. Typical examples are people using Wild Apricot specifically for event registration or as membership services site.
In the second case, you would keep your current web site, say www.ABC.org and setup Wild Apricot at registration.ABC.org or something like that. Then, in your main website you insert the links to appropriate functions/pages on your secondary, Wild Apricot website. For example, you might have a short summary of your upcoming conference - and then provide a direct link to Wild Apricot web page for this conference - which provides full conference details and online registration form.

Now there is one more way to seamlessly integrate and use Wild Apricot functions within your current website - via Wild Apricot Widgets. By definition, a web widget is a portable chunk of content or interactive functionality provided by website A that can be installed and run within any HTML-based web page on a site B, without having to install any software on site B 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! For example: You can manage your member database in Wild Apricot and then embed a searchable Wild Apricot member directory widget into your 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 customization - themes) - and for more detailed options, use CSS Customization.

Wild Apricot widgets are available within your account under Settings / Widgets / Get widget code:

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.

View live demo

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

View live demo

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 upgrade

View live demo

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

View live demo

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

View live demo

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.

View live demo

Beta functionality 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 users use 'Forgot password' link on a widget (e.g. to login into member profile), they will be directed to password reset page on your Wild Apricot site in a new window (not within the widget iFrame) Widgets 'hidden' within restricted access sections do not work under administrator logins - only under member logins If payment has to be processed, return link on PayPal page will take people to your Wild Apricot site instead of the page where the widget is embedded. You can not embed two WA widgets into the same page Experimental features - Geeks only 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.