Using widgets

Overview

You can use a widget to embed WildApricot functionality into another website. 

Important: Third-Party Cookies

Recent changes in the way common browsers handle third-party cookies might cause errors in the way your website functions.

Due to these recent changes, third-party cookies may be newly disabled by default. You may have to change your browser settings to avoid experiencing limited functionality in WildApricot's websites and widgets.

Google has provided the following information for Chrome users:

As you browse the web, third-party cookies will be restricted by default, limiting the ability to track you across different websites.

If a site doesn’t work without third-party cookies and Chrome notices you’re having issues — like if you refresh a page multiple times — we’ll prompt you with an option to temporarily re-enable third-party cookies for that website from the eye icon on the right side of your address bar.

For a deeper dive on Google's recent changes to how Chrome handles third-party cookies, please view Google's article, Phasing out Third-Party Cookies in Chrome.

Developers may be interested in also viewing Google's Privacy Sandbox Timeline.

How to enable third-party cookies

In Chrome, you can re-enable third-party cookies by clicking the eye icon in the right side of your browser's address bar. For more information, view Google's help article.

To enable third-party cookies in Safari, view Enable cookies in Safari on mac.

Important Note: If you've embedded WildApricot widgets on another website, to that site must have third-party cookies enabled in their browser for the widgets to work. 

Embedding a WildApricot widget into another website

To embed a WildApricot widget into another website:

1. Add the corresponding gadget to a page in your WildApricot website.
2. Copy the embed code for the widget. 
3. Paste the embed code into your other site's HTML code.

Available widgets

A widget is available to work with many WildApricot gadgets. The Event list widget, for example, corresponds to the Event calendar gadget.

Note: To embed a WildApricot widget in another website, first create and set up the corresponding gadget on a page in your WildApricot website. 

The following widgets are available:

Event list
Displays your event calendar – a list of current and past events from your WildApricot 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 WildApricot site and pay the membership fee online.

Member directory
Displays a WildApricot member directory, subject to any restrictions you have set in WildApricot.

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 WildApricot.

Donation
Displays a WildApricot donation form.

Forum summary
Displays a summary of the activity in your WildApricot forums.

Forum
Displays a WildApricot forum.

Blog
Displays a WildApricot blog.

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

You can also add WildApricot 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 gadget placeholder on the page.

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.

Note: Ensure that any content you want to appear within the widget remains inside the designated placeholder boundaries. 

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.

Important Note: Users must have third-party cookies enabled in their browsers for widgets to work.

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 sample code you could change the width from 750 pixels to 475 pixels by replacing iframe width='750px' with iframe width='475px' 

<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>

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.

Similarly, you can change the height of the iframe by modifying the height setting 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 WildApricot widget so that it appears like a seamless part of your other website, modify the appearance of the corresponding gadget – and the placeholder in which it appears – on your WildApricot website. 

Any styling changes you make to a gadget will apply to that gadget on all site pages where it's used on your WildApricot website, as well as any embedded WildApricot widgets used on other websites that correspond to that gadget.

Embedding other pages as widgets

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

Exception: You cannot embed a page with a catalog gadget or cart gadget for WildApricot's online store.

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 WildApricot 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>

Note: You may encounter an error if you try to view the embedded page while logged in as a WildApricot administrator. To avoid this problem, view the page in an incognito window or using a different browser.

Setting up a WildApricot members-only portal on another website

Using widgets, you can set up a members-only portal on another (non-WildApricot) site. The main portal page could link to several members-only pages.

To set up a WildApricot members-only portal on another website, follow these steps:

1. Within WildApricot, 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. 

Widget limitations

Important Note: Users must have third-party cookies enabled in their browsers for widgets to work. 

• If authorization is required, visitors will have to log in again if they restart or refresh their browser.
• Visitors to your non-WildApricot site must have third-party cookies enabled in their browser for widgets to work. 
• You cannot embed a widget on a page within the same WildApricot site.
• You cannot embed multiple WildApricot widgets on the same page.
• Clicking the Forgot Password link will take users to your WildApricot site.
• Links in forum subscription emails will take users to your WildApricot 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 WildApricot website. Use gadgets instead.

Widgets on iOS using Safari

The iframe containing a WildApricot 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>

Replace the sample iframe code above with your actual iframe code. Keep the div code shown above as-is.