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 event calendar – a list of current and past events from your Wild Apricot events database – on another website.
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 event calendar on another website, follow these steps:
- Click the Settings menu.
- Within the Integration section, click Widgets code.
- If you added more than one event calendar gadget to your Wild Apricot site, click the selection button beside Event list and select the event calendar 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 event calendar gadgets, you can modify the following elements from the Colors and styles screen:
Section headings
- General formatting or Typography > H3
- Typography > Event calendar title (Bookshelf, Clean Lines, Dark Impact, Fiesta, Firma, Homestead, Showcase, Skyline, Terra, Treehouse, Whiteboard, and White Space themes)
- Event calendar > Title (Building Blocks, Tinted Tiles themes)
"Registration" on event details page
- General formatting or Typography > H4
"Switch to Calendar/List View"
- General formatting or Typography > Text/Normal, Link
Event name
- General formatting or Typography> H4, Link Link
Event details
- General formatting or Typography > Text/Normal
Event description
- General formatting or Typography > Text/Normal
- General formatting > Info box (for Blueprint, Business Casual, and Granite themes)
"Already registered", "Show details"
- General formatting or Typography > Text/Normal, Link
- General formatting > Info box (for Blueprint, Business Casual, and Granite themes)
Background color of event detail area
- General formatting > Colored box > Info box (for Aurora, Glass, Keynote, Memo, Nature, and Notebook themes)
Background color of event registration form
- General formatting > Form > Background color (for Aurora, Glass, Keynote, Memo, Nature, and Notebook themes)
Register button
- Functional buttons > Normal/Hover (Clean Lines, Dark Impact, Fiesta, White Space themes)
Any changes you make will be applied to other gadgets that use the same settings.
