Skip to content

How do I create a widget in Localist for my Georgia State website?

Creating a widget for Localist is easy and quick.  But before you begin, you must have events in your calendar. Please see the earlier article on Adding Events to Localist first if you have not scheduled any events. 



Go to the "three dots" dropdown menu option on calendar.gsu.edu and look for the block labeled "Share Events." You will find a link labeled "Embed events anywhere on the web with our Widget builder." Click on this.





On the WIDGET BUILDER page, you will first want to decide how you want your widget to appear on your Georgia State webpage. For example, do you want your widget to be horizontal or vertical? Do you want it to be plain text or have an image appear with each event listed? We recommend creating a widget with images due to the user interest that images create. Users are more than likely to click on your event if it has a unique and interesting image associated with it.

You have many template options available. We recommend testing them out to see which template works best with whichever page you intend to use it on. For example, if you're adding a calendar to your homepage, "Flex Theme Horizontal Cards Full" is a nice, big, and bold template with four events per row, background images displayed for each event, and a mouse-over with more detailed information.  And if you're adding a calendar into a narrow column on the side of your page, "News Calendar" is an all-text template with a large date and only one event per row.

Play around with the templates to find the one that suits your page best. You can PREVIEW each template by selecting a template and then clicking on PREVIEW WIDGET at the bottom of the Widget Builder page.





After you select your template, you will then have to populate it with your specific events. The NUMBER OF RESULTS option will depend upon which template you have chosen (if you pick any kind of horizontally-themed template). For example, "Flex Theme Horizontal Cards Full" is meant to display four results, but "Flex Theme Horizontal Cards" is meant for narrower columns and is only meant to display 3 events. Test your choice out by using the PREVIEW button at the bottom. The best rule of thumb is that if you're testing on a full-screen browser window, and you have events spilling onto two or more lines, count the number of events on the first line. That is the NUMBER OF RESULTS that you want for your TEMPLATE choice.

We also recommend that DAYS AHEAD be set to 365 so that you have the maximum number of events available to display on your widget.

Then look through the dropdown menus for your DEPARTMENT, OFFICES AND RESOURCES, or COLLEGES AND SCHOOL and select it. You can also only fill in keywords or tags to make a more specified calendar widget, if any keywords or tags have been added to individual events as you created them.  You also have options for PLACES, GROUPS, EVENT TYPE, CAMPUS, AUDIENCE, etc, to choose from.

You can also choose to EXCLUDE CONTENT from appearing on your widget by selecting certain EVENT TYPES, OFFICES AND RESOURCES, CAMPUSES, etc.



Once you have your options picked, and you've previewed your widget using the "Preview Widget" button at the bottom of the page, click on GENERATE EMBED CODE. The WIDGET EMBED CODE will then appear just above the buttons.


You will want to copy everything from the beginning of the code to the </script> in the first three to four lines.   Then you want to go to your GSU site's dashboard and find the CSS & JAVASCRIPT TOOLBOX PLUS plugin. If this plugin is not activated for you yet, please contact DIGITAL STRATEGY via ticket@gsu.uservoice.com and we'll get it activated for you.

In CSS & JAVASCRIPT TOOLBOX PLUS, Create and Name a new CODE BLOCK. Name it for as specific a calendar as you can. For example, you can name it "Front Page Calendar" or "Alpharetta Campus Student Activities Calendar" in order to keep multiple calendars straight. Then paste in the code that you copied from the Localist site. Finally, save the code block.



Now all you have to do is go to the page(s) that you want your new Localist Calendar to appear on, find the exact spot on the page that you want the calendar displayed, add a Text Block, and then select the CSS & JS Toolbox icon (an orange toolbox). Select the Code Block for the calendar widget from the dropdown menu presented and save the Text Block. Then save your page and clear the page cache. The calendar widget should now be visible on your page.



 

Other articles about working in Localist:

Feedback and Knowledge Base