Create A New Widget

In this article we will cover the basics of creating a widget via the ReadyUp admin panel, this article will not go into specifics about how to integrate the widget onto any specific web platform. 

1. Log in to the ReadyUp Admin
2. Select the Widgets option from the menu on the left side of the screen
   
3. Click the Create New Widget button in the top right corner of the screen
   
4. You should see a new screen that looks like the image below. You can configure your widget with the panel on the left side of the screen, and preview the events that will be displayed with it on the right.
   

The table below describes each widget field on the page and gives examples for what type of information could be added.

Configuration and Website Widget Options

Field	Description	Example
Widget Name	Descriptive name for the widget, this is not displayed publicly	ReadyUp Event Widget
Widget Type	Minisite - Display the full filter bar in the widget. Event Listing - Only show event cards, no filter options. Calendar - Shows the events in a default calendar view. No cards or filter options.	N/A
Theme	Choose which color palette theme you'd like the website widget to display as. Theme of our Twitch widget changes automatically based on the user's chosen Twitch theme.	N/A
ReadyUp Logo Style and Color	Choose how the ReadyUp logo should be displayed on your widget.	N/A
Scroll Mode	Infinite - Upon scrolling to the bottom of the widget more events cards will load Paginate - Events are divided into pages with a navigation bar on the bottom of the widget	N/A
Group Events by Month?	Choose whether or not the widget should display separate monthly sections when listing events.	N/A
Font	Select what font will be used in the widget. Fonts are provided by Google Fonts.	N/A
Route Behavior	Internal - Cards open on the calendar or on your website in the same Tab.  External - Cards open on Readyup and on a new tab.

Theme Color Options

Field	Description	Example
Global Text Color and Link Color	Choose what colors most text and links should appear as in your widget.	#1d2027
Button Text and Background Color	Choose what colors the buttons and their text in the widget will be by default.	#ffffff
Button Hover Text and Background Hover Color	Choose what colors the buttons and their text in the widget will be when a user is hovering their mouse over them.	#ffffff
Card Header Text and Background Color	Choose what colors the header text and background will be on event cards.	#1d2027
Card Background and Event Link Color	Choose what colors the background and event links will be on event cards.	#f2f4f6

Display Options

Field	Description	Example
Hide Calls to Action	No - Do not hide CTAs on this widget and optionally define widget-specific CTAs to override pre-existing CTAs on events. On Event Cards - Only hide CTAs on this widget's event cards and optionally define widget-specific CTAs to override pre-existing CTAs on events. All - Hide all CTAs on events in this widget.	N/A
Hide Games / Hide Organizations	No - Games or Organizations will be displayed on each event in your widget. On Event Cards - Games or Organizations will only be displayed in an event's detailed view in your widget. All - Games or Organizations will not be displayed anywhere on your widget.	N/A
Sort Events By	Start Date - Events listed in your widget will be sorted by their start date and time. End Date - Events listed in your widget will be sorted by their end date and time. Event Name - Events in your widget will be sorted by their name alphabetically.	N/A
Range Select	Select a date range to display events from. All Upcoming - Will get all future events. Range Select - Allows you to choose a specific date range.	N/A
Page Size	Define how many events should be displayed per page when using the Paginate scroll mode.	24
Set Max Event Limit?	No - Your widget will display all events based on your defined filters. Yes - Your widget will only display events up to your maximum threshold.	Yes - 24

Event Filters

Field	Description	Example
Categories	Set the Categories you want to display	Esports
Genres	Select the Genres you want to display	MOBA
Games	Select the Games you want to display events in	League of Legends
Organizer	Select the Organizations whose events you want to display	Riot Games
Type	Select which types of events to display	Tournament
Platforms	Select which Platforms you want to display events from	Xbox
Language	Select what language the events you display should be in	English
Location Type	Select if you want to display online or onsite locations	Online
Participant	Select which participant(s) you want to display events from	Cloud9
Sponsors	Select which sponsor(s) you want to display events from	Logitech

Your Widget ID is displayed at the top of the page, the icon to the left of it will allow you to copy it to the clipboard for use with our Twitch Widget.

In order to get the code for the widget so it can be integrated into your website or platform scroll down to the "Website Code" section and you will see a screen that looks like this:

You can copy the code and use it to add the widget to your website.