USER GUIDE — FOR DESIGN STAFF

Widget Builder

Build the interactive pieces of your website — menus, news displays, calendars, videos, photo galleries and more — in one place, preview them live, and copy a ready-to-paste snippet. This guide is for the design staff who maintain your site's look; everyday content editors do not need the Widget Builder.

Please consider the environment before printing.

Before you begin

The Widget Builder lives under Site Admin › Design Admin › Widget Builder and requires design-level access. Most widgets display content that is managed elsewhere in the CMS, so that content should exist first: news widgets need news posts, menu widgets need menus, gallery widgets need photo galleries, the Agendas & Minutes widget needs SimpleAgendas meetings, and so on. The widget itself is just the display — delete the widget from a page and your content is untouched.

Every widget follows the same rhythm: pick it from the index, adjust its options while a live preview updates, then copy the generated snippet and paste it where the widget should appear. The snippet is a small piece of HTML; the behavior and styling behind it ship with the EvoCloud platform itself. That is the point of the Widget Builder: when EvoGov improves a widget, every site that uses it gets the improvement automatically — there is no per-site code to keep in sync.

1 Open the Widget Builder and pick a widget

Go to Site Admin › Design Admin › Widget Builder. The index groups every widget into bands — News & Media, Events & Meetings, Resident Communication, Navigation & Wayfinding, Employment, and Site Info. Click a card to open that widget's builder page.

2 Configure it and watch the live preview

Each builder shows its options at the top — things like which menu or category to display, how many items, fonts, colors, and corner rounding — and a live preview underneath. Nothing is saved to your site while you experiment; the preview is just for you.

Tip: the Saved Configs bar at the top of each builder can store a configuration you like, so you can return later and regenerate the same snippet without redoing every setting.

3 Copy the snippet

Scroll to Generated Code and click Copy. Most builders produce a single HTML snippet. A few older builders also show a CSS panel — that CSS is pasted once into the site's theme, not once per page; the builder's hint text tells you which situation applies.

4 Paste it where the widget should appear

For a widget inside page content, open the page in the Page Editor, switch to the Source view (the </> button), and paste the snippet where the widget belongs. For a widget that is part of the site design itself — the main menu, a home page hero — paste it into the theme template instead. Save, then view the public page: the widget wakes up and fills itself with your live content.

Note: a widget on the public site always shows current content — news widgets show the news posts of the moment, calendars show upcoming events. You never re-copy a snippet because content changed; only re-build it when you want different settings.

Widget catalog

What each widget does, band by band, in one line each.

News & Media

Widget	What it shows
News Carousel V2	Sliding row of news cards with photos.
News Card Slider	Sliding row of text-only news cards (no photos needed).
Vertical News Cards	Stacked list of news cards — thumbnail left, headline right.
Carousel	Full-width hero slides with a headline, supporting text, and a button per slide.
Video Player	A polished video player for a single video inside page content.
Home Page Video	Full-width silent looping hero video for the home page. See the spotlight below.
Photo Gallery	A photo gallery as an image grid with a pop-up viewer, or an auto-advancing slideshow.
Stats Widget	Animated count-up statistics row (see also Stats Widgets).
Social Feed	Recent posts from the site's connected social media accounts.

Events & Meetings

Widget	What it shows
Tabbed Calendar with Files	Mini calendar with an event list and meeting files inline.
Events List Combined	Upcoming events and meetings together in one list.
Agendas & Minutes	Recent meetings with their posted agendas, minutes, and packets.
Live Meeting (SimpleAgendas™)	A player that appears automatically while a meeting is streaming live.

Resident Communication

Widget	What it shows
Newsletter Signup (On-page)	An email signup form inside a page or sidebar.
Newsletter Signup (Slide-up)	A polite corner prompt that slides up after a delay.
Embeddable FAQ	A whole FAQ, or chosen sections of one, on any page.
Alerts (V2)	The site alert banner and pop-up, styled to match your design.
Translation (Google Translate)	A language picker that translates the page for residents.

Navigation & Wayfinding

Widget	What it shows
Main Menu V2	The site's main navigation bar: hover dropdowns on desktop, an accordion with a hamburger button on phones, full keyboard support.
Side Menu V2	Collapsible side navigation built from a menu or a department's side menu.
Tabbed Menu Interface	A menu presented as clickable tabs.
Search Box (V2)	The site search box with suggestions as residents type (see also Site Search).
Action Button Builder	Icon medallion quick links — floating, boxed, or circular.
Image Button Builder	Photo button rows and grids built from a menu.

Employment

Widget	What it shows
Job Postings	The site's open jobs as a card list (powered by SimpleStaff™).

Site Info

Widget	What it shows
Weather	Current local conditions and forecast from the National Weather Service.
Quick Links	A styled list of links you define right in the builder.
Staff Directory	Department staff as photo cards or a compact list, honoring each person's privacy settings.
Bids & RFPs	Open bids and RFPs as a card list with a category filter.
Document List	The files in one Media Library folder as a clean, labeled row list.
Map Embed	One of your GIS maps, embedded on any page.

Spotlight: the Home Page Video widget

New in August 2026, this widget replaces the hand-wired hero videos of earlier designs. Pick a video file (MP4 recommended) and an optional poster image, enter the video's width and height, choose what phones should see, and copy one snippet into the home page template.

Two things make it special. First, phones never download the video: the snippet ships without a video source on purpose, and the platform attaches the file only on screens wider than the mobile breakpoint you chose — below it, the band either hides or shows your poster image instead. Second, the band's height is reserved automatically from the width and height you enter, so the page does not jump around while the video loads — no more aspect-ratio math in theme CSS.

Note: visitors who have asked their device to reduce motion get a still frame with player controls instead of an autoplaying video — an accessibility courtesy that is on by default (the builder has a setting if you need to override it).

Migrating an older site? When you paste this widget into a theme that used the old hand-wired hero video, delete the old video markup and its script from the template at the same time — the builder's output panel reminds you.

Next steps

Place your first widget on a page with the Page Editor, or brush up on the content the widgets draw from: News Posts, Menus, Photo Galleries, and Meetings & Events. Content editors who just need pre-built pieces inside a page should see Inserting Components instead.

Need a hand? Contact EvoGov support or visit help.evogov.com.