Using widgets to add Wild Apricot functionality to other websites

• Available widgets
• Getting the widget code
• Modifying the iframe's height, width, and border
• Changing colors and fonts
• Adding other widgets
• Widget limitations
• See also

A widget – aka plugin – is a chunk of Wild Apricot functionality that you can embed – or integrate – into another website. For example, you may want to display the event calendar from your Wild Apricot site on another site of yours that does not support event registration. When you embed a widget, Wild Apricot becomes an invisible provider of interactive functionality for your other website.
To embed a widget into another website, you copy the embed code for that widget then paste it into the other site's HTML code.

Embedding an events list widget

Available widgets

A corresponding widget is available for each functional page. The event list widget, for example, corresponds to the event calendar functional page.
To embed a Wild Apricot widget in another website, a corresponding functional page must exist on your Wild Apricot site. For example, if you want to embed your Wild Apricot event calendar on another site, you must have already set up a publicly accessible event calendar page on your Wild Apricot site.
The following widgets are available:

Widget
Description
Event list
Displays your event calendar – a list of current and past events from your Wild Apricot events database. Visitors can proceed to the details page for a particular event.
Specific event
Displays the details for a specific event from your Publishing your event calendar. Visitors can register for the event and pay the registration fee online.
Member application
Displays an online membership application form. Visitors can apply for membership to your Wild Apricot site and pay the membership fee online.
Member directory
Displays your Wild Apricot member directory, subject to any restrictions you have set in Wild Apricot.
Member profile
Initially displays a member login box. After logging in, a member can view and update their member profile, subject to any restrictions you have set in Wild Apricot.
Donation
Displays your Wild Apricot donation form.
Forum summary
Displays a summary of the activity in your Wild Apricot forums.
Forum
Displays your Wild Apricot forum.
Blog
Displays your Wild Apricot blog.
Subscription form
Displays an email subscription form visitors can use to sign up for emails from your Wild Apricot site.

Getting the widget code

To obtain the code you need to embed a Wild Apricot widget on another website, follow these steps:

1. Click the Settings tab.
2. Under Widgets, click Get widgets code.
3. On the Widgets screen, click the Select button beside the name of the gadget you want to embed (e.g. Event list).

   
   Selecting the widget type

4. Right click over the selected code and select the Copy option.

   
   Copying the widget code

You can now paste the copied embed code into the HTML code for the page on your other website.

Modifying the iframe's height, width, and border

For each widget, you can change the height, width, and border of the iframe in which the widget is displayed by modifying the widget code.
In the following example…

<iframe width='750px' height='400px' frameborder='no' src='http://stevelivetestsite.wildapricot.org/widget/default.aspx?pageId=1293181'></iframe><br/><font style='color:#ccc;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;'>Powered by <a style='color:#ccc' href='http://www.wildapricot.com/' target='_blank'>Wild Apricot Membership Website Software</a></font>

…you could change the width from 750 pixels to 475 pixels by changing width='750px' to width='475px'.
The widget itself will not be resized, only the frame in which the widget appears. If necessary, scroll bars will appear to allow visitors to view the rest of the widget content.

For instructions on changing the actual width of the widget using CSS code, see Changing the widget width.

Similarly, you can change height of the iframe by modifying the height parameter, and control whether a border appears around the iframe by changing the frameborder to yes or no.

Changing colors and fonts

To customize your embedded Wild Apricot widget so that it appears like a seamless part of your other website, you modify the appearance of the corresponding functional page in your Wild Apricot site. You can, example, choose a website theme, customize the colors and styles, and for more advanced fine-tuning, use CSS customization. Any changes you make will apply to your Wild Apricot site pages as well as your embedded Wild Apricot widgets.

Adding other widgets

In additional to the functional pages listed above, you can use embed any publicly accessible web page from your Wild Apricot account as a widget on another website.
To do so, copy and paste the code below, replacing 123456 with the page ID of the page you want to embed, and http://yoursite.wildapricot.org with the domain name of your Wild Apricot site.

<iframe width='750px' height='400px' frameborder='no' src='http://yoursite.wildapricot.org/widget/default.aspx?pageId=123456' ></iframe>

To set up a Wild Apricot member-only portal on another website, create a member-only page in Wild Apricot with links to other member-only pages, and embed the page in your other website.

Widget limitations

• The functionality you want to embed must already exist on your Wild Apricot site. For example, if you want to embed your Wild Apricot event calendar on another site, you must have already set up a publicly accessible event calendar page on your Wild Apricot site.
• You cannot embed two widgets into the same page.
• You cannot embed a widget on a page within a Wild Apricot site.
• Clicking the Forgot Password link will take users to your Wild Apricot site.
• Widgets on pages grouped under restricted access sections will not work when the user is logged in as an administrator.
• Users cannot interact with Wild Apricot widgets if their browser is set to block third-party cookies. By default, Safari blocks third-party cookies, while Firefox and Chrome accept them. Internet Explorer blocks third-party cookies by default but allows users to accept them from Wild Apricot and other sites. Some firewalls or browser plug-ins may affect your browser's cookies settings.

See also

• Adding Wild Apricot login boxes to another site
• Changing the widget width

Tegn abonnement på

BioNyt Videnskabens Verden (www.bionyt.dk) er Danmarks ældste populærvidenskabelige tidsskrift for naturvidenskab. Det er det eneste blad af sin art i Danmark, som er helliget international forskning inden for livsvidenskaberne.

Bladet bringer aktuelle, spændende forskningsnyheder inden for biologi, medicin og andre naturvidenskabelige områder som f.eks. klimaændringer, nanoteknologi, partikelfysik, astronomi, seksualitet, biologiske våben, ecstasy, evolutionsbiologi, kloning, fedme, søvnforskning, muligheden for liv på mars, influenzaepidemier, livets opståen osv.

Artiklerne roses for at gøre vanskeligt stof forståeligt, uden at den videnskabelige holdbarhed tabes.