The WYSIWYG Editor Widgets – OpenCities

Most content types contain a WYSIWYG Editor for content authors to create pages. In addition to containing a range of text editing and formatting tools, the WYSIWYG toolbar provides the opportunity to use a range of widgets to create advanced or interactive content.

Below, you will find a visual guide to widgets in the WYSIWYG Editor and some example use cases for each one. Please note that some of the advanced interactive elements are unavailable for OC Editor and OC Publisher users; for a complete list of role permissions in the WYSIWYG Editor, please see the Resource below.

tabs and accordions example on a bins page

Many of these elements are used with Featured Sections to create robust department pages or site sections. To learn more, please read Ideas for Organizing Your Department Pages.

Accordion and tab containers: Use when you have a text-heavy page with clear subjects, or to present additional information, such as: Rules, disclaimers, and regulations for council meetings Guides on what to put in bins Frequently asked questions The WYSIWYG toolbar icon is:
Calendars: Can be single or combined, example include: Events calendars organized by department or community group Events and meetings listed together The WYSIWYG toolbar icon is:
Content lists: Use for any kind of page listing, such as: Events list for a venue or library Navigation, including a top task content list with icons Separate news or event listings for departments Further information pages or related content The WYSIWYG toolbar icon is:
Content selector: Useful for small chunks of often repeated content, such as: Side panels Department contact details Social media links The WYSIWYG toolbar icon is:
Plugins and embeds: Good for embedding third-party content into your pages, including: Social media feeds, such as Instagram on tourism sites Complex mapping tools for traffic, roadworks, building and planning EngagementHQ embeds (surveys, ideas, places, quick polls) Newsletters, documents, and publications, like those created via Issuu The WYSIWYG toolbar icon is:
Emphasis styles: Highlight short blocks of important information, such as: Changes to opening hours New or temporary changes to services Rules and restrictions for services Call to action that do not suit buttons Contact information Emphasis styles are applied through CSS:
Featured links: Create blocks of styled links for: Department navigation Quick links for long visual landing pages or global service listings Links above listings, such as subscribe buttons, media links, event promotion, event registration, or venue hire The WYSIWYG toolbar icon is:
Glossary items: Create definition tooltips for jargon and specific terms, such as: Legislative terms, laws, acts Council jobs titles and regulations Item definitions, such as Microchips The WYSIWYG toolbar icon is:
Image gallery: Display groups of images, such as: Community programs (planting stuff, clean-ups, volunteer efforts) Community events (fairs, festivals) City or council plans or concept designs Tourism shots for venues, trails, parks, or accommodation The WYSIWYG toolbar icon is:
Maps: Show location-based pages, for example: Public art and walking tours Planned traffic or roadworks with address search Fire, police, or service stations with address search Parking zones with a KML layer and legend Events, projects, venues, and parks through My Area The WYSIWYG toolbar icon is:
OpenForms: If you have connected with OpenForms, you can directly embed forms for: Event registration, creation, or promotion Community programs Library membership Services, such as animal registration, permits, or fees The WYSIWYG toolbar icon is:
Rotating banners: Provide an image slider with links on pages for: Venue promotion Library events and programs Tourism promotions, such as events, tours, or accommodation The WYSIWYG toolbar icon is: