What is the HUGECITY widget?

The HUGECITY widget is the fastest easiest way to create and maintain an events calendar and map for your website or blog. It's a miniature HUGECITY curated by you automatically! Just set up the types of events you want to see on your widget and we'll do all the work. Your widget's events will always be up-to-date.

How do I create a widget?

First, you need an account with HUGECITY. All you have to do is sign in with Facebook and you're good to go. You can manage widgets from the portal, which you can find in your user menu in the main HUGECITY application.

To create a new widget, click the 'Create Widget' button in the My Widgets section. The widget form will appear and let you set up the types of events you want in your widget and how you want them displayed.

Sample Widget Form

Kind of Events

The widget will show events that are connected to you in a variety of ways:
All Events Events that HUGECITY recommends to you.
My RSVPed Events Events that you're attending.
My Favorited Events Events that you have favorited.
My Friends' Events Events that your friends are going to.
My Liked Pages' Events Events that were created by pages you like.

No private information or search parameters will be revealed in the widget. No RSVP plans or friend names will be listed: just the event name, time, and location.

Event Dates

You can declare the dates of events that you want to display. The dates are always searched by local time of the event.


For list views, the order will set up the sorting order that the events are displayed. If you have a map view, the order will affect which events are shown inside your limit.

Date Order by the start time of the event.
Distance Order by the distance from the center of your search box (if you have set one up).
Score Order by HUGECITY score.
Attending Count Order by number of people attending the event.

Limit to Area

You can choose to limit the events in your widget to a geographic area. When you select this option, you'll be able to draw a rectangle on the map to specify the area you want to limit it to.

# of Events to Show

The maximum number of events to show on your widget. If more events match your widget setup than your max number, they will be trimmed according to your ordering criteria.

This setting does not set a minimum number of events, so if you have no matching events none will be shown.

How do I put a widget on my website?

You can grab the code for the your widget by clicking get the code on your widgets page. You'll be able to customize the appearance of the widget and grab the embeddable code there.

Can I control the widget directly?

Yes! Sometimes you might use javascript to create the element that you want the widget to target. It's easy to create a new widget with javascript dynamically. Include the widget.js library as above, make sure you have a sized target element, and instantiate a widget like this:
var widget = new HugeCityWidget({
  key: "widget-key",
  view: "'map' or 'list'",
  target: "element-id" or element

The widget will automatically load your events attached to the widget-key into the target element.

You can change the view in your own code by calling widget.renderMap() or widget.renderList().

Do I need to load Google Maps?

No, the widget library takes care of loading it for you. If you have already loaded it on your page, then the library will use that one you've loaded. If you experience any bugs with the maps and you're loading Google Maps yourself, make sure you're using the latest version of the library.

Also, if you're using any extensions to Google Maps, make sure you load them before the HUGECITY widget javascript.

It's not working, what do I do?

First, make sure that you've followed all the steps above. Most problems are caused by omitting a step in the installation instructions. If you're still not seeing your events, try the following:

Target element width and height

Make sure that the display property for the target div is 'block' and that it has a non-zero width and height. You can check this by setting the background-color css property to a color different than the rest of your page's background. You can also check this with your browser's debugger.

Check javascript errors

Make sure that the javascript on your page is not throwing any errors. You should be able to open a javascript console in any browser and see error messages being produced by the code on your page. If the HUGECITY widget is having trouble starting up, it will send error messages there that will tell you what it's having trouble with.

The widget looks funny

Make sure that you don't size the widget too small. We recommended no narrower than 300 pixels and no shorter than 400 pixels for optimum usability.

I just changed the widget, but it still is showing my old events

The events for the widget are cached on our servers. Give it a few minutes and it will begin to show the events you changed it to.

Loading the js file over https

We currently don't support loading the widget.js file over https. Your events will still load over https, but the javascript library will not. If you'd like for us to support loading the widget library over https, let us know at help@hugecity.us.

Still not working?

If it's still not working, email us at help@hugecity.us with a description of what's going and a link to the page the widget is on (or the code you're using if the page isn't up) and we'll point you in the right direction.