A widget – aka plugin – is a chunk of Wild Apricot functionality that you can embed – or integrate – into another website. Using a widget, you can embed a Wild Apricot member directory on another website. Using the directory, visitors can view a list of your members, subject to any restrictions you have set in Wild Apricot.
To embed a widget into another website, you copy the embed code then paste it into the other site's HTML code.
Getting the widget code
To obtain the code you need to embed a Wild Apricot member directory on another website, follow these steps:
- Click the Settings menu.
- Within the Integration section, click Widgets code.
- If you added more than one member directory gadget to your Wild Apricot site, click the selection button beside Member directory and select the member directory gadget you want to embed.
- Right click over the code that appears beside the selection button 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.
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 in your Wild Apricot site. You can control the appearance of the widget by choosing a website theme, customizing the colors and styles, and for more advanced fine-tuning, using CSS customization.
For member directory gadgets, you can modify the following elements from the Colors and styles screen:
Filter field name
- General formatting or Typography > Text/Normal
Filter field values
- General formatting or Typography > Text/Normal, Link
"Advanced search/Simple search"
- General formatting or Typography > Text/Normal, Link
Search box
- General formatting or Typography > Text/Normal
Directory headings
- General formatting or Typography > Text/Normal (Blueprint, Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
- Table > Header (Business Casual, Fiesta, and Granite themes)
- Table > Column headings (Bookshelf, Building Blocks, Clean Lines, Dark Impact, Firma, Homestead, Kaleidoscope, Showcase, Skyline, Terra, Tinted Tiles, Treehouse, Whiteboard, White Space themes)
Directory entries
- General formatting or Typography > Text/Normal
- Table> Table row (Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
Public profile links
- General formatting or Typography > Link
- Table > Table row, Table links (except for Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
Advanced search labels
- General formatting or Typography > Text
- Form > Label(s) (except for Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
- Form > Text (Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
Advanced search values
- General formatting or Typography > Text
- Form >Option title (except for Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
- Form > Text (Nature, Memo, Glass, Keynote, Notebook, Aurora themes)
Any changes you make will be applied to other gadgets that use the same settings.