Using widgets

You can use a widget – aka plugin – to embed Wild Apricot functionality into another website. When you embed a widget, Wild Apricot becomes an invisible provider of interactive functionality for your other website.

There's currently an issue with sites using Wild Apricot widgets on iOS devices using iOS 12 (or earlier). The problem will be resolved with the release of iOS 13.

For example, you can embed an event list widget to display the event calendar from your Wild Apricot site on another site of yours that does not support event registration. Or, you can embed a member profile widget to allow members to log in and modify their profile from another site.

You can embed Wild Apricot widgets into any site uses HTML or accepts HTML-based widgets, including sites set up using Wix and Joomla.

Embedding a Wild Apricot widget into another website

To embed a Wild Apricot widget into another website, you:

1. Add the corresponding gadget to a page in Wild Apricot.
2. Copy the embed code for the widget. (See Getting the widget code, below.)
3. Paste the embed code into your other site's HTML code.

Available widgets

A widget is available for many Wild Apricot gadgets. The event list widget, for example, corresponds to the event calendar gadget.

To embed a Wild Apricot widget in another website, you need to create and set up the corresponding gadget on a page in your Wild Apricot account. 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 gadget on a page on your Wild Apricot site.

The following widgets are available:

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.

Event details
Displays the details for a specific event. 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 a Wild Apricot member directory, subject to any restrictions you have set in Wild Apricot.

Contact 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 a Wild Apricot donation form.

Forum summary
Displays a summary of the activity in your Wild Apricot forums.

Forum
Displays a Wild Apricot forum.

Blog
Displays a Wild Apricot blog.

Subscription form
Displays an email subscription form visitors can use to sign up for emails from your Wild Apricot site.

You can also add Wild Apricot login boxes to another site.

What gets displayed?

A widget doesn't display the entire page on which the corresponding gadget appears. Instead, it displays any and all content within the placeholder on the page that has an HTML ID of id_Content for Treehouse, Clean Lines, White Space, and Dark Impact themes, and idPrimaryContentBlock1Content for all other themes. To view the HTML ID of the placeholders on your page, begin editing its page template, then display the placeholder settings and expand the Advanced section, where the HTML ID setting can be found.

While editing a page containing the gadget you plan to use as the basis for a widget on another website, be careful not to move any content you want to appear within the widget outside that placeholder.

If you embed content that is restricted to members only, or to certain membership levels, the widget will prompt the visitor to log in to view the content.

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 menu.
2. Within the Integration section, click Widgets code.
   
3. On the Widgets screen, click within the code beside the name of the widget you want to embed. If you have multiple items of the same kind – events, forums, member directories, etc. – then choose the item before clicking within the code. For example, to embed the event details for a specific event, choose the event from the list.
4. Right click over the selected code and copy the code to the clipboard.

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

If the page where you're embedding the widget uses https rather than http, then you need to adjust the element within the embed code that begins src='http:// to src='https://.

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/join'  onload='tryToEnableWACookies("https://stevelivetestsite.wildapricot.org");' >
</iframe>
<br/>
<font style='color:#ccc;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;'>Powered by Wild Apricot <a style='color:#ccc' href='http://www.wildapricot.com/features' target='_blank'>Membership Software</a>
</font>
<script  type="text/javascript" language="javascript" src="https://stevelivetestsite.wildapricot.org/Common/EnableCookies.js" >
</script>

...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 the 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 gadget – and the placeholder in which it appears – on your Wild Apricot site. You can indirectly modify the appearance of the widget by choosing a different website theme, customizing the theme's colors and styles, and for more advanced fine-tuning, using CSS customization. Any changes you make will apply to your Wild Apricot site pages as well as your embedded Wild Apricot widgets.

Embedding other pages as widgets

In addition to the gadget widgets listed above, you can embed any publicly accessible web page from your Wild Apricot account as a widget on another website.

Exception: if you cannot embed a page with a catalog gadget or cart gadget for Wild Apricot's online store.

To do so, copy and paste the code below, replacing pageURL with the URL 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/pageURL'  onload='tryToEnableWACookies("http://yoursite.wildapricot.org");' >
</iframe>
<br/>
<font style='color:#ccc;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;'>Powered by Wild Apricot <a style='color:#ccc' href='http://www.wildapricot.com/features' target='_blank'>Membership Software</a>
</font>
<script  type="text/javascript" language="javascript" src="http://yoursite.wildapricot.org/Common/EnableCookies.js" >
</script>

Setting up a Wild Apricot member-only portal on another website

Using widgets, you can set up a member-only portal on another non-Wild Apricot site. The main portal page could link to several member-only pages, all appearing on the other site.

To set up a Wild Apricot member-only portal on another website, follow these steps:

1. Within Wild Apricot, create the main portal page and restrict access to it to the appropriate membership levels.
2. Create the other pages to be included in the portal and assign the same access restrictions.
3. Edit the main portal page and add links to each of the other portal pages.
4. Copy the embed code for the main portal page and paste it into the HTML of a page on your other website. For instructions on copying the embed code for individual Wild Apricot pages, see Embedding other pages as widgets (above).

Widgets and third-party cookies

When people visit a site that embeds Wild Apricot functionality using widgets, Wild Apricot places a cookie on the visitor's device to recognize the device in the future. In this case, Wild Apricot is considered to be a third-party site by your visitors' browsers. If visitors to your non-Wild Apricot site have third-party cookies completely disabled in their browser, they will not be able to view or access your embedded widget(s).

If third-party cookies are disabled for unvisited sites only, you can copy the latest widget code from Wild Apricot to provide access to your widgets. The new widget code allows visitors who have blocked third-party cookies from unvisited sites to receive cookies by first redirecting them to your Wild Apricot site – making it a visited site – before returning them to your other site that contains the Wild Apricot widget(s).

Widget code copied before June 27, 2013 requires third-party cookies to be enabled for all sites.

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.

Widget limitations

• Widget code copied before June 27, 2013 requires visitors to your non-Wild Apricot site to have third-party cookies enabled in their browser. Widget code copied after that date will not work if third-party cookies are disabled for all sites.
• You cannot embed a widget on a page within the same Wild Apricot site.
• You cannot embed multiple Wild Apricot widgets on the same page.
• Clicking the Forgot Password link will take users to your Wild Apricot site.
• Links in forum subscription emails will take users to your Wild Apricot site.
• Social login buttons will not appear on the Authorization required system page when someone clicks the Login button from a widget.
• Widgets are designed for use on other websites and can’t be used on your Wild Apricot website. Use gadgets instead.

Widgets on iOS using Safari

The iframe containing a Wild Apricot widget may not be scrollable by default when viewed with a Safari browser on an iOS device. To fix this, wrap the iframe code within the following div tags:

<div style="overflow:auto;-webkit-overflow-scrolling:touch">
<iframe width='750px' height='400px' frameborder='no' src='http://stevelivetestsite.wildapricot.org/widget/join' onload='tryToEnableWACookies("https://stevelivetestsite.wildapricot.org");' >
</iframe>
</div>

Make sure you replace the sample iframe code above with your actual iframe code. Keep the div code shown above as is.