Interactive web pages help associations, clubs and many other non-profit organizations provide better services at lower cost for their members and supporters - growing the community and bringing people back repeatedly. We are excited about new capabilities released last Friday - Wild Apricot widgets - which can be used to add a wide variety of interactive services to any existing web site - online member application forms, secure member profiles, online directories, event registration and online donation forms. Of course, there are many ways to add an online form to your site, but here we are talking about forms which are automatically integrated into a database and the results are available on your website immediately, for example as a searchable directory - or a member profile.

The post below provides a simple  example on how you can add a searchable member directory to any existing website by using Wild Apricot widgets. And here's a detailed documentation: integrating Wild Apricot widgets in your website.

As you might know, Wild Apricot is our integrated set of membership management, member self-service, event registration and related online tools. Many people use Wild Apricot as their all-in-one integrated system for everything - website, member services, event registration etc. Others already have a website and only want to use Wild Apricot for particular functions. Wild Apricot widgets are specifically designed for the latter case. Use Wild Apricot as your 'back-end' system and embed its interactive features into any existing website by copy-pasting some HTML code into it.

The Wild Apricot widget is highly customizable -- not only can you pick the widgets with functions that you need, but by selecting a design template and further tweaking it via CSS customization, you can change the look and feel of embedded widgets to look like a seamless part of your website. Wild Apricot will be an invisible provider of interactive functionality for your website - without your website visitors having to actually leave your main website.

Here is step-by-step example:

Let's say that you have a website with simple HTML pages and your member list is managed in Excel. You want to add a searchable member directory to your website.

1. Login into Wild Apricot.

If you do not have an account - open a trial account on Wild Apricot  -you do not need a credit card and it takes less than a minute.

2. Load member records

For starters, the quickest thing is to add a few records by hand. Later on you can import your current list from Excel.

3. Review/edit Wild Apricot member directory page settings

Find member directory page in the webpages section. Make sure that:
- Your member directory page is set to be visible to public
- Member directory settings are set to show member levels corresponding to records you have added
- Member records have the opt-in field 'Show in member directory' set to Yes.
- Set desirable default view (Keyword or advanced search) and other settings.

(See Member directory.) 

4. Customize look and feel

Go to Settings /Visual theme and select desired look. Later you can play with CSS Customization to fine-tune it as you wish.

(You can make changes later and they will be automatically reflected in your website where you have embedded the Member Directory widget)

5. Get the HTML Code for the Member Directory Widget

Go to Settings/ Widgets and click on Get widget code link:

 

Click on Select button for the Member Directory. 

6. Paste widget code into your website

How you do this depends on your website. If you use a content management system, copy-pasting the widget should be very simple. Otherwise send the code to your website administrator to insert it.

Now you have a searchable interactive member directory right in your website!

 

You do not have to stop there.There are many other Wild Apricot functions that you can integrate into your website, including online member application form, secure member profile, list of events, event page and online donation form. For more information, please see our Knowledgebase: integrating Wild Apricot functions into another website.