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 need to have events set up in your calendar. Please see the earlier article on Adding Events to Localist first if you do not have any events scheduled yet. 



Log into your Localist account and go to your ADMIN DASHBOARD. From there you will see "LOCALIST SUCCESS RESOURCES," and under that, PUBLIC WIDGET BUILDER. 





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 in the events listed? We recommend that you create 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 to you. We recommend that you test 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, "Core/Dept Theme Horizontal Cards" is a nice, big and bold template with 5 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 in order 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, "Core/Dept Theme Horizontal Cards" is meant to display 5 results, but "Core/Dept Theme Horiz. Cards Narrow" 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 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, and simply paste in the shortcode. Save the page and the calendar will now appear on your live page.

The shortcode should read: [cjtoolbox name='Name of Shortcode'] with everything between the single quotes being the exact name that you called the code block.



 Other articles about working in Localist:



Feedback and Knowledge Base